Package - @bebraw/linaria

Linaria

Zero-runtime CSS in JS library.

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

Installation

npm install linaria

yarn add linaria

Setup

Linaria requires webpack to build your CSS. To set up the build, add the webpack loader to your webpack.config.js after babel-loader (if you use it):

module: {
  rules: [
    {
      test: /\.js$/,
      use: [
        { loader: 'babel-loader' },
        {
          loader: 'linaria/loader',
          options: {
            sourceMap: process.env.NODE_ENV !== 'production',
          },
        },
      ],
    },
    {
      test: /\.css$/,
      use: [
        MiniCssExtractPlugin.loader,
        {
          loader: 'css-loader',
          options: {
            sourceMap: process.env.NODE_ENV !== 'production',
          },
        },
      ],
    },
  ],
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'styles.css',
    }),
  ],
},

You also need css-loader and mini-css-extract-plugin in your pipeline. The usage is shown above.

Now, the CSS you write with Linaria will be extracted at build time to the styles.css file. Linaria automatically vendor prefixes and strips whitespace from the CSS.

Linaria integrates with your CSS pipeline, so you can always perform additional operations on the CSS, for example, using postcss plugins such as clean-css to further minify your CSS.

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

Syntax Highlighting and autocompletion - styled-components plugin
Linting - stylelint plugin

Atom

Syntax Highlighting and autocompletion - babel grammar

Recommended Libraries

linaria-jest – Jest testing utilities for Linaria.
gatsby-plugin-linaria – Gatsby plugin that sets up Babel and webpack configuration for Linaria
babel-plugin-object-styles-to-template - Babel plugin to write styles in object syntax with linaria
babel-plugin-css-prop - Babel plugin to use a css prop ala emotion in 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!

Current Tags

1.0.0 ... latest (2 years ago)

1 Versions

1.0.0 ... 2 years ago