What is this?
Linaria is a zero-runtime CSS-in-JS library: you write styles in JavaScript or TypeScript, and they are extracted to plain CSS files at build time.
Linaria is a zero-runtime CSS-in-JS library: you write styles in JavaScript or TypeScript, and they are extracted to plain CSS files at build time.What does 'zero-runtime' actually mean for my app?No styling library ships to the browser. A bundler plugin extracts your styles into regular CSS files during the build, instead of injecting them into the page at runtime like classic CSS-in-JS.
No styling library ships to the browser. A bundler plugin extracts your styles into regular CSS files during the build, instead of injecting them into the page at runtime like classic CSS-in-JS.How do I get it running in my project?Install the package and configure your bundler to extract the CSS at build time: Linaria is built on wyw-in-js.dev, with setup guides for webpack, esbuild, Rollup, Vite and Svelte.
Install the package and configure your bundler to extract the CSS at build time: Linaria is built on wyw-in-js.dev, with setup guides for webpack, esbuild, Rollup, Vite and Svelte.Are there version requirements I should know about?Yes: Linaria 8 requires Node.js 22.12.0 or newer, aligned with its WyW 2 / Oxc dependency graph, plus one of the supported bundlers in your project.
Yes: Linaria 8 requires Node.js 22.12.0 or newer, aligned with its WyW 2 / Oxc dependency graph, plus one of the supported bundlers in your project.What are the main trade-offs before adopting it?Three gotchas: dynamic styles via styled are not supported in IE11; the css tag does not support dynamic styles at all; and modules referenced in CSS rules must be free of side effects.
Three gotchas: dynamic styles via styled are not supported in IE11; the css tag does not support dynamic styles at all; and modules referenced in CSS rules must be free of side effects.Does it work only with React, or with any framework?Any framework: the core syntax is plain CSS written in JS, while React users additionally get a styled helper for building components with prop-based dynamic styles.
Any framework: the core syntax is plain CSS written in JS, while React users additionally get a styled helper for building components with prop-based dynamic styles.Is this purely a web thing, or can it style native mobile apps too?It is web-only in scope: the output is standard CSS consumed by browsers, extracted through web bundlers such as webpack, Vite and Rollup.
It is web-only in scope: the output is standard CSS consumed by browsers, extracted through web bundlers such as webpack, Vite and Rollup.How do dynamic styles work if nothing runs in the browser?Prop-based styles compile to CSS custom properties (CSS variables) at build time: changing a prop simply switches the variable value, so no runtime style engine is ever involved.
Prop-based styles compile to CSS custom properties (CSS variables) at build time: changing a prop simply switches the variable value, so no runtime style engine is ever involved.Can I mix Linaria with styled-components or Emotion?Yes, it works together with other CSS-in-JS libraries out of the box. To use Linaria styled components as selectors inside styled-components or Emotion, add the @linaria/interop package.
Yes, it works together with other CSS-in-JS libraries out of the box. To use Linaria styled components as selectors inside styled-components or Emotion, add the @linaria/interop package.How do I find out where a generated style came from?Linaria emits CSS sourcemaps, so you can trace a rule in the extracted CSS back to the file and component that defined it, and you can lint your styles in JS with stylelint.
Linaria emits CSS sourcemaps, so you can trace a rule in the extracted CSS back to the file and component that defined it, and you can lint your styles in JS with stylelint.Does it support atomic CSS?Yes, the @linaria/atomic package adds support for atomic styles, useful for fine-grained utility-style rules instead of per-component blocks.
Yes, the @linaria/atomic package adds support for atomic styles, useful for fine-grained utility-style rules instead of per-component blocks.What are similar projects?postcss, vanilla-extract, tamagui, unocss, stylex, qiankun, stylelint, material-components-web
postcss, vanilla-extract, tamagui, unocss, stylex, qiankun, stylelint, material-components-web