Skip to content

Latest commit

 

History

History
422 lines (345 loc) · 48.4 KB

README.md

File metadata and controls

422 lines (345 loc) · 48.4 KB

Linaria

Zero-runtime CSS in JS library.


Build Status Code Coverage Version MIT License

All Contributors PRs Welcome Chat Code of Conduct Greenkeeper Sponsored by Callstack

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
  • 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

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.

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

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

  • Dynamic styles are not supported with css tag. See Dynamic styles with css tag for alternative approaches.

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

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

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

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

Recommended Libraries

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

💻
Joshua Nelson
Joshua Nelson

💻 🤔 📖
Tomasz Krzyżowski
Tomasz Krzyżowski

💻
Martin Schulze
Martin Schulze

💻
wmzy
wmzy

💻
Hyeseong Kim
Hyeseong Kim

💻
Martin Hochel
Martin Hochel

💻
Daniel Lo Nigro
Daniel Lo Nigro

💻
0xflotus
0xflotus

💻
Afzal Sayed
Afzal Sayed

💻
AijiUejima
AijiUejima

💻
Oleksii Vasyliev
Oleksii Vasyliev

💻
Alican Erdoğan
Alican Erdoğan

💻
Aman Kubanychbek
Aman Kubanychbek

💻
Andrew Gerard
Andrew Gerard

💻
Andrey Frolov
Andrey Frolov

💻
Benjamin Solum
Benjamin Solum

💻
Billy Kwok
Billy Kwok

💻
Christian Todd
Christian Todd

💻
David Peek
David Peek

💻
Denis Skiba
Denis Skiba

💻
Dima Kharitonov
Dima Kharitonov

💻
Gabriel Valfridsson
Gabriel Valfridsson

💻
Gitai
Gitai

💻
Hampus Kraft
Hampus Kraft

💻
Igor Sukharev
Igor Sukharev

💻
Ikko Ashimine
Ikko Ashimine

💻
Iman Mohamadi
Iman Mohamadi

💻
JB <codecorsair>
JB

💻
Jack Works
Jack Works

💻
James George
James George

💻
Jed Mao
Jed Mao

💻
Joe Lencioni
Joe Lencioni

💻
Joey Cozza
Joey Cozza

💻
Juan Ferreras
Juan Ferreras

💻
Kazuma Ebina
Kazuma Ebina

💻
Lars Kappert
Lars Kappert

💻
Luciano Mammino
Luciano Mammino

💻
Madhav Varshney
Madhav Varshney

💻
Malash
Malash

💻
Martijn Swaagman
Martijn Swaagman

💻
Matias Lahti
Matias Lahti

💻
Michael James
Michael James

💻
Michael Strobel
Michael Strobel

💻
Michał Chudziak
Michał Chudziak

💻
Mike
Mike

💻
Mike Stop Continues
Mike Stop Continues

💻
Mokshit Jain
Mokshit Jain

💻
Oleksandr Fediashov
Oleksandr Fediashov

💻
Paddy O'Brien
Paddy O'Brien

💻
Patrik Smělý
Patrik Smělý

💻
Pavel Udaloff
Pavel Udaloff

💻
Przemysław Bitkowski
Przemysław Bitkowski

💻
RiN
RiN

💻
Roman Sokhan
Roman Sokhan

💻
Seokmin Hong (Ray)
Seokmin Hong (Ray)

💻
Serge K Lebedev
Serge K Lebedev

💻
Sergey Korovin
Sergey Korovin

💻
Shreyas Sreenivas
Shreyas Sreenivas

💻
Sky Wickenden
Sky Wickenden

💻
Stanislav Panferov
Stanislav Panferov

💻
Ted Jenkins
Ted Jenkins

💻
Thanh Tran
Thanh Tran

💻
Thor Amorim
Thor Amorim

💻
tobenna
tobenna

💻
Tomas Carnecky
Tomas Carnecky

💻
Tsubasa1218
Tsubasa1218

💻
Turadg Aleahmad
Turadg Aleahmad

💻
Vitor Buzinaro
Vitor Buzinaro

💻
Mistereo
Mistereo

💻
Vladislav Kozulya
Vladislav Kozulya

💻
Yuhei Yasuda
Yuhei Yasuda

💻
Danil Kamyshov
Danil Kamyshov

💻
Sebastian Landwehr
Sebastian Landwehr

💻
everdimension
everdimension

💻
ptol
ptol

💻
roottool
roottool

💻
ryamaguchi0220
ryamaguchi0220

💻
simka
simka

💻
soso
soso

💻
Nikita Skovoroda
Nikita Skovoroda

💻
黄小健
黄小健

💻
iMoses
iMoses

💻
Jeremy Neander
Jeremy Neander

💻
Andy Parsons
Andy Parsons

💻
Platane
Platane

📖
Tim Kutnick
Tim Kutnick

📖
Dmitrii Pikulin
Dmitrii Pikulin

💻

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