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を取り出す
    • 実際のコードを実行せずにどのスタイルが必要かを把握する必要が生まれた

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/css https://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
  • https://linecorp.com/ja/career/newgrads/engineering/
• キャリア採用はこちらから
  • https://linecorp.com/ja/career/position/475
• BGM&SE
  • 魔王魂/騒音のない世界/OtoLogic