facebook/stylex

これは何？

主な機能

• 01stylex.createを使って、JavaScriptオブジェクトとしてスタイルを定義できます。
• 02stylex.propsを通じて、要素にスタイルを適用できます。
• 03Babelプラグインと、PostCSS・Rollup・ESLintとの連携機能を提供します。
• 04ビルドワークフロー向けのCLIを含みます。
• 05公式ドキュメントサイトを提供します。

ユースケース

• ReactなどのJavaScript UIで、コンポーネントと同じ場所にスコープ付きスタイルを定義して適用する。
• RollupやPostCSSを使い、既存のフロントエンドプロジェクトにビルド時のスタイリングパイプラインを追加する。
• StyleX ESLintプラグインで、コードベース全体のスタイル規約を徹底する。

クイックスタート

1. 1

   npmからStyleXパッケージをインストールする

   npm install @stylexjs/stylex
2. 2

   stylex.createでスタイルを定義し、stylex.propsで適用する

3. 3

   ビルドツールのセットアップについてはドキュメントサイトを確認する

使う前に知っておきたいこと

• !READMEにはスタイルをコンパイルするためのセットアップ手順が記載されていないため、ビルドツールとの連携は別途設定する必要があります。
• !これは開発用のmonorepoであるため、コントリビュートするにはyarn workspace全体をインストールする必要があります。

トピック

よくある質問

stylex とは？

Facebook製のJavaScriptスタイリングライブラリ。UI向けに最適化されたアトミックCSSを定義できます。 StyleXは、UIのスタイルを定義するためのJavaScriptライブラリです。開発者はstylex.createでスタイルを宣言し、stylex.propsで適用します。stylex.propsは、要素に付与するクラス名を返します。

stylex は無料で使えますか？ライセンスは？

stylex は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

stylex は今もメンテナンスされていますか？

活発にメンテナンス中。stylex の最終コミットは 2026年10月21日 です。

stylex は何に使えますか？

ReactなどのJavaScript UIで、コンポーネントと同じ場所にスコープ付きスタイルを定義して適用する。 RollupやPostCSSを使い、既存のフロントエンドプロジェクトにビルド時のスタイリングパイプラインを追加する。 StyleX ESLintプラグインで、コードベース全体のスタイル規約を徹底する。

stylex のインストール方法は？

npmからStyleXパッケージをインストールする: npm install @stylexjs/stylex stylex.createでスタイルを定義し、stylex.propsで適用する ビルドツールのセットアップについてはドキュメントサイトを確認する

stylex はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/facebook/stylex