CSSType

npm

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

TypeScript

```ts import type * as CSS from 'csstype';

const style: CSS.Properties = { colour: 'white', // Type error on property textAlign: 'middle', // Type error on value }; ```

Flow

```js // @flow strict import * as CSS from 'csstype';

const style: CSS.Properties<> = { colour: 'white', // Type error on property textAlign: 'middle', // Type error on value }; ```

Further examples below will be in TypeScript!

Getting started

sh $ npm install csstype

Table of content

Style types

Properties are categorized in different uses and in several technical variations to provide typings that suits as many as possible.

| | Default | Hyphen | Fallback | HyphenFallback | | -------------- | -------------------- | -------------------------- | ---------------------------- | ---------------------------------- | | All | Properties | PropertiesHyphen | PropertiesFallback | PropertiesHyphenFallback | | Standard | StandardProperties | StandardPropertiesHyphen | StandardPropertiesFallback | StandardPropertiesHyphenFallback | | Vendor | VendorProperties | VendorPropertiesHyphen | VendorPropertiesFallback | VendorPropertiesHyphenFallback | | Obsolete | ObsoleteProperties | ObsoletePropertiesHyphen | ObsoletePropertiesFallback | ObsoletePropertiesHyphenFallback | | Svg | SvgProperties | SvgPropertiesHyphen | SvgPropertiesFallback | SvgPropertiesHyphenFallback |

Categories:

Variations:

At-rule types

At-rule interfaces with descriptors.

TypeScript: These will be found in the AtRule namespace, e.g. AtRule.Viewport.
Flow: These will be prefixed with AtRule$, e.g. AtRule$Viewport.

| | Default | Hyphen | Fallback | HyphenFallback | | -------------------- | -------------- | -------------------- | ---------------------- | ---------------------------- | | @counter-style | CounterStyle | CounterStyleHyphen | CounterStyleFallback | CounterStyleHyphenFallback | | @font-face | FontFace | FontFaceHyphen | FontFaceFallback | FontFaceHyphenFallback | | @viewport | Viewport | ViewportHyphen | ViewportFallback | ViewportHyphenFallback |

Pseudo types

String literals of pseudo classes and pseudo elements

Extends:

Generics

All interfaces has two optional generic argument to define length and time: CSS.Properties<TLength = string | 0, TTime = string>

Usage

```ts import type * as CSS from 'csstype';

const style: CSS.Properties = { width: '10px', margin: '1em', }; ```

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.

```ts import type * as CSS from 'csstype';

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

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

```ts import type * 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.

```ts import type * 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', }; ```

Adding type checked CSS properties to a HTMLElement.

```ts import type * as CSS from 'csstype';

const style: CSS.Properties = { color: 'red', margin: '1em', };

let button = document.createElement('button');

Object.assign(button.style, style); ```

What should I do when I get type errors?

The goal is to have as perfect types as possible and we're trying to do our best. But with CSS Custom Properties, the CSS specification changing frequently and vendors implementing their own specifications with new releases sometimes causes type errors even if it should work. Here's some steps you could take to get it fixed:

If you're using CSS Custom Properties you can step directly to step 3.

  1. First of all, make sure you're doing it right. A type error could also indicate that you're not :wink:

  2. Have a look in issues to see if an issue already has been filed. If not, create a new one. To help us out, please refer to any information you have found.

  3. Fix the issue locally with TypeScript (Flow further down):

    ```ts // My css.d.ts file import type * as CSS from 'csstype';

    declare module 'csstype' { interface Properties { // Add a missing property WebkitRocketLauncher?: string;

      // Add a CSS Custom Property
  '--theme-color'?: 'black' | 'white';

  // Allow namespaced CSS Custom Properties
  [index: `--theme-${string}`]: any;

  // Allow any CSS Custom Properties
  [index: `--${string}`]: any;

  // ...or allow any other property
  [index: string]: any;
}

    } ```

    ```ts const style: CSS.Properties = { // Add a missing property ['WebkitRocketLauncher' as any]: 'launching',

    // Add a CSS Custom Property
['--theme-color' as any]: 'black',

    }; ```

    Fix the issue locally with Flow:

    ```js const style: $Exact<CSS.Properties<*>> = { // Add a missing property [('WebkitRocketLauncher': any)]: 'launching',

    // Add a CSS Custom Property
[('--theme-color': any)]: 'black',

    }; ```

Version 3.0

Contributing

Never modify index.d.ts and index.js.flow directly. They are generated automatically and committed so that we can easily follow any change it results in. Therefor it's important that you run $ git config merge.ours.driver true after you've forked and cloned. That setting prevents merge conflicts when doing rebase.

Commands