2022/01/21 に公開2899 views
@potato4d が @spring_raining に、最近の CSS-in-JS のライブラリや、その中で注目を集めている vanilla-extract について聞いてみました。
CSSフレームワークのトレンドと2021年に感じたこと
- State of CSSの結果について
- https://2021.stateofcss.com/en-US/technologies/css-in-js/
- https://risingstars.js.org/2021/en#section-css-in-js
- 2020年に追加されたライブラリ
- Styled system https://styled-system.com/
- Stitches https://stitches.dev/
- Linaria https://linaria.dev/
- Astroturf https://4catalyzer.github.io/astroturf/
- Fela https://fela.js.org/
- 2021年に追加されたライブラリ
- vanilla-extract https://vanilla-extract.style/
- Windi CSS https://windicss.org/
- Theme UI https://theme-ui.com/
- Twin https://github.com/ben-rogerson/twin.macro
- Zero-runtimeの台頭
- Stitches/Linaria/Astroturf/vanilla-extract/Twinはこの仕組みを採用
- StitchesはNear-Zero Runtime (一部のスタイルはRuntime)
- プリプロセッサの仕組みを持つTailwind CSSの普及で、ランタイムの大きなCSS frameworkのデメリットに注目されるようになった？
- ビルドタイムで必要なCSSを取り出す
- 実際のコードを実行せずにどのスタイルが必要かを把握する必要が生まれた
- Stitches/Linaria/Astroturf/vanilla-extract/Twinはこの仕組みを採用
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/csshttps://vanilla-extract.style/documentation/styling-api/@vanilla-extract/sprinkles: Tailwind, Styled systemのようなユーティリティクラスを提供する https://vanilla-extract.style/documentation/sprinkles-api/@vanilla-extract/recipes: Stitchesのようなvariantを持つスタイルを生成する https://vanilla-extract.style/documentation/recipes-api/
- Vanilla-extractのZero-runtimeの戦略
- 本体とは別にCSSを出力するエントリーポイントを用意して、同じビルドパイプラインを使って出力
*.css.tsという名前のファイルをCSSとしてexportする仕組み- CSSの型情報はCSSTypeを使用 https://github.com/frenic/csstype
- CSSのビルドの仕組みがそのまま露出しているので、カスタマイズなどがやりやすそう
Refs
- LINE 新卒採用 2023
- キャリア採用はこちらから
- BGM&SE
- 魔王魂/騒音のない世界/OtoLogic