CSSType
TypeScript and Flow definitions for CSS, generated by data from MDN. It provides autocompletion and type checking for CSS properties and values.
TypeScript
Flow
Further examples below will be in TypeScript!
Getting started
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 |
|
|
| |
All |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Categories:
All - Includes
Standard
,Vendor
,Obsolete
andSvg
Standard
- Current properties and extends subcategoriesStandardLonghand
andStandardShorthand
(e.g.StandardShorthandProperties
)Vendor
- Vendor prefixed properties and extends subcategoriesVendorLonghand
andVendorShorthand
(e.g.VendorShorthandProperties
)Obsolete
- Removed or deprecated propertiesSvg
- SVG-specific properties
Variations:
Default - JavaScript (camel) cased property names
Hyphen
- CSS (kebab) cased property namesFallback
- Also accepts array of values e.g.string | string[]
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 |
|
|
| |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Pseudo types
String literals of pseudo classes and pseudo elements
Pseudos
Extends:
AdvancedPseudos
Function-like pseudos e.g.
:not(:first-child)
. The string literal contains the value excluding the parenthesis::not
. These are separated because they require an argument that results in infinite number of variations.SimplePseudos
Plain pseudos e.g.
:hover
that can only be one variation.
Generics
All interfaces has two optional generic argument to define length and time: CSS.Properties<TLength = string | 0, TTime = string>
Length is the first generic parameter and defaults to
string | 0
because0
is the only length where the unit identifier is optional. You can specify this, e.g.string | number
, for platforms and libraries that accepts any numeric value as length with a specific unit.Time is the second generic argument and defaults to
string
. You can specify this, e.g.string | number
, for platforms and libraries that accepts any numeric value as length with a specific unit.
Usage
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.
There's even string literals for pseudo selectors and elements.
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
.
Adding type checked CSS properties to a HTMLElement
.
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.
First of all, make sure you're doing it right. A type error could also indicate that you're not 😉
Some CSS specs that some vendors has implemented could have been officially rejected or haven't yet received any official acceptance and are therefor not included
If you're using TypeScript, type widening could be the reason you get
Type 'string' is not assignable to...
errors
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.
Fix the issue locally with TypeScript (Flow further down):
The recommended way is to use module augmentation. Here's a few examples:
The alternative way is to use type assertion. Here's a few examples:
Fix the issue locally with Flow:
Use type assertion. Here's a few examples:
Version 3.0
All property types are exposed with namespace TypeScript:
Property.AlignContent
(wasAlignContentProperty
before) Flow:Property$AlignContent
All at-rules are exposed with namespace TypeScript:
AtRule.FontFace
(wasFontFace
before) Flow:AtRule$FontFace
Data types are NOT exposed E.g.
Color
andBox
. Because the generation of data types may suddenly be removed or renamed.TypeScript hack for autocompletion Uses
(string & {})
for literal string unions and(number & {})
for literal number unions (related issue). UtilizePropertyValue<T>
to unpack types from e.g.(string & {})
tostring
.New generic for time Read more on the "Generics" section.
Flow types improvements Flow Strict enabled and exact types are used.
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
yarn build
Generates typings and type checks themyarn watch
Runs build on each saveyarn test
Runs the testsyarn lazy
Type checks, lints and formats everything
Last updated