Linaria
A CSS-in-JS library that extracts styles to plain CSS files at build time, so no styling code runs in the brow
- Stars
- 12.4k
- Forks
- 413
- Licence
- MIT
- Language
- TypeScript
- Last update
- 4 days ago
- Type
- Library
What it is
Linaria lets you write CSS inside JavaScript files, such as with a css tag or a styled helper for React. During the build step, those styles are pulled out into ordinary CSS files, so the browser does not need extra JavaScript to apply them. It is built on the wyw-in-js build tooling and works with bundlers like webpack, Vite, Rollup, and esbuild.
- Write component styles in a css tag and apply the returned class name to an element
- Create React components with styled.h1 or styled.div and pass props that drive dynamic values through CSS variables
- Use polished or other JavaScript helpers to compute values at build time inside CSS
- Lint styles written in JavaScript with stylelint
Great for
- React or other JavaScript teams who want CSS-in-JS without a runtime styling cost
- Projects that already use a supported bundler and can add a build-time plugin
- Developers who like CSS syntax with nesting and want JavaScript variables inside styles
- Teams that want source maps and stylelint support for styles written in JS
Not ideal for
- Projects that need dynamic styles inside the css tag, since the README says those are not supported there
- Apps that must support IE11, because dynamic styled components rely on CSS custom properties
- Teams whose build setup cannot run Node.js 22.12.0 or newer, which Linaria 8 requires
- Codebases with shared style helper modules that have side effects, since the README says modules used in CSS rules cannot have side effects
How to get it
- 1
Install with a package manager
You'll need: Node.js 22.12.0 or newer (required by Linaria 8) · A supported bundler such as webpack, Vite, Rollup, or esbuild
Install with npm
npm install @linaria/core @linaria/react @wyw-in-js/babel-presetInstall with yarn
yarn add @linaria/core @linaria/react @wyw-in-js/babel-preset - 2
Run it
- Install the packages with npm or yarn
- Configure your bundler using the matching guide on wyw-in-js.dev
- Write a css tag or styled component in a JavaScript file and import it into your app
- Run your normal build to confirm CSS is extracted to files
- 3
Get the most out of it
- Use the styled helper with CSS variables for prop-driven styles, as described in the README
- Enable CSS sourcemaps to trace each style back to its definition
- Add stylelint to lint styles written in JavaScript
- Use @linaria/interop if you need Linaria components as selectors in styled-components or emotion
- Read the Stability section and the migration guide when upgrading to Linaria 8
Downloads
Strengths
- Styles are extracted to CSS files at build time, so there is no styling runtime in the browser according to the README
- Supports nesting, sourcemaps, and optional preprocessors such as Sass or PostCSS
- Has a documented setup for common bundlers and an MIT license
Trade-offs
- Build-time evaluation can cause slow builds or unexpected behavior if modules have side effects, per the Stability and Trade-offs sections
- Some features are limited, such as no IE11 support for dynamic styled components and no dynamic values in the css tag
- Setup is split across the wyw-in-js.dev site, so configuration requires reading external docs
How it compares
| Project | Stars | Type | Level | Updated | Best for |
|---|---|---|---|---|---|
| linaria (this) | 12.4k | Library | intermediate | 4 days ago | React or other JavaScript teams who want CSS-in-JS without a runtime styling cost |
| styled-components | 41.1k | Library | intermediate | 7 days ago | React developers who prefer writing styles alongside components in JavaScript |
| emotion | 18k | Library | intermediate | 14 days ago | React developers who want styles colocated with components |
| vanilla-extract | 10.4k | Library | intermediate | 5 days ago | Front-end developers who want type-checked styles in TypeScript |
| autoprefixer | 22.2k | Library | intermediate | 10 days ago | Front-end developers who write plain CSS and want to stop managing prefixes by hand |
| barba | 13k | Library | intermediate | 1.9 years ago | Developers adding animated transitions to an existing multi-page website |
Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.