Repository files navigation

Zero-runtime CSS in JS library.

• Write CSS in JS, but withzero runtime, CSS is extracted to CSS files during build
• FamiliarCSS syntax with Sass like nesting
• Usedynamic prop based styles with the React bindings, uses CSS variables behind the scenes
• Easily find where the style was defined withCSS sourcemaps
• Lint your CSS in JS withstylelint
• UseJavaScript for logic, no CSS preprocessor needed
• Optionally use anyCSS preprocessor such as Sass or PostCSS
• Supportsatomic styles with@linaria/atomic

Why use Linaria

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

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

or

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

Linaria is now built on top ofwyw-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
• esbuild
• Rollup
• Vite
• Svelte

SeeConfiguration to customize how Linaria processes your files.

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';importfontsfrom'./fonts';// Write your styles in `css` tagconstheader=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<h1className={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 usingReact, you can use thestyled 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` tagconstTitle=styled.h1`  font-family:${families.serif};`;constContainer=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<Containercolor="#333"><Title>Hello world</Title></Container>;

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

SeeBasics for a detailed information about the syntax.

• Basics
• API and usage
  • Client APIs
  • Server APIs
• Configuration
• Dynamic styles withcss tag
• Theming
• Critical CSS extraction
• Bundlers integration
  • webpack
  • Rollup
• CLI
• Linting
• How it works
• Example

We appreciate any support in library development!

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

• No IE11 support when using dynamic styles in components withstyled, since it uses CSS custom properties

• Dynamic styles are not supported withcss tag. SeeDynamic styles withcss tag for alternative approaches.

• Modules used in the CSS rules cannot have side-effects.For example:

  import{css}from'@linaria/core';importcolorsfrom'./colors';consttitle=css`color:${colors.text};`;

  Here, there should be no side-effects in thecolors.js file, or any file it imports. We recommend to move helpers and shared configuration to files without any side-effects.

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 instyled-components/emotion, you need to use@linaria/interop

• Syntax Highlighting -language-babel
• Autocompletion -vscode-styled-components
• Linting -stylelint

• Syntax Highlighting and Autocompletion -language-babel

• Syntax Highlighting & Autocompletion -webstorm-styled-components

• Syntax Highlighting & Autocompletion -Naomi,JSCustom (refer to document on how to turn on Styled Component syntax)
• Linting -SublimeLinter-stylelint,LSP Stylelint

• gatsby-plugin-linaria – Gatsby plugin that sets up Babel and webpack configuration for Linaria.
• polished.js - A lightweight toolset for writing styles in JavaScript.
• craco-linaria - ACraco plugin that allows you to use Linariawithout ejecting from aCRA.

• glam
• styled-components
• css-literal-loader

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

• babel
• stylis.js

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

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 athello@callstack.com 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! 🔥

Thanks goes to these wonderful people (emoji key):

Paweł Trysła 💻📖🤔	Satyajit Sahoo 💻📖🤔	Michał Pierzchała 💻📖🤔	Lucas 📖	Alexey Pronevich 📖	Wojtek Szafraniec 💻	Anton Evzhakov 💻🤔📖
Tushar Sonawane 📖💡	Ferran Negre 📖	Jakub Beneš 💻📖	Oscar Busk 🐛💻	Dawid 💻📖	Kacper Wiszczuk 💻📖	Denis Rul 💻
Johan Holmerin 💻📖	Gilad Peleg 📖	Giuseppe 💻	Matija Marohnić 💻📖	Stefan Schult 💻	Ward Peeters 💻	radoslaw-medryk 💻
杨兴洲 💻	Dawid Karabin 📖	Chris Abrams 💻📖🤔	Jayphen 💻	c4605 💻	Toru Kobayashi 💻	Jakub Mazurek 💻
Joshua Nelson 💻🤔📖	Tomasz Krzyżowski 💻	Martin Schulze 💻	wmzy 💻	Hyeseong Kim 💻	Martin Hochel 💻	Daniel Lo Nigro 💻
0xflotus 💻	Afzal Sayed 💻	AijiUejima 💻	Oleksii Vasyliev 💻	Alican Erdoğan 💻	Aman Kubanychbek 💻	Andrew Gerard 💻
Andrey Frolov 💻	Benjamin Solum 💻	Billy Kwok 💻	Christian Todd 💻	David Peek 💻	Denis Skiba 💻	Dima Kharitonov 💻
Gabriel Valfridsson 💻	Gitai 💻	Hampus Kraft 💻	Igor Sukharev 💻	Ikko Ashimine 💻	Iman Mohamadi 💻	JB 💻
Jack Works 💻	James George 💻	Jed Mao 💻	Joe Lencioni 💻	Joey Cozza 💻	Juan Ferreras 💻	Kazuma Ebina 💻
Lars Kappert 💻	Luciano Mammino 💻	Madhav Varshney 💻	Malash 💻	Martijn Swaagman 💻	Matias Lahti 💻	Michael James 💻
Michael Strobel 💻	Michał Chudziak 💻	Mike 💻	Mike Stop Continues 💻	Mokshit Jain 💻	Oleksandr Fediashov 💻	Paddy O'Brien 💻
Patrik Smělý 💻	Pavel Udaloff 💻	Przemysław Bitkowski 💻	RiN 💻	Roman Sokhan 💻	Seokmin Hong (Ray) 💻	Serge K Lebedev 💻
Sergey Korovin 💻	Shreyas Sreenivas 💻	Sky Wickenden 💻	Stanislav Panferov 💻	Ted Jenkins 💻	Thanh Tran 💻	Thor Amorim 💻
tobenna 💻	Tomas Carnecky 💻	Tsubasa1218 💻	Turadg Aleahmad 💻	Vitor Buzinaro 💻	Mistereo 💻	Vladislav Kozulya 💻
Yuhei Yasuda 💻	Danil Kamyshov 💻	Sebastian Landwehr 💻	everdimension 💻	ptol 💻	roottool 💻	ryamaguchi0220 💻
simka 💻	soso 💻	Nikita Skovoroda 💻	黄小健 💻	iMoses 💻	Jeremy Neander 💻	Andy Parsons 💻
Platane 📖	Tim Kutnick 📖	Dmitrii Pikulin 💻

This project follows theall-contributors specification. Contributions of any kind welcome!