JSPM – linaria@0.2.0

Package Exports

linaria
linaria/babel
linaria/build/index.runtime.js
linaria/server

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (linaria) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Zero-runtime CSS in JS library.

Features

Familiar CSS syntax with Sass like nesting.
CSS is extracted at build time, no runtime is included.
JavaScript expressions are supported and evaluated at build time.
Critical CSS can be extracted for inlining during SSR.
Integrates with existing tools like Webpack to provide features such as Hot Reload.

Why use Linaria

Try Linaria online

Installation

Install it like a regular npm package:

yarn add linaria

Add the linaria/babel preset to your Babel configuration:

{
  "presets": [
    "env",
    "react",
    ["linaria/babel", {
      "single": true,
      "filename": "styles.css",
      "outDir": "dist"
    }]
  ]
}

See Configuring Babel for more options and Bundlers integration for integrating with Webpack.

How it works

Linaria lets you write CSS code in a tagged template literal in your JavaScript files. The Babel plugin extracts the CSS rules to real CSS files, and generates unique class names to use.

Example is worth a thousand words:

import React from 'react';
import { css, include, styles } from 'linaria';
import { modularScale, hiDPI } from 'polished';
import fonts from './fonts';
import colors from './colors';

const title = css`
  text-transform: uppercase;
`;

const container = css`
  padding: 3em;
`;

const header = css`
  ${include(title)};

  font-family: ${fonts.heading};
  font-size: ${modularScale(2)};

  ${hiDPI(1.5)} {
    font-size: ${modularScale(2.5)}
  }
`;

export default function Header({ className }) {
  return (
    <div {...styles(container, className)}>
      <h1 {...styles(header)} />
    </div>
  );
}

export function Block() {
  return <div {...styles(container)} />;
}

export function App() {
  return <Header {...styles(title)} />;
}

After being transpiled, the code will output following CSS:

.title__jt5ry4 {
  text-transform: uppercase;
}

.container__jdh5rtz {
  padding: 3em;
}

.header__xy4ertz {
  text-transform: uppercase;
  font-family: Helvetica, sans-serif; /* constants are automatically inlined */
  font-size: 2.66em;
}

@media only screen and (min-resolution: 144dpi), only screen and (min-resolution: 1.5dppx) {
  .header__xy4ertz {
    font-size: 3.3325em;
  }
}

And the following JavaScipt:

import React from 'react';
import { styles } from 'linaria/build/index.runtime';

const title = 'title__jt5ry4';

const container = 'container__jdh5rtz';

const header = 'header__xy4ertz';

export default function Header({ className }) {
  return (
    <div {...styles(container, className)}>
      <h1 {...styles(header)} />
    </div>
  );
}

export function App() {
  return <Header {...styles(title)} />;
}

Trade-offs

Dynamic styles are not supported with css tag. See Dynamic Styles 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.