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

Types

CSS properties interface with camel cased property names:

Properties
- StandardProperties
  - StandardLonghandProperties
  - StandardShorthandProperties
- VendorProperties
  - VendorLonghandProperties
  - VendorShorthandProperties

CSS properties interface with kebab cased property names:

PropertiesHyphen
- StandardPropertiesHyphen
  - StandardLonghandPropertiesHyphen
  - StandardShorthandPropertiesHyphen
- VendorPropertiesHyphen
  - VendorLonghandPropertiesHyphen
  - VendorShorthandPropertiesHyphen

Equals to Properties but also allows array of values:

PropertiesFallback
- StandardPropertiesFallback
  - StandardLonghandPropertiesFallback
  - StandardShorthandPropertiesFallback
- VendorPropertiesFallback
  - VendorLonghandPropertiesFallback
  - VendorShorthandPropertiesFallback

Equals to PropertiesHyphen but also allows array of values:

PropertiesHyphenFallback
- StandardPropertiesHyphenFallback
  - StandardLonghandPropertiesHyphenFallback
  - StandardShorthandPropertiesHyphenFallback
- VendorPropertiesHyphenFallback
  - VendorLonghandPropertiesHyphenFallback
  - VendorShorthandPropertiesHyphenFallback

At-rules

At-rule interfaces with descriptors.

`@counter-style`

CounterStyle
CounterStyleFallback
CounterStyleHyphen
CounterStyleHyphenFallback

`@font-face`

FontFace
FontFaceFallback
FontFaceHyphen
FontFaceHyphenFallback

`@page`

Page
PageFallback
PageHyphen
PageHyphenFallback

`@viewport`

Viewport
ViewportFallback
ViewportHyphen
ViewportHyphenFallback

Pseudo

String literals of pseudo classes and pseudo elements

Pseudos
- AdvancedPseudos Function-like pseudos like :not(...)
- SimplePseudos

Usage

Length unit 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.SimplePseudos]?: 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',
};