はじめに

2021年にもともと発表はされていた、meta社製のCSS-in-JS「StyleX」が2023年12月5日（現地時間）にオープンソースかされてリリースされました。　
特にCSS-in-JS派、CSS modules派といった●●派、は個人的にはないのですが、
BootstrapやTailwindCSSのTailwindCSSが当たり前の今、そして、Reactが主流になっている今を受けて、
Next.jsを使用している身としては今すぐ使わないまでも概要は把握しておかねば、ということで調べました。

■StyleX | 公式サイト
https://stylexjs.com/

■公式のデモアプリはこちら（GitHub）
https://github.com/facebook/stylex/tree/main/apps

主な特徴

「StyleX」の主な特徴は以下です。
FacebookやInstagramで実際に使用されているそうです。

■速い
JavaScriptを最適化された1つのCSSファイルに変換することで、ウェブサイトの読み込みを速くし、動作がスムーズに。

■スケーラブル
たくさんのコンポーネントを追加しても、ウェブサイトのサイズが大きくなりすぎないように設計されています。

■型安全（タイプセーフ）
TypeScriptやFlow（meta社が作った静的型付け言語）を使って、スタイルのエラーを未然に防げます。
使っていないスタイル定義があったり、誤字などがあったりするとアラート表示などしてくれるようです。

また、ドキュメント内でアトミックCSSという単語が出てきますが、これはスタイルを小さな再利用可能な単位に分割するアプローチを取るCSSのことで、CSSクラスは単一のスタイルプロパティと値を表します。 例えば、padding: 8pxや、margin-left: 16pxなどの個々のスタイル１つ１つそれぞれが１つのクラスになります。
TailwindCSSに似てますね。同じ考えが元になっていて、呼び方が異なるようです。

インストール

■インストール | StyleX
https://stylexjs.com/docs/learn/installation/

今回はNext.jsで使います。公式ドキュメントに従って、.babelrec.jsとnext.config.jsを設定します。

npm install --save @stylexjs/stylex

npm install --save-dev @stylexjs/nextjs-plugin

使用方法

以下の３ステップで使用できます。

1.stylex.createを使ってスタイル定義

　https://stylexjs.com/docs/learn/styling-ui/defining-styles/

2.CSS変数を定義する場合はstylex.defineVarsを使用

　https://stylexjs.com/docs/learn/theming/defining-variables/

3.stylex.propsでCSSを使用

https://stylexjs.com/docs/learn/styling-ui/using-styles/

※型については以下を参照

https://stylexjs.com/docs/learn/static-types/

おわりに

恐らく今後もっとアップデートされて変わっていくと思いますので、詳しくは公式ドキュメントをご確認ください。
まだ実務では使えないと思いますが、引き続き動向をウォッチしていきたいと思います！

それではまた。

HTNCode