Vanilla Extract Zero-Runtime CSS

Vanilla Extract is a zero-runtime CSS-in-TypeScript styling solution that uses TypeScript as a CSS preprocessor, generating static stylesheet files at build time with full type safety for class names, CSS variables, theme tokens, and style values. The library produces real CSS files rather than runtime-injected styles, eliminating the JavaScript bundle overhead and runtime performance cost of dynamic CSS engines while maintaining the developer experience of colocated styles. The core style function creates locally scoped class names by compiling each call into a uniquely hashed CSS class, with automatic locality enforcement preventing style leakage. The full power of native CSS is preserved: media queries, feature queries, container queries, pseudo-classes and pseudo-elements, descendant and sibling selectors, keyframe animations, font-face declarations, cascade layers, and global styles are all supported through dedicated API functions. The theming system uses createTheme and createThemeContract to define type-safe token contracts that guarantee compile-time verification of every token reference. Multiple themes can coexist with different token values mapped to the same contract, enabling runtime theme switching through CSS class application. CSS custom properties are first-class citizens through createVar and fallbackVar, supporting patterns like dynamic shadow colors and responsive spacing scales. Framework integrations are officially provided for Webpack, esbuild, Vite, Next.js, Remix, Rollup, Gatsby, Astro, and Parcel. Extension packages include Sprinkles for constrained utility class APIs similar to Tailwind, Recipes for multi-variant component styles, and Dynamic for runtime-controllable styles. With over 10 thousand GitHub stars, the library is used at Khan Academy and SEEK.