DOCSEARCHbyAlgolia
Submit Docs

csstype

repository·master·Indexed 23 days ago

https://github.com/frenic/csstype

Strict TypeScript and Flow types for CSS properties and values generated from MDN data. Version 3.2.3 provides autocompletion and type checking for standard, vendor, obsolete, and SVG properties, supporting camelCase and kebab-case variations, as well as array-based fallback values and at-rule descriptors.

Tokens
1.7K
Snippets
6
Records
9
Agent score
33%

What's inside csstype

  1. Configure length and time generics in CSS.Properties

    master

    All interfaces accept two optional generic arguments to customize how length and time values are typed: CSS.Properties<TLength = string | 0, TTime = string>.

    • Length (TLength): Defaults to string | 0. Use this to allow numeric values (e.g., string | number) for platforms that don't require unit identifiers.
    • Time (TTime): Defaults to string. Use this to allow numeric values (e.g., string | number) for time-based properties.
    // Customizing Length
const style: CSS.Properties<string | number> = {
  width: 100,
};

// Customizing both Length and Time
const style: CSS.Properties<string | number, number> = {
  transitionDuration: 1000,
};
    const style: CSS.Properties<string | number> = {
  width: 100,
};

  2. Use Pseudo types for selectors and elements

    master

    CSSType provides string literals for pseudo classes and elements via the Pseudos type. This is split into two categories:

    • SimplePseudos: Plain pseudos that only have one variation (e.g., :hover).
    • AdvancedPseudos: Function-like pseudos that require arguments (e.g., :not(:first-child)). The string literal contains the value excluding the parenthesis (e.g., :not).

    Example usage with SimplePseudos:

    import type * as CSS from 'csstype';

const pseudos: { [P in CSS.SimplePseudos]?: CSS.Properties } = {
  ':hover': {
    display: 'flex',
  },
};

  4. Fix type errors for CSS Custom Properties or missing properties

    master

    If you encounter type errors (e.g., with CSS Custom Properties or vendor-specific properties not yet in the spec), you can resolve them using module augmentation or type assertion.

    Recommended: Module Augmentation (TypeScript)

    Create a declaration file (e.g., css.d.ts) to extend the csstype module:

    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;
  }
}

    Alternative: Type Assertion (TypeScript)

    Use as any to bypass the check for a specific instance:

    const style: CSS.Properties = {
  ['WebkitRocketLauncher' as any]: 'launching',
  ['--theme-color' as any]: 'black',
};

    Alternative: Type Assertion (Flow)

    Use $Exact<CSS.Properties<*>> and type assertion:

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

const style: $Exact<CSS.Properties<*>> = {
  [('WebkitRocketLauncher': any)]: 'launching',
  [('--theme-color': any)]: 'black',
};

  5. Use CSS.PropertiesFallback for array-based values

    master

    For CSS-in-JS libraries that support providing fallback values as an array (e.g., ['-webkit-flex', 'flex']), use CSS.PropertiesFallback instead of CSS.Properties.

    import type * as CSS from 'csstype';

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

  6. Use kebab-case (hyphenated) CSS properties

    master

    By default, CSS.Properties uses camelCase. To use kebab-case (e.g., 'flex-grow'), you must extend CSS.Properties with CSS.PropertiesHyphen or CSS.PropertiesHyphenFallback.

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

  7. Use CSSType for basic CSS properties

    master

    You can use CSS.Properties to type-check standard CSS objects. By default, it uses camelCase property names.

    import type * as CSS from 'csstype';

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

  8. Use At-rule types for CSS descriptors

    master

    At-rule interfaces are found in the AtRule namespace in TypeScript (e.g., AtRule.Viewport). In Flow, they are prefixed with AtRule$ (e.g., AtRule$Viewport).

    DefaultHyphenFallbackHyphenFallback
    @counter-styleCounterStyleCounterStyleHyphenCounterStyleFallbackCounterStyleHyphenFallback
    @font-faceFontFaceFontFaceHyphenFontFaceFallbackFontFaceHyphenFallback
    @viewportViewportViewportHyphenViewportFallbackViewportHyphenFallback

  9. Understand CSS property categories and variations

    master

    CSSType categorizes properties to suit different technical requirements.

    Categories

    • All: Includes Standard, Vendor, Obsolete, and Svg.
    • Standard: Current properties (includes StandardLonghand and StandardShorthand).
    • Vendor: Vendor-prefixed properties (includes VendorLonghand and VendorShorthand).
    • Obsolete: Removed or deprecated properties.
    • Svg: SVG-specific properties.

    Variations

    • Default: JavaScript (camel) cased property names.
    • Hyphen: CSS (kebab) cased property names.
    • Fallback: Accepts an array of values (e.g., string | string[]).
    DefaultHyphenFallbackHyphenFallback
    AllPropertiesPropertiesHyphenPropertiesFallbackPropertiesHyphenFallback
    StandardStandardPropertiesStandardPropertiesHyphenStandardPropertiesFallbackStandardPropertiesHyphenFallback
    VendorVendorPropertiesVendorPropertiesHyphenVendorPropertiesFallbackVendorPropertiesHyphenFallback
    ObsoleteObsoletePropertiesObsoletePropertiesHyphenObsoletePropertiesFallbackObsoletePropertiesHyphenFallback
    SvgSvgPropertiesSvgPropertiesHyphenSvgPropertiesFallbackSvgPropertiesHyphenFallback