TL;DR
JavaScript や TypeScript のコードに CSS を直接書く CSS-in-JS のうち、ビルド時に実際の CSS ファイルを生成するもの。Compile-time CSS とも呼ばれる。
なぜ必要か
Runtime CSS-in-JS と比べて、次の利点がある。
- パフォーマンス: 実行中にスタイルを生成・挿入するオーバーヘッドがないので、ページの読み込みやレンダリングが速くなりうる
- 予測しやすさ: スタイルがビルド時に決まるので、実行中に予期しないスタイルの変更や副作用が起きにくい
- バンドルサイズ: ランタイムのコードが要らないので、バンドルサイズを減らせる
- SSR の簡素化: SSR のための追加の設定や手順が減る、またはなくなる
- 静的解析: ビルド時にスタイルが生成されるので、ツールや Linter がスタイルを静的に解析しやすい
- 環境の互換性: 実行中にスタイルを挿入しにくい環境や、それが推奨されない環境でも動く
例
Panda CSS、Goober、Linaria、vanilla-extract、Astroturf、Treat、Compiled などのライブラリがある。