Linaria is a zero-runtime CSS in JS library that extracts styles to CSS files during the build process rather than at runtime.
Linaria solves the problem of shipping CSS-in-JS code to browsers by moving style extraction entirely to build time. It allows developers to write CSS using familiar syntax with Sass-like nesting and JavaScript for logic, then extracts the resulting CSS into separate files during compilation. Dynamic prop-based styles are handled through CSS variables, eliminating the need for runtime style injection. The tool is built on top of wyw-in-js, which evaluates modules at build time to extract CSS and supports multiple bundlers including webpack, esbuild, Rollup, Vite, and Svelte.
Linaria suits projects where build-time CSS extraction is feasible and where developers want the ergonomics of writing styles in JavaScript without the performance cost of runtime CSS-in-JS libraries. It works with any framework and includes additional helpers for React. The project provides CSS sourcemaps for debugging, integrates with stylelint for linting styles in JavaScript, and optionally supports CSS preprocessors like Sass or PostCSS. An atomic styles mode is available through the @linaria/atomic package.
The project maintains active engagement with its build-time evaluation model, documenting practical guidance on common pitfalls and stability considerations at wyw-in-js.dev. Recent versions require a minimum Node.js version aligned with the underlying WyW dependency graph, and the project provides migration guidance when evaluation strategies change. The tool's reliance on build-time module evaluation means developers need to be aware of how their code structure affects build performance and CSS rule ordering.
