2022/01/21 に公開 1419 views

このエピソードについて

@potato4d が @spring_raining に、最近の CSS-in-JS のライブラリや、その中で注目を集めている vanilla-extract について聞いてみました。

CSSフレームワークのトレンドと2021年に感じたこと

Vanilla-extract

  • 使った経緯
    • Chakra UIを使っている個人開発プロダクトで、Zero-runtimeなCSSライブラリを導入したかった
    • Next.js+Chakra UIで実装しているWebアプリケーションとしてのパッケージの上に、プレーンなReact componentのパッケージが存在する
    • Webアプリケーション側からReact component側のスタイルを制御できるようにしたい
  • Type-safeでZero-runtimeなCSS-in-JSライブラリ
  • コアとなるライブラリ @vanilla-extract/css の上に、より書きやすくするための周辺ライブラリを組み合わせられる
  • Vanilla-extractのZero-runtimeの戦略
    • 本体とは別にCSSを出力するエントリーポイントを用意して、同じビルドパイプラインを使って出力
    • *.css.ts という名前のファイルをCSSとしてexportする仕組み
    • CSSの型情報はCSSTypeを使用 https://github.com/frenic/csstype
  • CSSのビルドの仕組みがそのまま露出しているので、カスタマイズなどがやりやすそう

Refs