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

変数の型

注意

テーマAPIを有効にするには、StyleX Babel設定でunstable_moduleResolutionオプションを有効にする必要があります。

高度なユースケース

変数の型を宣言することは、高度なユースケースです。ほとんどのユースケースでは必要ありません。

デフォルトでは、変数の値は文字列です。これはほとんどのユースケースで正しい選択です。しかし、最新のブラウザではCSS変数の型を定義することがサポートされています。変数は、変数の``型を指定する`@property`ルールを使用して宣言できます。

これにより、CSSでは不可能だった興味深いユースケースを実現できます。いくつかの例を以下に示します。

  • 角度または色の変数をアニメーション化することで、グラデーションをアニメーション化します。
  • 要素上の`1em`の値を取得し、子孫要素で使用します。
  • 浮動小数点数を整数に変換します。

API​

StyleXで変数に型を割り当てるには、`stylex.types.color`や`stylex.types.length`などの様々な関数を使用できます。

使用可能な関数の完全なリストについては、APIドキュメントを参照してください。

使用方法​

変数に型を割り当てるには、変数の値を適切な型関数でラップできます。

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

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

export const tokens = stylex.defineVars({
  primaryText: 'black',
  secondaryText: '#333',
  borderRadius: '4px',
  angle: '0deg',
  int: '2',
});

現在、すべての値は任意の文字列です。変数に型を割り当てるには、適切な型関数でラップできます。

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

export const tokens = stylex.defineVars({
  primaryText: stylex.types.color('black'),
  secondaryText: stylex.types.color('#333'),
  borderRadius: stylex.types.length('4px'),
  angle: stylex.types.angle('0deg'),
  int: stylex.types.integer(2),
});

条件付き値​

値内でatルールを使用する場合でも、使い方は変わりません。以下は完全に有効です。

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

export const colors = stylex.defineVars({
  primaryText: stylex.types.color({default: 'black', [DARK]: 'white'}),
});

ソースコードにおける型安全性​

`stylex.types.*`関数の主な利点は、生成されたCSSで変数の型を宣言することで機能を有効にすることです。しかし、StyleX APIは独自のコードベース内の型安全性を向上させる効果もあります。

`stylex.defineVars`内で特定の型で変数が宣言されている場合、静的型は`stylex.createTheme`呼び出し内で変数がテーマ化されるときに、同じ型関数が使用されることを強制します。

theme.js
import * as stylex from '@stylexjs/stylex';
import {tokens} from './tokens.stylex.js';

export const highContrast = stylex.createTheme(tokens, {
  primaryText: stylex.types.color('black'),
  secondaryText: stylex.types.color('#222'),
  borderRadius: stylex.types.length('8px'),
  angle: stylex.types.angle('0deg'),
  int: stylex.types.integer(4),
});

変数の型は既に`stylex.defineVars`呼び出し内で宣言されているため、`stylex.createTheme`内の型関数を使用することは機能的には何もしませんが、型安全のために静的型によって必要とされます。

ユースケースの例​

`round()`のシミュレーション​

最新のブラウザでは、CSSで`round()`関数がサポートされ始めています。しかし、この機能は`integer`型の変数を使用してシミュレートできます。

const styles = stylex.create({
  gradient: {
    // Math.floor
    [tokens.int]: `calc(16 / 9)`

    // Math.round
    [tokens.int]: `calc((16 / 9) + 0.5)`
  },
})

`tokens.int`は`integer`型で宣言されているため、値が割り当てられるたびに、小数点以下の値は切り捨てられ、値は整数型に変換されます。

グラデーションのアニメーション​

通常、グラデーションをアニメーション化することはできません。しかし、型付きの`angle`変数を使用することで、その中で使用される角度をアニメーション化することで、グラデーションをアニメーション化できます。

通常のCSSプロパティをアニメーション化する代わりに、`angle`変数を`stylex.keyframes`でアニメーション化できます。

import * as stylex from '@stylexjs/stylex';
import {tokens} from './tokens.stylex';

const rotate = stylex.keyframes({
  from: { [tokens.angle]: '0deg' },
  to: { [tokens.angle]: '360deg' },
});

const styles = stylex.create({
  gradient: {
    backgroundImage: `conic-gradient(from ${tokens.angle}, ...colors)`,
    animationName: rotate,
    animationDuration: '10s',
    animationTimingFunction: 'linear',
    animationIterationCount: 'infinite',
  },
})

これを使用して、回転する円錐グラデーションを作成できます。