Vanilla-extract is a zero-runtime CSS-in-TypeScript tool that generates static stylesheets at build time.
The tool addresses the need to write type-safe, scoped styles without shipping JavaScript to the browser. It works by letting developers write styles in `.css.ts` files using TypeScript, then evaluates those files at build time to produce static CSS output. Class names, CSS Variables, keyframes, and font-face rules are all locally scoped by default. The approach treats TypeScript as a preprocessor similar to Sass or Less, but with the added benefit of full type safety through CSSType integration and the ability to use TypeScript's computational power to generate styles.
Vanilla-extract suits projects where developers want to avoid runtime CSS-in-JS overhead while maintaining type safety and local scoping. It works with any front-end framework or without one, making it framework-agnostic. The tool provides a high-level theme system supporting simultaneous themes without global state, and includes utilities for generating variable-based calc expressions. For teams seeking higher-level abstractions, the project offers Sprinkles, an official zero-runtime atomic CSS framework built on top of vanilla-extract. An optional runtime version is available for development and testing, and a dynamic runtime theming API exists for cases requiring it.
The project maintains active engagement with its community through regular issue responses and pull request reviews. Development follows a structured approach with clear contribution guidelines and documentation. The codebase receives consistent updates addressing user feedback and expanding capabilities. The maintainers demonstrate responsiveness to adoption questions and provide comprehensive setup guidance across multiple build tools and frameworks.
