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を遅延ロードしていましたが、その結果、更新（または「Interaction to Next Paint」）時間が遅くなりました。複雑なセレクターを使用すると、競合や「特異性戦争」が発生しました。エンジニアは、問題を解決するために!importantまたはより複雑なセレクターを使用することが多く、システム全体が徐々に悪化しました。
数年前、Reactを使用してfacebook.comをゼロから再構築していたとき、何かより良いものが必要であることがわかり、StyleXを構築しました。
StyleXは拡張できるように設計されており、その設計は長年の使用経験の中で実証されています。StyleXの使いやすさを向上させながら、パフォーマンスやスケーラビリティを低下させることなく、StyleXに新機能を追加しました。
Metaでは、StyleXを使用することで、スケーラビリティと表現力の両方が大幅に向上しました。facebook.comでは、CSSバンドルを数十メガバイトの遅延ロードされたCSSから、数百キロバイトの単一バンドルに削減することができました。
StyleXを作成したのは、Web上のReact開発者のスタイリングニーズを満たすだけでなく、Webとネイティブの両方でReactのスタイリングを統合するためでもあります。
MetaはどのようにStyleXを使用していますか？
StyleXは、Meta内のすべてのWebサーフェスのコンポーネントをスタイリングするための推奨される方法になりました。StyleXは、Facebook、WhatsApp、Instagram、Workplace、Threadsなど、Metaの主要な外部および内部製品すべてのReactコンポーネントのスタイリングに使用されています。コンポーネントの作成方法を変え、以前はチームが抱えていた、スタイル付きコンポーネントをカプセル化および拡張できないという問題を解決しました。
Metaのエンジニアが静的スタイルと動的スタイルの両方を作成できるように、StyleXの元の機能を拡張しました。チームは、StyleXテーマAPIを使用して、さまざまなMeta製品内で使用されるさまざまなデザインシステムの外観にするテーマ付き「ユニバーサル」コンポーネントを開発しています。また、React Nativeのスタイリングシステムによって導入されたカプセル化の原則に沿っているため、クロスプラットフォームスタイリングのサポートを徐々に拡大しています。
オープンソース
私たちがオープンソース化しているのは、私たちが内部で使用しているものです。私たちは最初にGithubで開発し、Metaに同期して戻します。StyleXはもともとMetaでMetaのために作成されましたが、Meta固有のものではありません。
とはいえ、これはまだ始まりにすぎません。私たちは、コミュニティと協力して、さらなる最適化と統合を導入することを楽しみにしています。
私たちと同じようにStyleXの使用を気に入ってくれることを願っています。❤️