Data Types

While not an exhaustive list of all types defined in the library, this section covers the core data types that are essential to using the library.

Type: object

When passing styles to the style, styleMap and styleTree functions, or returning styles from a ThemedStyles function, you’ll need to define them in the following format.

{
  color: 'red',
  fontFamily: 'comic sans ms',
  fontSize: 24
}

Simple pseudo selectors are supported at the top level.

{
  color: 'red',
  ':hover': {
    backgroundColor: 'pink'
  },
  ':active': {
    backgroundColor: 'tomato'
  }
}

Media queries are also supported via the @media key.

{
  fontSize: 24,
  '@media': {
    'screen and (min-width: 768px)': {
      fontSize: 42
    }
  }
}

For anything more advanced, you can provide a set of custom selectors. Within each selector, you must target the ampersand character (&), which refers to the element currently being styled.

{
  marginRight: 10,
  selectors: {
    '&:nth-child(2n)': {
      marginRight: 0
    }
  }
}

Within selectors, existing treat classes can be referenced with standard string interpolation.

{
  backgroundColor: 'white',
  selectors: {
    [`${parentClass} &`]: {
      backgroundColor: 'aqua'
    }
  }
}

The @keyframes property allows the creation of keyframes that will automatically be attached to the style as your animation-name.

{
  backgroundColor: 'white',
  '@keyframes': {
    from: {
      transform: 'rotate(0deg)',
    },
    to: {
      transform: 'rotate(359deg)',
    },
  },
  animationTimingFunction: 'linear',
  animationDuration: '1.5s',
}

The animation shorthand is also supported via a @keyframes placeholder.

{
  backgroundColor: 'white',
  '@keyframes': {
    from: {
      transform: 'rotate(0deg)',
    },
    to: {
      transform: 'rotate(359deg)',
    },
  },
  animation: '@keyframes 1.5s linear'
}

Type: function

Accepts a Theme and returns a Styles object.

(theme) => ({
  color: theme.brandColor
});

When defining themes and consuming themes, the provided theme object uses the Theme type, which is any by default. This means that any usage of a theme will not be type-safe.

The simplest way to fix this is to override this type at a global level. For example, you could create a treat.d.ts file in your project with the following contents.

declare module 'treat/theme' {
  export interface Theme {
    brandColor: string;
    grid: number;
  }
}

If your Theme type is already defined elsewhere in your application, you’ll need to import it with a dynamic import expression within the module declaration block.

declare module 'treat/theme' {
  type MyTheme = import('./types').Theme;
  export interface Theme extends MyTheme {}
}

Alternatively, if you’d prefer to avoid global types, you can manually annotate the theme object being passed into a ThemedStyles function.

import { style } from 'treat';
import { Theme } from './types';

const themedClass = style((theme: Theme) => ({
  color: theme.brandColor
}));