Zero-runtime CSS in JS library
Permalink
Failed to load latest commit information.
.circleci feat: add typescript definitions Oct 21, 2018
.github Add Issue and PR templates (#97) Sep 4, 2017
.vscode chore: setup typescript-styled-plugin for vscode on website (#136) Oct 18, 2017
docs fix: allow customizing cache directory Oct 30, 2018
flow-typed/npm feat: support babel's caller option Oct 22, 2018
src feat: add a sourcemap to rollup output (#272) Nov 7, 2018
types fix: fix types for CSS properties in interpolation Oct 26, 2018
website feat: support babel's caller option Oct 22, 2018
.all-contributorsrc chore: update website (#196) Mar 11, 2018
.babelrc test: add tests for styled Oct 18, 2018
.codecov.yml chore: link to coverage report of the branch in pr comment (#200) Feb 27, 2018
.editorconfig Initial commit May 23, 2017
.eslintignore docs: redo website (#230) Sep 27, 2018
.eslintrc chore: merge with the old linaria repo Sep 14, 2018
.flowconfig chore: merge with the old linaria repo Sep 14, 2018
.gitignore fix: allow customizing cache directory Oct 30, 2018
.release-it.json chore: setup automated release (#241) Oct 11, 2018
CODE_OF_CONDUCT.md doc: Add more badges, CoC and Contributing guide (#95) Sep 4, 2017
CONTRIBUTING.md Update Callstack name and link. (#143) Oct 19, 2017
LICENSE chore: add MIT license Oct 23, 2017
README.md docs: update recommended libraries Nov 13, 2018
babel.js fix: properly export entrypoints. fixes #216 Sep 17, 2018
loader.js fix: properly export entrypoints. fixes #216 Sep 17, 2018
now.json chore: fix deployement on now Oct 15, 2018
package.json chore: release 1.0.0-beta.0 Nov 9, 2018
react.js fix: properly export entrypoints. fixes #216 Sep 17, 2018
rollup.js feat: add Rollup plugin (#253) Oct 15, 2018
server.js chore: merge with the old linaria repo Sep 14, 2018
stylelint-config.js feat: add stylelint preprocessor Sep 19, 2018
yarn.lock feat: support babel's caller option Oct 22, 2018

README.md

Linaria

Zero-runtime CSS in JS library.


Build Status Code Coverage Version MIT License

All Contributors PRs Welcome Chat Code of Conduct

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

Why use Linaria

Installation

npm install linaria

or

yarn add linaria

Setup

Linaria currently supports webpack and Rollup to extract the CSS at build time. See Bundlers integration to configure your bundler.

Optionally, add the linaria/babel 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/babel"
  ]
}

Syntax

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

import { css } from 'linaria';
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 class={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.

Documentation

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';
    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

Recommended Libraries

  • linaria-jest – Jest testing utilities for Linaria.
  • gatsby-plugin-linaria – Gatsby plugin that sets up Babel and webpack configuration for Linaria.
  • polished.js - A lightweight toolset for writing styles in JavaScript.

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.

Contributors

Thanks goes to these wonderful people (emoji key):


Paweł Trysła

💻 📖 🤔

Satyajit Sahoo

💻 🤔

Michał Pierzchała

💻 📖 🤔

Lucas

📖

Alexey Pronevich

📖

Wojtek Szafraniec

💻

Tushar Sonawane

📖 💡

Ferran Negre

📖

Jakub Beneš

💻 📖

Oscar Busk

🐛 💻

Dawid

💻 📖

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