Panda CSSにみる、ライブラリを直接importしないCSS in JSだからできること

k8o

CSS-in-JSの主流は、Emotionのように実行時にスタイルを注入する方式から、StyleXやvanilla-extractのようにビルド時にCSSを出力する方式へと移り変わってきました。

私が担当するプロダクトでは、Next.jsのApp Routerへの移行をきっかけに、EmotionからPanda CSSに乗り換えました。Panda CSSは、使うときにimportするのがライブラリ自身ではなく、設定から生成されたコードだという点が特徴です。

本セッションでは、StyleXやvanilla-extractと比べながら、生成されたコードをimportするこの作りが何をもたらすのかを解説します。 デザイントークン以外の値を禁止する型チェックを一部のプロパティだけ緩めるプラグインを例に、この作りだからこそできることを、その辛さも含め紹介します。