stylex.types.*

A set of helper functions to be used within defineVars and 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 defineVars and 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.