本文へスキップ
MameTechNews
フロントエンド

Panda CSS 2.0、コンパイラをRustへ置換 抽出は最大37倍

## POINTS

  • 書き味は維持したままエンジンを置換。抽出は15〜37倍、約2万9000ルールのstaticCssは25.7秒から約0.3秒。
  • Node 22未満やCommonJSの設定は、そのままだと2.0へ載らない。scrollbarWidthの値の型も変わる。
  • panda libとdesignSystemにより、利用側がライブラリのソースを毎回抽出し直す構成を減らせる。

Panda CSSは9月29日、2.0を公開した。css()、レシピ、トークン、JSXのスタイルプロパティは維持したまま、コンパイラをTypeScriptのts-morphからRustとOxcへ替えた。ネイティブ版はCLIとVite、PostCSS向け、約490KB(gzip)のWebAssembly版はブラウザ向けだ。

公開された比較では、抽出のコールド実行が15〜37倍。ウォッチ時の再パースは1ファイルあたり約650マイクロ秒から2マイクロ秒未満で、およそ360〜390倍。あるNext.jsプロジェクトではパースが762ミリ秒から31ミリ秒になった。約2万9000ルールのstaticCssは25.7秒から約0.3秒、およそ85倍。生成型のインスタンス化は約99%減り、tscのメモリは約21〜25%、型検査時間は40〜60%減った。

panda lib でデザインシステムをパッケージ化し、利用側は designSystem にそのパッケージを指定する。利用アプリがライブラリのソースを毎回抽出し直す前提を減らせる。viewTransition() や、モダン値とフォールバックを順に書く firstThatWorks() も加わった。CSS変数は全要素へ空の初期値を撒くのをやめ、使ったものだけ @property で登録する。

壊れやすい点は、ESM専用かつNode 22以降になったこと、scrollbarWidth がサイズトークンではなく auto、thin、none になったこと、globalPositionTry が theme.positionTry へ移ったことだ。APIが同じに見えても、実行環境とトークンの型が先に壊れる。モノレポでは速度より、抽出の責務をパッケージ側へ寄せられるかの方が効く。