Package Exports

csstype

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (csstype) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

CSSType

TypeScript 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@latest  # For projects
$ npm install csstype@*       # For libraries

Usage

Lengths defaults to string. But it's possible to add number as well using generics.

import * as CSS from 'csstype';

const style: CSS.Properties<string | number> = {
  padding: 10,
  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',
  },
}