What is vanilla-extract?

Vanilla-extract is a tool for writing CSS styles using TypeScript, a typed variant of JavaScript. Instead of writing styles in separate .css files with their own syntax, you write them in TypeScript files, and the tool converts them into regular CSS files when you build your project. The key point is that no JavaScript runs in the browser to apply the styles: everything is converted to plain static CSS before your site ships, so there is no performance cost at page load time. The problem it addresses is that standard CSS has no scope: a class name you define in one part of a project can accidentally affect elements in another part. Vanilla-extract generates unique class names automatically, so styles stay isolated to the component or module they belong to. It also supports CSS Variables (sometimes called custom properties), which allow you to define shared values like colors or spacing in one place and reuse them throughout your styles, but with the same scoping guarantees. A theme system is built in, allowing you to define multiple visual themes (for example, a light mode and a dark mode) and apply them without any global style collisions. The library also provides type checking on your style values, so if you mistype a color name or use an invalid CSS property, TypeScript will catch it before the code runs. Vanilla-extract works with any frontend framework or with no framework at all. There is an optional companion package called Sprinkles for teams who want a more structured, utility-based approach to applying styles. The project is released under the MIT license and was created with support from the Australian job-search company SEEK.