メインコンテンツにスキップ

stylex.types.*

stylex.defineVars および stylex.createTheme 内で使用して、変数の CSS 型を定義する一連のヘルパー関数。

これらの関数は、適切な syntax 値を持つ変数の @property CSS ルールを生成します。

使用例:​

types.* 関数は、stylex.defineVars および stylex.createTheme ですでにサポートされているすべてのパターンと互換性があります。

たとえば、次の変数のセットを考えてみましょう。

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

次の様に、2 つの変数に型を与えることができます。

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

利用可能な型:​

以下の型が利用可能です。

stylex.types.angle​

@property ルールを、<angle> 構文を持つ生成された CSS 変数に対して生成します。

stylex.types.color​

@property ルールを、<color> 構文を持つ生成された CSS 変数に対して生成します。

stylex.types.url​

@property ルールを、<url> 構文を持つ生成された CSS 変数に対して生成します。

stylex.types.image​

@property ルールを、<image> 構文を持つ生成された CSS 変数に対して生成します。

stylex.types.integer​

@property ルールを、<integer> 構文を持つ生成された CSS 変数に対して生成します。

stylex.types.lengthPercentage​

@property ルールを、<length-percentage> 構文を持つ生成された CSS 変数に対して生成します。

stylex.types.length​

@property ルールを、<length> 構文を持つ生成された CSS 変数に対して生成します。

stylex.types.percentage​

@property ルールを、<percentage> 構文を持つ生成された CSS 変数に対して生成します。

stylex.types.number​

@property ルールを、<number> 構文を持つ生成された CSS 変数に対して生成します。

stylex.types.resolution​

@property ルールを、<resolution> 構文を持つ生成された CSS 変数に対して生成します。

stylex.types.time​

@property ルールを、<time> 構文を持つ生成された CSS 変数に対して生成します。

stylex.types.transformFunction​

@property ルールを、<transform-function> 構文を持つ生成された CSS 変数に対して生成します。

stylex.types.transformList​

@property ルールを、<transform-list> 構文を持つ生成された CSS 変数に対して生成します。