CSSType

TypeScript and Flow definitions for CSS, generated by data from MDN. It provides autocompletion and type checking for CSS properties and values.

import * as CSS from 'csstype';

const style: CSS.Properties = {
  alignSelf: 'stretsh', // Type error on value
  colour: 'white',      // Type error on property
}

Getting started

$ npm install csstype
$ # or
$ yarn add csstype

Usage

Lengths defaults to string | number. But it's possible to override it using generics.

import * as CSS from 'csstype';

const style: CSS.Properties<string> = {
  padding: '10px',
  margin: '1rem',
}

In some cases, like for CSS-in-JS libraries, an array of values is a way to provide fallback values in CSS. Using CSS.PropertiesFallback instead of CSS.Properties will add the possibility to use any property value as an array of values.

import * as CSS from 'csstype';

const style: CSS.PropertiesFallback = {
  display: [
    '-webkit-flex',
    'flex',
  ],
  color: 'white',
}

There's even string literals for pseudo selectors and elements.

import * as CSS from 'csstype';

const pseudos: { [P in CSS.Pseudos]?: CSS.Properties } = {
  ':hover': {
    display: 'flex',
  },
}

Hyphen cased (kebab cased) properties are provided in CSS.PropertiesHyphen and CSS.PropertiesHyphenFallback. It's not not added by default in CSS.Properties. To allow both of them, you can simply extend with CSS.PropertiesHyphen or/and CSS.PropertiesHyphenFallback.

import * as CSS from 'csstype';

interface Style extends CSS.Properties, CSS.PropertiesHyphen { }

const style: Style = {
  'flex-grow': 1,
  'flex-shrink': 0,
  'font-weight': 'normal',
  backgroundColor: 'white',
}