StyleX の紹介

StyleX は、ウェブアプリのスタイル設定のためのシンプルで使いやすい JavaScript 構文とコンパイラです。

StyleX は、インラインスタイルと静的 CSS の両方の長所を組み合わせ、短所を回避します。スタイルの定義と使用には、コンポーネント内のローカルな知識のみが必要であり、特異性の問題を回避しながら、メディアクエリなどの機能を保持します。StyleX は、手作業で作成および維持できるものよりも優れた、衝突のないアトミック CSS を使用して最適化されたスタイルを構築します。

概要

スケーラビリティ

アトミック CSS で CSS 出力を最小限に抑えます。
コンポーネントの数が増えても、CSS のサイズは頭打ちになります。
成長するコードベース内でも、スタイルは可読性と保守性を維持します。

予測可能性

要素のクラス名は、その要素自体のみを直接スタイル設定できます。
特異性の問題はありません。
「最後に適用されたスタイルが常に優先されます！」

コンポーザビリティ

条件付きでスタイルを適用します。
コンポーネントとファイルの境界を越えて、任意のスタイルをマージおよび合成します。
ローカル定数と式を使用して、スタイルを DRY に保ちます。または、パフォーマンスを気にすることなくスタイルを繰り返します。

高速性

ランタイムでのスタイルの挿入はありません。
すべてのスタイルは、コンパイル時に静的 CSS ファイルにバンドルされます。
クラス名のマージのための最適化されたランタイム。

型安全性

型安全な API。
型安全なスタイル。
型安全なテーマ。

StyleX の使用方法

コンパイラの構成

import plugin from '@stylexjs/rollup-plugin';

const config = () => ({
  plugins: [
    plugin({ ...options })
  ]
})

export default config;

スタイルの定義

スタイルはオブジェクト構文と `create()` API を使用して定義されます。

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

const styles = stylex.create({
  root: {
    width: '100%',
    maxWidth: 800,
    minHeight: 40,
  },
});

追加のキーと `create()` の追加呼び出しを使用することで、任意の数のルールを作成できます。

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

const styles = stylex.create({
  root: {
    width: '100%',
    maxWidth: 800,
    minHeight: 40,
  },
  child: {
    backgroundColor: 'black',
    marginBlock: '1rem',
  },
});

const colorStyles = stylex.create({
  red: {
    backgroundColor: 'red',
    borderColor: 'darkred',
  },
  green: {
    backgroundColor: 'lightgreen',
    borderColor: 'darkgreen',
  },
});

function ReactDiv({ color, isActive, style }) { /* ... */ }

スタイルの使用

スタイルを使用するには、`props()` 関数に渡す必要があります。標準的な JavaScript 式を使用して、スタイルを組み合わせたり、条件付きで適用したりできます。

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

const styles = stylex.create({ ... });
const colorStyles = stylex.create({ ... });

function ReactDiv({ color, isActive, style }) {
  return <div {...stylex.props(
    styles.main,
    // apply styles conditionally
    isActive && styles.active,
    // choose a style variant based on a prop
    colorStyles[color],
    // styles passed as props
    style,
  )} />;
}

上記の例では JSX を使用しています。StyleX 自体はフレームワークに依存しません。同じコードは、`className` 文字列と `style` オブジェクトを受け入れる他のフレームワーク（`SolidJS`、`Preact`、`Qwik` など）でも機能します。

理想的なユースケース

StyleX は、幅広いプロジェクトでうまく機能します。ただし、特定のユースケースの課題を解決するために設計されました。

JavaScript での UI 作成

StyleX は CSS-in-JS ライブラリであるため、アプリの UI が JavaScript で作成されている場合に最も役立ちます。React、Preact、Solid、lit-html、または Angular などのフレームワークを使用するアプリケーションの場合、StyleX の使用は適切です。

Svelte や Vue などの一部のフレームワークは、ビルド時に JavaScript にコンパイルされるカスタムファイル形式を使用します。StyleX はこれらのフレームワークでも使用できますが、カスタム設定が必要になる場合があります。

大規模または成長しているプロジェクト

StyleX はあらゆる規模のプロジェクトでうまく機能しますが、大規模なアプリケーションで真価を発揮します。

StyleX はアトミックなクラス名にコンパイルされるため、プロジェクトの成長に伴って CSS バンドルのサイズが頭打ちになるという大きなパフォーマンス上の利点があります。

再利用可能なコンポーネント

StyleX の利点は、再利用可能な UI コンポーネントと併用した場合に最も大きくなります。

長年にわたり、スタイルが組み込まれているがカスタマイズが難しい「デザインシステム」コンポーネントと、完全にスタイルのない「ヘッドレス」コンポーネントのどちらかを選択する必要がありました。

StyleX は、開発者がデフォルトのスタイルを持ちながらカスタマイズ可能な UI コンポーネントを構築できるようにします。

さらに、この一貫性により、これらのコンポーネントを NPM に公開して共有できます。コンポーネントの利用者が StyleX も使用している限り、追加の設定なしでスタイルが正しくマージおよび合成されます。

StyleX の紹介

概要​

スケーラビリティ​

予測可能性​

コンポーザビリティ​

高速性​

型安全性​

StyleX の使用方法​

コンパイラの構成​

スタイルの定義​

スタイルの使用​

理想的なユースケース​

JavaScript での UI 作成​

大規模または成長しているプロジェクト​

再利用可能なコンポーネント​

概要