跳到主要内容

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.