vanilla-extract

vanilla-extract lets you write styles in TypeScript that compile to static CSS files at build time. It is zero-runtime, so no styling code runs in the browser.

You define classes, variables and themes in .css.ts files, and the build step generates the stylesheet from them. Themes use typed token contracts, so a mistyped variable name is caught by TypeScript before the page is built. The library supports selectors, pseudo-classes, media, feature and container queries, keyframes and global styles. Because TypeScript works as the preprocessor, you can use normal functions and imports to share styles between files.

• Styles written in TypeScript files
• Typed theme token contracts
• Media, feature and container queries
• Official webpack, esbuild, Vite and Next.js integrations
• Extendable with recipes and other libraries

TypeScript teams that want scoped styles without a runtime cost. Developers building themed design systems will find the token contracts useful for keeping every theme in step.

vanilla-extract is open source under the MIT license, so it is free to use. Build tool integration is required, so check the setup guide for your bundler before you start. Styles are fixed at build time, so the approach suits static themes better than values that change constantly in the browser.