スタイルの定義

StyleXは、React DOMのインラインスタイルやReact Nativeのスタイルを扱うのと似た、表現力豊かなJavaScript APIを使用しています。

制約

StyleXは事前コンパイルに依存するため、すべてのスタイルが静的に解析可能であることが重要です。つまり、すべての「Raw Style Object」には、以下のみが含まれている必要があります。

• プレーンなオブジェクトリテラル
• 文字列リテラル
• 数値リテラル
• 配列リテラル
• null または undefined
• 上記に解決される定数、単純な式、組み込みメソッド（例：.toString()）。
• そして、動的なスタイルのためのアロー関数

以下は許可されていません

• 関数呼び出し（StyleX関数を除く）
• 他のモジュールからインポートされた値（.stylex.jsファイルからStyleXを使用して作成されたCSS変数を除く）。

スタイルの作成

スタイルはstylex.create関数で作成する必要があります。1つ以上の「名前空間」、またはスタイルのオブジェクトを定義できます。以下の例では、baseとhighlightedという2つの「名前空間」があります。名前は任意であり、create()関数呼び出しの結果をキャプチャするために使用される定数を表します。

import * as stylex from '@stylexjs/stylex';

const styles = stylex.create({
  base: {
    fontSize: 16,
    lineHeight: 1.5,
    color: 'rgb(60,60,60)',
  },
  highlighted: {
    color: 'rebeccapurple',
  },
});

疑似クラス

疑似クラスは、要素のさまざまな状態を表します。StyleXでは、疑似クラスの宣言はプロパティ内にネストされています。たとえば、現在lightblueの背景を持つボタンがあるとしましょう。

import * as stylex from '@stylexjs/stylex';

const styles = stylex.create({
  button: {
    backgroundColor: 'lightblue',
  },
});

さまざまな状態の背景色を変更する疑似クラスを追加する場合は、lightblueの文字列リテラルを疑似状態のオブジェクトに置き換えます。

import * as stylex from '@stylexjs/stylex';

const styles = stylex.create({
  button: {
    backgroundColor: {
      default: 'lightblue',
      ':hover': 'blue',
      ':active': 'darkblue',
    },
  },
});

疑似要素

不要な疑似要素を避ける

可能な限り疑似要素を避け、代わりに実際のHTML要素（つまり、::beforeや::afterをdivやspanなどの要素に置き換える）に依存することをお勧めします。これにより、CSSバンドルのサイズを削減できます。

疑似要素は、ユーザーエージェントが提供するネイティブHTML要素に含まれるシャドウDOM要素をターゲットにする方法です。たとえば、::placeholderは、inputまたはtextarea要素内のプレースホルダーテキストを含む要素を参照します。StyleXで疑似要素をターゲットにするには、名前空間内のトップレベルキーとして定義する必要があります。

import * as stylex from '@stylexjs/stylex';

const styles = stylex.create({
  input: {
    // pseudo-element
    '::placeholder': {
      color: '#999',
    },
    color: {
      default: '#333',
      // pseudo-class
      ':invalid': 'red',
    },
  },
});

メディアクエリ（およびその他の@ルール）

同様に、メディアクエリはスタイル値内の「条件」として使用できます。

import * as stylex from '@stylexjs/stylex';

const styles = stylex.create({
  base: {
    width: {
      default: 800,
      '@media (max-width: 800px)': '100%',
      '@media (min-width: 1540px)': 1366,
    },
  },
});

条件の組み合わせ

メディアクエリと疑似セレクターを組み合わせる必要がある場合、スタイル値を複数レベル深くネストできます。

import * as stylex from '@stylexjs/stylex';

const styles = stylex.create({
  button: {
    color: {
      default: 'var(--blue-link)',
      ':hover': {
        default: null,
        '@media (hover: hover)': 'scale(1.1)',
      },
      ':active': 'scale(0.9)',
    },
  },
});

情報

条件付きスタイルを作成する際は、defaultケースが必要です。デフォルトケースでスタイルを適用したくない場合は、値としてnullを使用できます。

default以外の条件にnullを使用しても効果はなく、無効と見なされる必要があります。

フォールバック スタイル

StyleXには、特定の新しいスタイルプロパティをサポートしていないブラウザ用のフォールバックスタイルが必要な場合があります。

CSSでは、次のようなことを行う場合があります。

.header {
  position: fixed;
  position: -webkit-sticky;
  position: sticky;
}

この種の構文は、JavaScriptオブジェクトを使用する場合は不可能です。したがって、StyleXでは、firstThatWorks関数を使用して同じことを実現できます。

import * as stylex from '@stylexjs/stylex';

const styles = stylex.create({
  header: {
    position: stylex.firstThatWorks('sticky', '-webkit-sticky', 'fixed'),
  },
});

キーフレーム アニメーション

stylex.keyframes()関数を使用してキーフレームアニメーションを定義できます。

import * as stylex from '@stylexjs/stylex';

const fadeIn = stylex.keyframes({
  from: {opacity: 0},
  to: {opacity: 1},
});

const styles = stylex.create({
  base: {
    animationName: fadeIn,
    animationDuration: '1s',
  },
});

動的スタイル

控えめに使用

動的スタイルは高度な機能であり、控えめに使用する必要があります。ほとんどのユースケースでは、条件付きスタイルで十分です。

StyleXはすべてのスタイルをコンパイル時に生成します。つまり、事前にすべてのスタイルを知っている必要があります。しかし、ランタイムになるまで何が必要かわからない場合があります。

このような状況では、スタイルをオブジェクトではなく関数として定義し、必要なスタイルの動的なコンポーネントをパラメーターとして渡すことができます。

注意：関数本体は必ずオブジェクトリテラルである必要があります。複数のステートメントを持つ関数本体を使用することはできません。

import * as stylex from '@stylexjs/stylex';

const styles = stylex.create({
  // Function arguments must be simple identifiers
  // -- No destructuring or default values
  bar: (height) => ({
    height,
    // The function body must be an object literal
    // -- { return {} } is not allowed
  }),
});

function MyComponent() {
  // The value of `height` cannot be known at compile time.
  const [height, setHeight] = useState(10);

  return <div {...stylex.props(styles.bar(height))} />;
}

StyleXは、内部的に、CSS変数に依存する静的スタイルを生成し、その変数の値を実行時に設定します。これは、メディアクエリや疑似クラス内を含め、スタイルのどの部分も動的にできることを意味します。