【Vanilla Extract】Vanilla Extract とは

Vanilla ExtractというCSS in JSのライブラリを知ったので調査した

vanilla-extract.style

Vanilla Extract はゼロランタイム CSS-in-JS

ゼロランタイムとは JS実行時に動的にCSS スタイルタグを生成し、それを読み取ってWeb ページに適用するのではなく、ビルド時に先に全てのCSSを作っておきそれを利用することでランタイムの無駄な時間を削減するというもの

例えば、Styled-Components はランタイムがあり、レンダリングに時間がかかる問題がある

www.infoq.com

Vanilla Extract 以外ではlinariaが有名

Linaria – zero-runtime CSS in JS library

Vanilla Extract のその他の特徴としては、型安全なトークンコントラクトを使用して、単一のグローバル テーマを作成するか、複数のテーマを作成することができる

また、現在は以下の環境で利用することができるので、それぞれの環境にあったプラグインを一緒に入れて始めることになる

• vite
• esbuild
• webpack
• next
• rollup
• gatsby

今回はNext.jsで試してみた

vanilla-extract.style

まずはインストール

$ npx create-react-app vanilla-extract-app  --template typescript
$ npm install @vanilla-extract/css @vanilla-extract/next-plugin

app.css.tx というファイルを作る

import { createTheme, style } from '@vanilla-extract/css';

export const [themeClass, vars] = createTheme({
  color: {
    brand: 'blue',
    white: '#fff'
  },
  space: {
    small: '4px',
    medium: '8px',
  }
});

export const container = style({
  backgroundColor: vars.color.brand,
  color: vars.color.white,
  padding: vars.space.medium,
  textAlign: 'center',
  fontSize: '40px'
});

利用したいコンポーネントで呼び出す

import { themeClass, container } from './app.css'

...
<div className={container}>Vanilla!!!</div>
...

軽く試してみた感じでは、難なく使えそう

linariaと比較してみたい

他参考

vanilla-extract を試す