vanilla-extract — Zero-runtime Stylesheets-in-TypeScript.

vanilla-extract is a tool that allows you to write styles in TypeScript, which are then compiled into static CSS files during build time. This approach ensures type safety, locally scoped styles, and theming capabilities without adding runtime overhead.

You can define styles, themes, variables, and media queries directly in TypeScript, leveraging the full power of the language. It supports features like pseudo-classes, keyframes, font-face, and global styles, making it suitable for large-scale applications.

vanilla-extract is framework-agnostic, with official integrations for webpack, esbuild, Vite, and Next.js, allowing seamless incorporation into various build setups. Its design promotes maintainability and scalability, enabling developers to organize styles efficiently and create multiple themes with type-safe token contracts.

By generating real, static CSS files, vanilla-extract offers a performant solution that avoids runtime CSS processing, ensuring fast load times and optimal user experience. This makes it ideal for projects that require maintainable, scalable, and performant styling solutions.