stylexについて調べる

Next.js はスタートダッシュ切ってうまく実行できてそうな人がいたので自分は Vite の react-ts あたりを試す

https://zenn.dev/chapi/articles/4181d4637c4acb

この辺りはドキュメントにもある通り必須だったのでとりあえず導入

• @stylexjs/stylex
• @stylexjs/rollup-plugin
• @stylexjs/dev-runtime

詳しくは後で書くけど、上のパッケージだけだと動かないので babel プラグイン群も追加

• @babel/plugin-syntax-flow
• @babel/plugin-syntax-jsx
• @babel/plugin-syntax-typescript

次に Dev 環境で動作させるためにランタイムを差し込むんだけど、ドキュメント通りに書くと必須プロパティが足りなくて怒られるのでいくつか追加した。

/* more imports */
import inject from '@stylexjs/dev-runtime';

inject({
  classNamePrefix: 'x',
  dev: true,
  test: false,
  // ドキュメントに書いてあるのはここまで
  useRemForFontSize: false,
  runtimeInjection: true,
  styleResolution: "application-order",
});
/* more program */

ここまでやった後に rollup プラグイン経由だとstylexを適用するファイルの仕分けを自分でやらないといけないことに気づいた。
実際に実行すると元々プロジェクトで利用されている module CSS の CSS ファイルを見にいって落ちた。(Prod 環境で実行すると最初に見にいく index.html の時点で落ちる)

じゃあどうして Vite プラグインがないのかって話は絶賛議論中な模様。

https://github.com/facebook/stylex/issues/47

Meta 的には Vite に対応するなら Astro とか Remix みたいな Vite を含んだ複雑なユースケース(SSRとか)に対応させたいとのこと。
いつかやる感は出てるけどもうやってます感はあまりないので何時ごろでそうかは不明

ファイル解決くらい単純なケースなら rollup プラグインから拡張するといいよ的なことも言っていた。

https://github.com/facebook/stylex/issues/47#issuecomment-1842656628

サードパーティーで vite-plugin- を作ってくれている人がいた。(早い)

https://github.com/HorusGoul/vite-plugin-stylex

これなら Dev 環境に stylex のランタイムを差し込まなくてもプラグインがよしなに解決してくれる。もちろんファイルも。

最終的には、プロジェクト立ち上げから

1. @stylexjs/stylex と vite-plugin-stylex のインストール
2. vite.config.js の plugins に vite-plugin-stylex を追加

の2手順で動くようになった。

始めよう、stylex。

Vite プラグイン作ってくれてるっぽい PR があったの見落としていた。
ユニットテストと Dev 環境で CSS が生成される問題以外の基本的な部分はできているらしい？

https://github.com/facebook/stylex/pull/66