Need help with linaria?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

callstack
7.1K Stars 258 Forks MIT License 586 Commits 87 Opened issues

Description

Zero-runtime CSS in JS library

Services available

!
?

Need anything else?

Contributors list

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

Why use Linaria

Installation

npm install @linaria/core @linaria/react @linaria/babel-preset @linaria/shaker

or

yarn add @linaria/core @linaria/react @linaria/babel-preset @linaria/shaker

Setup

Linaria currently supports webpack and Rollup to extract the CSS at build time. To configure your bundler, check the following guides:

Or configure Linaria with one of the following integrations:

Optionally, add the

@linaria
preset to your Babel configuration at the end of the presets list to avoid errors when importing the components in your server code or tests:
{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react",
    "@linaria"
  ]
}

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

Hello world

;

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 Hello world ;

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.

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!

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

💻
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

📖
Anton Evzhakov
Anton Evzhakov

💻
Chris Abrams
Chris Abrams

💻 📖 🤔
Jayphen
Jayphen

💻
c4605
c4605

💻
Toru Kobayashi
Toru Kobayashi

💻

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.