Skip to main content

stylex.types.*

A set of helper functions to be used within stylex.defineVars and stylex.createTheme to define CSS types for variables.

These functions result in @property CSS rules for the variables with the appropriate syntax value.

Example use:​

The types.* functions are compatible with all patterns that are supported by stylex.defineVars and stylex.createTheme already.

For example, consider the following set of variables:

vars.stylex.js
import * as stylex from '@stylexjs/stylex';

export const colors = stylex.defineVars({
  accent: {
    default: 'blue',
    '@media (prefers-color-scheme: dark)': 'lightblue',
  },
  sm: '4px',
});

You can give the two variables types like so:

vars.stylex.js
import * as stylex from '@stylexjs/stylex';

export const colors = stylex.defineVars({
  accent: stylex.types.color({
    default: 'blue',
    '@media (prefers-color-scheme: dark)': 'lightblue',
  }),
  sm: stylex.types.length('4px'),
});

Available types​

The following types are available:

stylex.types.angle​

Generates a @property rule for the generated CSS variable with a <angle> syntax.

stylex.types.color​

Generates a @property rule for the generated CSS variable with a <color> syntax.

stylex.types.url​

Generates a @property rule for the generated CSS variable with a <url> syntax.

stylex.types.image​

Generates a @property rule for the generated CSS variable with an <image> syntax.

stylex.types.integer​

Generates a @property rule for the generated CSS variable with an <integer> syntax.

stylex.types.lengthPercentage​

Generates a @property rule for the generated CSS variable with a <length-percentage> syntax.

stylex.types.length​

Generates a @property rule for the generated CSS variable with a <length> syntax.

stylex.types.percentage​

Generates a @property rule for the generated CSS variable with a <percentage> syntax.

stylex.types.number​

Generates a @property rule for the generated CSS variable with a <number> syntax.

stylex.types.resolution​

Generates a @property rule for the generated CSS variable with a <resolution> syntax.

stylex.types.time​

Generates a @property rule for the generated CSS variable with a <time> syntax.

stylex.types.transformFunction​

Generates a @property rule for the generated CSS variable with a <transform-function> syntax.

stylex.types.transformList​

Generates a @property rule for the generated CSS variable with a <transform-list> syntax.