TypeScript

style9 has first-class TypeScript support, powered by csstype.

CSS Custom Properties

Custom properties can be added to the type definition by augmenting the CustomProperties interface. This makes them available as properties and as values.

declare module 'style9' {
  interface CustomProperties {
    '--bg-color'?: string;
  }
}

style9.create({
  declaration: {
    '--bg-color': 'blue'
  },
  use: {
    backgroundColor: 'var(--bg-color)'
  }
});

Media queries

For TypeScript < 4.4 the following syntax is required for media queries and @supports

style9.create({
  mobile: {
    '@media': {
      '(min-width: 800px)': {
        display: 'none'
      }
    },
    '@supports': {
      'not (display: grid)': {
        float: 'right'
      }
    }
  },
});