Skip to content

callstack/linaria

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

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!