CSSType

CSSType is a pure type-definitions package that provides strict TypeScript and Flow types for every CSS property and value, generated directly from MDN’s browser-compat-data. Importing CSS.Properties gives autocomplete and compile-time type checking on style objects, catching typos in property names (colour instead of color) and invalid values (middle instead of center for textAlign) before code ever runs.

Because its types are mechanically generated from MDN’s authoritative CSS data rather than hand-maintained, CSSType stays current with the CSS spec and is widely depended upon as the underlying type source for CSS-in-JS libraries, style-object APIs, and any TypeScript/Flow codebase that models CSS properties as typed objects.

What You Get

• CSS.Properties type covering every standard CSS property with its valid value union
• At-rule types (AtRule.Viewport, etc.) and pseudo-class/pseudo-element types for advanced selector typing
• Both TypeScript (index.d.ts) and Flow (index.js.flow) type definitions maintained in lockstep
• Generic type parameters (e.g. CSS.Properties<TLength>) for customizing how length/numeric values are typed
• Types generated from and kept in sync with MDN’s browser-compat-data and mdn-data packages rather than hand-authored

Common Use Cases

• Typing CSS-in-JS style objects in libraries like styled-components or Emotion, which depend on CSSType as their underlying property/value types
• Catching CSS property name typos and invalid values at compile time in TypeScript or Flow projects that build style objects programmatically
• Building design-system or component-library APIs that accept typed style props validated against real CSS property/value unions
• Powering autocomplete for CSS property names and values in editors via TypeScript’s language service

Under The Hood

Architecture CSSType has no runtime code at all — its main field is intentionally empty and the published package consists solely of index.d.ts (TypeScript, ~22,500 lines) and index.js.flow (Flow). The repository’s actual logic lives in its build tooling (build.ts, update.ts, src/), which reads MDN’s browser-compat-data and mdn-data npm packages, maps each CSS property to its accepted value grammar, and mechanically generates the massive type-definition file rather than having a human write or maintain thousands of property/value union types by hand.

Tech Stack The generator toolchain is TypeScript-based, running via tsx, and depends on mdn-data, @mdn/browser-compat-data, and css-tree to parse and interpret CSS grammar data pulled from MDN. Testing runs through Jest across both src (generator logic) and dist (generated output) test suites, and releases are automated via release-it.

Code Quality The __tests__ directory and dual test:src/test:dist Jest scripts indicate the project tests both its generation logic and the correctness of its final generated types against real style objects, which matters a great deal given the definitions file is nearly entirely machine-generated and any generator bug would silently propagate into thousands of type errors (or missed errors) downstream. The generated index.d.ts itself is not hand-reviewable line by line, so quality here is really a function of the generator’s own test coverage and its fidelity to MDN’s compatibility data.

API Design Consumer-facing usage is minimal by design: import type * as CSS from 'csstype' and reference CSS.Properties (optionally parameterized, e.g. CSS.Properties<string | number>, to control how length values are typed) — there is no configuration, no functions to call, and no runtime footprint, making adoption essentially zero-cost for any project that already uses TypeScript or Flow.