StyleX を発表できることを大変嬉しく思います。 StyleX は、意欲的なアプリケーションのための、表現力豊かで、決定論的で、信頼性が高く、スケーラブルなスタイリングシステムです。 これまでのスタイリングライブラリの優れたアイデアを取り入れ、使い慣れたものと独自の新しさを兼ね備えたものを作り上げました。
StyleXとは？
StyleX は、CSS-in-JS ライブラリの開発者エクスペリエンスを取り入れ、コンパイル時ツールを使用して、静的 CSS のパフォーマンスとスケーラビリティを橋渡しします。 しかし、StyleX は単なるコンパイラベースの CSS-in-JS ライブラリではありません。 StyleX は、大規模なアプリケーション、再利用可能なコンポーネントライブラリ、および静的に型付けされたコードベースの要件を満たすように慎重に設計されています。
- StyleX は、CSS の表現力豊かなサブセットをサポートしています。 複雑なセレクタを避け、生成される CSS での特異性の競合を保証しません。
- StyleX は、スタイルを変換、整理、最適化して「アトミック」CSS クラス名にします。 別のユーティリティクラス名のライブラリを学習または管理する必要はありません。
- StyleX では、ファイルとコンポーネントの境界を越えてスタイルをマージできるため、ユーザーカスタマイズを可能にするコンポーネントライブラリに最適です。
- StyleX は完全に型付けされており、型ユーティリティを提供して、コンポーネントが受け入れることができるプロパティと値をき細かく制御できます。
StyleXの利点は何ですか？
高速
StyleX は、コンパイル時と実行時の両方で高速になるように設計されています。 Babel 変換は、ビルドを大幅に遅くしません。
実行時に、StyleX は JavaScript を使用して実行時にスタイルを挿入する際のコストを完全に回避し、必要に応じてクラス名文字列を効率的に組み合わせる以上のことはほとんど行いません。 また、生成される CSS はサイズが最適化されているため、最大規模の Web サイトのスタイルでもブラウザで迅速に解析できます。
スケーラブル
StyleX は、Meta のような非常に大規模なコードベースにスケーリングできるように設計されています。 Babel プラグインは、アトミックビルドとファイルレベルのキャッシュを活用することで、コンパイル時に数千のコンポーネントのスタイル処理を処理できます。 また、StyleX はスタイルをカプセル化するように設計されているため、新しいコンポーネントを個別に開発し、他のコンポーネント内で使用されたときに予測どおりにレンダリングされることを期待できます。
アトミック CSS クラス名を生成することにより、StyleX は CSS バンドルのサイズを最小限に抑えるのに役立ちます。 アプリケーション内のコンポーネントの数が増加するにつれて、CSS バンドルのサイズは横ばい状態になります。 これにより、開発者は CSS ファイルを手動で最適化または遅延ロードする必要がなくなります。
予測可能
StyleX は、CSS セレクタの特異性を自動的に管理して、生成されたルール間に競合がないことを保証します。 StyleX は、開発者にスタイルを確実に適用するシステムを提供し、「最後に適用されたスタイルが常に優先される」ことを保証します。
構成可能
StyleX スタイルは簡単に構成できます。 複数のローカルスタイルを条件付きで適用できるだけでなく、ファイルやコンポーネント間でスタイルを渡すこともできます。 スタイルは常に予測可能な結果でマージされます。
タイプセーフ
TypeScript または Flow タイプを使用して、コンポーネントが受け入れるスタイルを制限できます。 すべてのスタイルプロパティと変数は完全に型付けされています。
コロケーション
StyleX は、それらを使用するコンポーネントと同じファイルにスタイルを作成することを許可し、推奨しています。 このコロケーションは、スタイルを長期的に読みやすく保守しやすくするのに役立ちます。 StyleX は、静的分析とビルド時ツールを使用して、コンポーネント間のスタイルの重複を排除し、未使用のスタイルを削除できます。
テスト可能
StyleX は、機能的なアトミッククラス名の代わりにデバッグクラス名を出力するように構成できます。 これは、マイナーな設計変更に応じて頻繁に変更されないスナップショットを生成するために使用できます。
StyleXはどのように機能しますか？
StyleX は、連携して動作するツールの集合体です。
- Babel プラグイン
- 小さなランタイムライブラリ
- ESLint プラグイン
- バンドラーとフレームワークとの統合の増加。
StyleX の最も重要な部分は Babel プラグインです。 ソースコード内で定義されているすべてのスタイルを見つけて抽出し、コンパイル時にアトミッククラス名に変換します。 ヘルパー関数は、収集されたスタイルの重複を排除し、ソートし、CSS ファイルに書き込みます。 これらのツールは、バンドラープラグインを実装するために使用されます。
StyleX の使用を可能な限り自然なものにするために、StyleX はローカル定数と式を使用してスタイルを定義するためのさまざまな静的パターンをサポートしています。 さらに、可能な限り最高のパフォーマンスを提供するために、Babel プラグインは可能な場合は最終的なクラス名を事前に計算して、ランタイムコスト (クラス名のマージも含む) を特定のファイルから削除します。 コンポーネントが同じファイル内で静的にスタイルを定義および使用している場合、ランタイムコストは**ゼロ**になります。
スタイルの合成などのより強力なパターンを使用する場合、小さなランタイムがクラス名のオブジェクトを動的にマージします。 このランタイムは非常に高速になるように最適化されており、結果はメモ化されます。
StyleXの起源
以前の Facebook の Web サイトでは、CSS モジュールに似たものを使用しており、CSS-in-JS の最初のアイデアのきっかけとなったさまざまな問題がありました。 facebook.com への平均的な訪問者は、数十メガバイトの CSS をダウンロードしていました。 その多くは未使用です。 初期ロードを最適化するために、CSS を遅延ロードしていましたが、これは更新 (または「インタラクションから次のペイントまで」) の時間が遅くなることにつながりました。 複雑なセレクタの使用は、競合または「特異性戦争」につながりました。 エンジニアはしばしば `!important` またはより複雑なセレクタを使用して問題を解決していましたが、システム全体が次第に悪化していました。
数年前に React を使用して facebook.com を根本から再構築したとき、私たちはより良いものが必要であることを知り、StyleX を構築しました。
StyleX はスケーリングするように設計されており、その設計は何年にもわたる使用経験の中で証明されています。 パフォーマンスやスケーラビリティを低下させることなく StyleX に新しい機能を追加し、StyleX をより使いやすくしました。
StyleX の使用は、Meta におけるスケーラビリティと表現力の両方において大きな改善をもたらしました。 `facebook.com` では、CSS バンドルを数十メガバイトの遅延ロード CSS から数百キロバイトの単一バンドルに削減することができました。
私たちは、Web 上の React 開発者のスタイリングニーズを満たすためだけでなく、Web とネイティブの両方で React のスタイリングを統合するために、StyleX を作成しました。
Meta は StyleX をどのように使用していますか？
StyleX は、Meta 内のすべての Web サーフェスでコンポーネントをスタイル設定するための推奨される方法になりました。 StyleX は、Facebook、WhatsApp、Instagram、Workplace、Threads など、Meta のすべての主要な外部および内部製品の React コンポーネントのスタイル設定に使用されます。 これは、コンポーネントを作成する方法を変え、チームが以前にスタイル付きコンポーネントをカプセル化およびスケーリングできないという問題を解決しました。
Meta のエンジニアが StyleX を使用して静的および動的の両方のスタイルを作成できるように、StyleX の元の機能を拡張しました。 私たちのチームは StyleX テーマ API を使用して、「ユニバーサル」コンポーネントを開発しています。これらのコンポーネントは、異なる Meta 製品内で使用される異なるデザインシステムの外観に合わせてテーマが設定されています。 また、StyleX が React Native のスタイリングシステムによって導入されたカプセル化の原則と一致しているため、クロスプラットフォームスタイリングのサポートを徐々に拡大しています。
オープンソース
私たちがオープンソース化しているのは、社内で実際に使用しているものと全く同じです。私たちはまずGitHubで開発を行い、それをMetaに同期しています。StyleXは元々Meta社内でMetaのために開発されましたが、Meta固有のものではありません。
とはいえ、これはまだ始まりに過ぎません。コミュニティと協力して、さらなる最適化と統合を進めていくことを楽しみにしています。
私たちがStyleXを使っているのと同じくらい、皆さんにも気に入っていただければ幸いです。 ❤️