csstype

What is csstype?

The csstype package provides TypeScript and Flow definitions for CSS properties and values. It is designed to enhance type safety and autocompletion when working with CSS in JavaScript and TypeScript projects. It includes types for CSS properties, pseudo-classes, pseudo-elements, and at-rules.

What are csstype's main functionalities?

Type definitions for CSS properties

Csstype allows developers to define CSS properties in an object with type checking. This ensures that the values assigned to CSS properties are valid according to the CSS specification.

{"color": "blue", "fontSize": "12px"}

Type definitions for pseudo-classes and pseudo-elements

Developers can use csstype to define styles for pseudo-classes and pseudo-elements with type safety, ensuring that the pseudo selectors and their associated styles are correctly typed.

{"::before": {"content": "'Before content'"}, ":hover": {"color": "red"}}

Type definitions for at-rules

Csstype includes type definitions for CSS at-rules like @media, allowing developers to write media queries with type-checked properties and values.

{"@media (min-width: 768px)": {"body": {"backgroundColor": "lightblue"}}}

Other packages similar to csstype

styled-components

Styled-components is a library for styling React components using tagged template literals. It provides a similar level of type safety and autocompletion when used with TypeScript, but it also includes runtime styling capabilities, which csstype does not.

emotion

Emotion is another CSS-in-JS library that allows for styling applications using JavaScript. It offers a similar developer experience to styled-components and can be used with TypeScript for type safety. Emotion also supports dynamic styling, which is not a feature of csstype.

typestyle

Typestyle is a TypeScript-friendly library that allows for writing type-safe CSS with JavaScript. It is similar to csstype in providing type definitions for CSS properties, but it also includes utilities for generating CSS classes and handling them in JavaScript.

README

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

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 containing 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

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

Usage

Lengths 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',
};