linaria README

The project's README from github.com/callstack/linaria. As one markdown file: README.md.

Linaria

Zero-runtime CSS in JS library.

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

![All Contributors][all-contributors-badge] [![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

Why use Linaria

Learn how Airbnb improved both developer experience and web performance with Linaria

Installation

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

or

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

Setup

Linaria is now built on top of 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:

See 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.

See https://wyw-in-js.dev/stability for practical guidance and common pitfalls.

Syntax

Linaria can be used with any framework, with additional helpers for React. The basic syntax looks like this:

import { css } from '@linaria/core';
import { modularScale, hiDPI } from 'polished';
import fonts from './fonts';

// Write your styles in `css` tag
const header = css`
  text-transform: uppercase;
  font-family: ${fonts.heading};
  font-size: ${modularScale(2)};

  ${hiDPI(1.5)} {
    font-size: ${modularScale(2.5)};
  }
`;

// Then use it as a class name
<h1 className={header}>Hello world</h1>;

You can use imported variables and functions for logic inside the CSS code. They will be evaluated at build time.

If you're using React, you can use the styled helper, which makes it easy to write React components with dynamic styles with a styled-component like syntax:

import { styled } from '@linaria/react';
import { families, sizes } from './fonts';

// Write your styles in `styled` tag
const Title = styled.h1`
  font-family: ${families.serif};
`;

const Container = styled.div`
  font-size: ${sizes.medium}px;
  color: ${props => props.color};
  border: 1px solid red;

  &:hover {
    border-color: blue;
  }

  ${Title} {
    margin-bottom: 24px;
  }
`;

// Then use the resulting component
<Container color="#333">
  <Title>Hello world</Title>
</Container>;

Dynamic styles will be applied using CSS custom properties (aka CSS variables) and don't require any runtime.

See Basics for a detailed information about the syntax.

Demo

Edit Linaria Demo

Documentation

Contributing

We appreciate any support in library development!

Take a look on Contributing docs to check how you can run Linaria in development mode.

Trade-offs

Interoperability with other CSS-in-JS libraries

Linaria can work together with other CSS-in-JS libraries out-of-the-box. However, if you want to use styled components from Linaria as selectors in styled-components/emotion, you need to use @linaria/interop

Editor Plugins

VSCode

Atom

Webstorm

Sublime Text

Inspiration

Acknowledgements

This project wouldn't have been possible without the following libraries or the people behind them.

Special thanks to @kentcdodds for his babel plugin and @threepointone for his suggestions and encouragement.

Made with ❤️ at Callstack

Linaria is an open source project and will always remain free to use. If you think it's cool, please star it 🌟. Callstack is a group of React and React Native geeks, contact us at [email protected] if you need any help with these or just want to say hi!

Like the project? ⚛️ Join the team who does amazing stuff for clients and drives React Native Open Source! 🔥

Sponsors

{callstack}

Servers.com

Contributors

Thanks goes to these wonderful people (emoji key):

Paweł Trysła
Paweł Trysła
💻 📖 🤔		 Satyajit Sahoo
Satyajit Sahoo
💻 📖 🤔		 Michał Pierzchała
Michał Pierzchała
💻 📖 🤔		 Lucas
Lucas
📖		 Alexey Pronevich
Alexey Pronevich
📖		 Wojtek Szafraniec
Wojtek Szafraniec
💻		 Anton Evzhakov
Anton Evzhakov
💻 🤔 📖
Tushar Sonawane
Tushar Sonawane
📖 💡		 Ferran Negre
Ferran Negre
📖		 Jakub Beneš
Jakub Beneš
💻 📖		 Oscar Busk
Oscar Busk
🐛 💻		 Dawid
Dawid
💻 📖		 Kacper Wiszczuk
Kacper Wiszczuk
💻 📖		 Denis Rul
Denis Rul
💻
Johan Holmerin
Johan Holmerin
💻 📖		 Gilad Peleg
Gilad Peleg
📖		 Giuseppe
Giuseppe
💻		 Matija Marohnić
Matija Marohnić
💻 📖		 Stefan Schult
Stefan Schult
💻		 Ward Peeters
Ward Peeters
💻		 radoslaw-medryk
radoslaw-medryk
💻
杨兴洲
杨兴洲
💻		 Dawid Karabin
Dawid Karabin
📖		 Chris Abrams
Chris Abrams
💻 📖 🤔		 Jayphen
Jayphen
💻		 c4605
c4605
💻		 Toru Kobayashi
Toru Kobayashi
💻		 Jakub Mazurek
Jakub Mazurek

linaria (callstack/linaria)

Searching Database…

12.4K ·GitHub
Linaria
Что это такое?Linaria — это CSS-in-JS библиотека без рантайма: вы пишете стили на JavaScript или TypeScript, а при сборке они извлекаются в обычные CSS-файлы.
Что «zero-runtime» реально означает для моего приложения?В браузер не попадает никакая библиотека стилей. Плагин для бандлера извлекает ваши стили в обычные CSS-файлы во время сборки, вместо того чтобы внедрять их на страницу в рантайме, как это делает классический CSS-in-JS.
Как подключить его в своём проекте?Установите пакет и настройте бандлер так, чтобы CSS извлекался во время сборки: Linaria построена на wyw-in-js.dev, там есть инструкции по настройке для webpack, esbuild, Rollup, Vite и Svelte.
Есть ли требования к версиям, которые стоит знать?Да: Linaria 8 требует Node.js 22.12.0 или новее, что соответствует её графу зависимостей WyW 2 / Oxc, плюс один из поддерживаемых бандлеров в проекте.
Какие основные подводные камни перед внедрением?Три момента: динамические стили через styled не поддерживаются в IE11; тег css вообще не поддерживает динамические стили; а модули, на которые ссылаются CSS-правила, не должны иметь побочных эффектов.
Он работает только с React или с любым фреймворком?С любым фреймворком: основной синтаксис — это обычный CSS, написанный на JS, а для React дополнительно есть хелпер styled для создания компонентов с динамическими стилями на основе пропсов.
Это чисто вебовая штука или можно стилизовать и нативные мобильные приложения?Проект рассчитан только на веб: на выходе получается стандартный CSS, который потребляют браузеры, извлекаемый через веб-бандлеры вроде webpack, Vite и Rollup.
Как работают динамические стили, если в браузере ничего не выполняется?Стили на основе пропсов компилируются во время сборки в CSS custom properties (CSS-переменные): изменение пропа просто подменяет значение переменной, так что рантайм-движок стилей не задействуется вовсе.
Можно ли использовать Linaria вместе со styled-components или Emotion?Да, она работает вместе с другими CSS-in-JS библиотеками из коробки. Чтобы использовать styled-компоненты Linaria как селекторы внутри styled-components или Emotion, добавьте пакет @linaria/interop.
Как понять, откуда взялся сгенерированный стиль?Linaria генерирует CSS sourcemaps, так что можно проследить правило в извлечённом CSS до файла и компонента, где оно определено, а ещё можно проверять стили в JS с помощью stylelint.
Поддерживается ли atomic CSS?Да, пакет @linaria/atomic добавляет поддержку атомарных стилей — это удобно для мелких utility-правил вместо блоков на каждый компонент.
What are similar projects?postcss, vanilla-extract, tamagui, unocss, stylex, qiankun, stylelint, material-components-web
Which topics is it in?postcss, css-in-js, sass, webpack, build-tool, vite, css, web-development, react, npm, frontend, nodejs
Creator
callstack
Size
32.8 MB
Stars
12.4K
Updated
CommitOct 10Release@linaria/[email protected]Aug 10
Age
9y
Commits · 90 Days