Here are its 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


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


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


Linaria currently supports webpack and Rollup to extract the CSS at build time.

Optionally, add the code>@linaria</code 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": [


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>

Dynamic styles will be applied using CSS custom properties (aka CSS variables) and don't require any runtime.


Edit Linaria Demo


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




Sublime Text


Below are the reference links:

No. Link
1. Read more here.
2. Follow code author here.