linaria

<a href="https://www.callstack.com/open-source" align="center">
  <img alt="Linaria" src="https://github.com/user-attachments/assets/746f7b2a-8136-47a7-b79b-e790c1974e40">
</a>

<p align="center">
Zero-runtime CSS in JS library.
</p>

---

[![Build Status][build-badge]][build]
[![Code Coverage][coverage-badge]][coverage]
[![Version][version-badge]][package]
[![MIT License][license-badge]][license]

[![All Contributors][all-contributors-badge]](#contributors)
[![PRs Welcome][prs-welcome-badge]][prs-welcome]
[![Chat][chat-badge]][chat]
[![Code of Conduct][coc-badge]][coc]
[![Greenkeeper][greenkeeper-badge]][greenkeeper]
[![Sponsored by Callstack][callstack-badge]][callstack]

[![tweet][tweet-badge]][tweet]

## Features

- Write CSS in JS, but with **zero runtime**, CSS is extracted to CSS files during build
- Familiar **CSS syntax** with Sass like nesting
- Use **dynamic prop based styles** with the React bindings, uses CSS variables behind the scenes
- Easily find where the style was defined with **CSS sourcemaps**
- **Lint your CSS** in JS with [stylelint](https://github.com/stylelint/stylelint)
- Use **JavaScript for logic**, no CSS preprocessor needed
- Optionally use any **CSS preprocessor** such as Sass or PostCSS
- Supports **atomic styles** with `@linaria/atomic`

**[Why use Linaria](/docs/BENEFITS.md)**

**[Learn how Airbnb improved both developer experience and web performance with Linaria](https://medium.com/airbnb-engineering/airbnbs-trip-to-linaria-dc169230bd12)**

## Installation

```sh
npm install @linaria/core @linaria/react @wyw-in-js/babel-preset
```

or

```sh
yarn add @linaria/core @linaria/react @wyw-in-js/babel-preset
```

## Setup

Linaria is now built on top of [wyw-in-js.dev](https://wyw-in-js.dev/). It supports various bundlers to extract the CSS at build time. To configure your bundler, check the following guides on the wyw-in-js.dev site:

- [webpack](https://wyw-in-js.dev/bundlers/webpack)
- [esbuild](https://wyw-in-js.dev/bundlers/esbuild)
- [Rollup](https://wyw-in-js.dev/bundlers/rollup)
- [Vite](https://wyw-in-js.dev/bundlers/vite)
- [Svelte](https://wyw-in-js.dev/bundlers/svelte)

See [Configuration](https://wyw-in-js.dev/configuration) to customize how Linaria processes your files.

## Stability

Linaria relies on WyW (`@wyw-in-js/*`) to evaluate your modules at build time and extract CSS. If you hit issues like slow builds, invalidation storms, or unexpected code being executed during the build, it’s usually related to the WyW evaluation model and how your modules are structured.

Linaria 8 requires Node.js `>=22.12.0` (aligned with the WyW 2 / Oxc dependency graph). WyW 2 defaults to `eval.strategy: "hybrid"`, so statically provable values are resolved before falling back to the evaluator for dynamic values.

If your build depends on evaluator-only side effects or exact CSS rule order ties, review the Linaria 8 migration notes in [docs/MIGRATION_GUIDE.md](./docs/MIGRATION_GUIDE.md).

See https://wyw-in-js.dev/sta