Signum Documentation

The documentation comes from the Markdown files in the source code, so is always up-to-date but available only in English. Enjoy!

Paste your Framework commit SHA

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

Table of content

Style types

Properties

CSS properties interface with camel cased property names:

Extends:

  • StandardProperties
    • StandardLonghandProperties
    • StandardShorthandProperties
  • VendorProperties
    • VendorLonghandProperties
    • VendorShorthandProperties
  • SvgProperties

PropertiesHyphen

CSS properties interface with kebab cased property names:

Extends:

  • StandardPropertiesHyphen
    • StandardLonghandPropertiesHyphen
    • StandardShorthandPropertiesHyphen
  • VendorPropertiesHyphen
    • VendorLonghandPropertiesHyphen
    • VendorShorthandPropertiesHyphen
  • SvgPropertiesHyphen

PropertiesFallback

Equals to Properties but also allows array of values:

Extends:

  • StandardPropertiesFallback
    • StandardLonghandPropertiesFallback
    • StandardShorthandPropertiesFallback
  • VendorPropertiesFallback
    • VendorLonghandPropertiesFallback
    • VendorShorthandPropertiesFallback
  • SvgPropertiesFallback

PropertiesHyphenFallback

Equals to PropertiesHyphen but also allows array of values:

Extends:

  • StandardPropertiesHyphenFallback
    • StandardLonghandPropertiesHyphenFallback
    • StandardShorthandPropertiesHyphenFallback
  • VendorPropertiesHyphenFallback
    • VendorLonghandPropertiesHyphenFallback
    • VendorShorthandPropertiesHyphenFallback
  • SvgPropertiesHyphenFallback

At-rule types

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 types

String literals of pseudo classes and pseudo elements

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

Usage

Length unit defaults to string | 0 because 0 is the only unitless length. But it's possible to override it 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.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',
};

Version 2.0

The casing of CSS vendor properties are changed matching the casing of prefixes in Javascript. So all of them are capitalized except for ms.

  • msOverflowStyle is still msOverflowStyle
  • mozAppearance is now MozAppearance
  • webkitOverflowScrolling is now WebkitOverflowScrolling

More info: https://www.andismith.com/blogs/2012/02/modernizr-prefixed/