vanilla-extractとは？TypeScriptから静的CSSを生成するzero-runtime styling

ページ内ナビ

概要

vanilla-extractは、TypeScript/JavaScriptでstyleを定義し、build時に静的CSSを生成するstyling libraryです。.css.ts内のstyle codeはbuild時に評価され、locally scoped class、CSS Variables、theme、keyframesなどをtype-safeに定義できます。frontend frameworkには依存しません。

特徴と向いている用途

公式資料に基づく紹介・実機未検証 · 内容確認日：2026-09-30

主な特徴

TypeScriptからlocally scopedなCSS classを生成する

.css.tsでstyle()を呼び出すと、build時に静的CSSとlocally scoped class名が生成されます。style definition自体をapplicationのruntime bundleへ含めない構成を取れます。

出典：[2][4]

CSS Variablesとthemeを型付きobjectとして管理する

createThemeなどを使い、色・font・spacing等のdesign tokenをCSS Variablesへ割り当て、TypeScript側から参照できます。複数themeやscoped variableを標準CSSの仕組み上に構成できます。

出典：[2]

向いている用途

design systemやcomponent libraryでstyleと型を同期したい場合に向く

class名のscopeとdesign tokenをTypeScriptの型で管理し、React等のframeworkに依存せず静的CSSを出力したいapplicationやdesign systemに向きます。

出典：[2][4]

導入前の確認

bundler integrationが必須になる

core packageだけでは.css.tsを通常のbuildへ組み込めず、Vite・webpack・esbuild等のintegration設定が必要です。採用前に利用bundler向けpluginを確認します。

出典：[4]

Vite pluginをlibrary buildへ流用しない

公式Vite guideはVite pluginをweb application向けとし、library buildには非対応と明記しています。library公開ではRollup plugin等、用途に合うintegrationを選びます。確認時点のcore package metadataは1.21.2です。

出典：[5][3]

参考にした公式資料

[1]vanilla-extract repository(2026-09-30)
[2]vanilla-extract README(2026-09-30)
[3]@vanilla-extract/css package metadata(2026-09-30)
[4]vanilla-extract getting started(2026-09-30)
[5]vanilla-extract Vite integration(2026-09-30)
[6]vanilla-extract MIT license(2026-09-30)

編集部からの補足

styleとdesign tokenをTypeScriptの型で管理しつつruntime CSS-in-JSを避けたいprojectで特に有効です。ただしbuild tool integrationが設計の一部になるため、applicationとlibraryで同じpluginを使い回せるとは限りません。

3ステップで試す

1
coreとVite pluginを追加
core packageとVite integrationを追加します。別bundlerを使う場合は対応pluginへ置き換えます。
npm install @vanilla-extract/css npm install --save-dev @vanilla-extract/vite-plugin
2
Viteへpluginを設定
vite.config.jsまたはvite.config.tsへpluginを追加し、.css.tsをbuild時に処理できるようにします。
import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin'; export default { plugins: [vanillaExtractPlugin()] };
3
.css.tsでstyleを作成
生成されたclass名をcomponent側からimportして適用し、build後に静的CSSが出力されることを確認します。
import { style } from '@vanilla-extract/css'; export const container = style({ padding: 10 });

公式READMEで確認

成長

成長の推移 · 直近30日

10,435 Stars

推移データを蓄積中です。

Built with

TypeScript

カテゴリとタグ

GitHubデータ

GitHubのデータGitHubの詳細データを見る

GitHubで見る

Stars: 10,435
Forks: 359
Watchers: 34
Open Issues: 74
所有者種別: Organization
主要言語: TypeScript
ライセンス: MIT
リポジトリ最終更新: 2026/09/27