vanilla-extract

vanilla-extract lets you write CSS using TypeScript — styles, themes, and design-token contracts are all plain TypeScript modules (.css.ts files) that get statically evaluated and compiled to real .css files at build time. Because styles are TypeScript, you get autocomplete, type-checked design-token references, and compile-time errors for typos, while shipping zero runtime CSS-in-JS overhead to the browser — the output is just static CSS.

@vanilla-extract/css is the core package providing the low-level primitives (style, createTheme, createThemeContract, globalStyle, keyframes, fontFace, layers, and container queries); companion packages in the same monorepo (@vanilla-extract/sprinkles for atomic utility styles, @vanilla-extract/recipes for style variants, @vanilla-extract/dynamic for runtime theme switching) build on top of it, and bundler plugins exist for webpack, Vite, esbuild, Rollup, Parcel, and Next.js/Turbopack.

What You Get

• style() and globalStyle() for defining locally-scoped or global CSS rules directly in TypeScript with full type inference
• createTheme()/createThemeContract() for defining type-safe design-token themes that are swappable at build or runtime
• keyframes() and fontFace() for animations and custom font declarations, compiled the same way as regular styles
• Native CSS layer (@layer) and container-query support built into the core API
• First-class bundler integrations — webpack, Vite, esbuild, Rollup, Parcel, and Next.js/Turbopack plugins — that handle the .css.ts build step

Common Use Cases

• Replacing a runtime CSS-in-JS library (styled-components, Emotion) with a zero-runtime alternative for better production performance
• Building a themeable design system with compile-time-checked design tokens shared across an app via createThemeContract
• Adding type-safe, co-located styles to a React/Vue/Svelte component without a separate CSS/SCSS file and without giving up static analysis
• Migrating a large app to static CSS output while keeping developer ergonomics closer to CSS-in-JS than hand-written stylesheets

Under The Hood

Architecture - The monorepo (packages/) separates the core compiler (packages/compiler) from the public API (packages/css, whose src/ contains style.ts, theme.ts, vars.ts, recipe.ts, layer.ts, and a transformCss.ts/adapter.ts pair that bridges evaluated style objects into actual CSS text). At build time, a .css.ts file is executed in a special Node/bundler context; every call to style()/createTheme()/etc. registers a CSS rule against a fileScope-tracked registry rather than returning real CSS immediately, and the bundler plugin (webpack/Vite/esbuild/etc., in their own packages/*-plugin directories) later extracts that registry into an actual .css asset and rewrites the original module’s exports to reference the generated class names. Tech Stack - Nearly entirely TypeScript (87% of the repo) with a small CSS/JS footprint; the css package’s direct dependencies include @emotion/hash (deterministic class-name hashing), css-what and media-query-parser (selector/media-query parsing for validation), lru-cache, and the sibling @vanilla-extract/private package for shared internals — a pnpm workspace ties all ~17 packages together. Code Quality - Nearly every core module has a co-located .test.ts file (vars.test.ts, layer.test.ts, transformCss.test.ts, identifier.test.ts, etc.), run via vitest (per vitest.config.ts), plus a tests/ and fixtures/ directory at the repo root for broader integration coverage across bundler plugins, and Playwright config for end-to-end browser tests. API Design - The core primitives read like plain TypeScript function calls (export const button = style({ padding: 10 })) rather than a templating DSL, so consumers get real editor autocomplete/type errors on style properties; the tradeoff is that every consuming project must wire up a bundler plugin (one of six framework-specific packages) before .css.ts files will actually compile, which is a heavier setup step than a runtime CSS-in-JS library that needs no build configuration at all.