styled-components から CSS Modules に移行後に、Panda CSSというゼロランタイムのcssライブラリを知った
なぜ Panda CSS なのかを読むと
Panda は、サーバーファースト時代における CSS-in-JS の課題を解決することを目的とした新しい CSS-in-JS エンジンで、TypeSafe と読みやすい記法で、CSS スタイルを作成、編成、管理するための機能を提供するとある
特徴は以下
- Static Analysis
ビルド時に静的解析を行い、任意の JavaScript フレームワークで使用できる CSS ファイルを生成 - PostCSS
解析後にPostCSSプラグインを使って、PostCSS をサポートするあらゆるフレームワークと互換性を持つようにする - Codegen
スタイルの作成に使用される軽量のランタイム JS コードを生成 - Type-Safety
csstypeと自動生成された型指定を組み合わせて、CSS プロパティとデザイン トークンにTypeSafeを提供 - Performance
パフォーマンスと読みやすさのために最適化されたアトミック CSS ファイルを生成 - Developer Experience
レシピ、パターン、デザイン トークン、JSX スタイル プロップなどの豊富な機能セットにより、優れた開発者エクスペリエンスを提供 - Modern CSS
カスケードレイヤー、css variables、:whereや:isといったモダンなセレクタも提供している
使い勝手が良いという噂を聞くので使ってみたい
