Vanilla Extract

Definition

Vanilla Extract is a zero-runtime styling library that lets developers write CSS using TypeScript, with full type safety and IDE autocomplete, and compiles those definitions into static .css files at build time rather than generating styles in the browser.

Overview

Vanilla Extract addresses the same core tension as several other build-time CSS-in-JS tools: developers like authoring styles alongside their component code in TypeScript, with variables, functions, and type checking available, but shipping a runtime style-generation library to the browser adds unnecessary JavaScript execution cost. Vanilla Extract's approach is to treat `.css.ts` files as a build-time-only artifact: styles are defined using functions like `style()`, `styleVariants()`, and `createTheme()` inside files with a `.css.ts` extension, and a build plugin extracts and compiles these into plain, static CSS files during the build, so the shipped application includes ordinary CSS with zero styling-related JavaScript at runtime. Because styles are plain TypeScript, they get full type-checking, autocomplete, and refactoring support from the TypeScript compiler and IDE — a typo in a theme token name is a compile error, not a silent runtime bug or a missing style discovered visually in the browser. Vanilla Extract's theming system, built around `createTheme()` and `createThemeContract()`, generates CSS custom properties under the hood, so runtime theme switching (such as light/dark mode) still works with zero JavaScript overhead, since it's implemented as a CSS variable swap rather than regenerated styles. The library also ships companion packages that extend its core capabilities: `@vanilla-extract/recipes` provides a variant API similar to class-variance-authority for defining component style variants with typed props, and `@vanilla-extract/sprinkles` generates a constrained, Tailwind-like atomic utility system from a defined set of allowed style properties and values. Vanilla Extract integrates with Vite, webpack, esbuild, and Next.js through build plugins, and works with any UI framework since its output is just CSS classes applied to elements however the consuming framework wants. It's most commonly chosen by teams that want CSS-in-JS's developer ergonomics and TypeScript safety without any runtime styling cost, particularly for design systems where type-safe design tokens catch mistakes before they ship.

Key Features

• Zero-runtime: styles compile to static CSS files at build time, no JavaScript styling engine shipped
• Styles authored in TypeScript (.css.ts files) with full type-checking and autocomplete
• createTheme() and createThemeContract() generate CSS custom properties for theming
• Companion @vanilla-extract/recipes package for typed component style variants
• Companion @vanilla-extract/sprinkles package for a constrained, atomic utility system
• Zero-JavaScript theme switching implemented via CSS custom property swaps
• Framework-agnostic output — works with React, Vue, Svelte, or plain HTML
• Build plugin integrations for Vite, webpack, esbuild, and Next.js

Use Cases

Alternatives

History

vanilla-extract is a zero-runtime "stylesheets-in-TypeScript" library: you author type-safe, locally scoped class names, CSS variables, and themes using TypeScript, and it generates static CSS at build time with no runtime cost. It was open-sourced by SEEK (as seek-oss/vanilla-extract) around 2021, with Mark Dalgleish among its creators and most visible advocates. Often described as "CSS Modules in TypeScript," it adds scoped CSS variables, simultaneous theming, and full type inference over a design system. By moving all style computation to build time, vanilla-extract offered an answer to the runtime-performance concerns of many CSS-in-JS libraries while keeping a strong typed developer experience.

Frequently Asked Questions

Related in Web