Linaria 1.0 Released: CSS-in-JS with No Runtime

The first stable release of Linaria, a zero-runtime CSS-in-JS library, is now available to developers. Linaria provides a new API to facilitate using it with React and aims for a better developer experience and build integration.

Linaria adds the styled tag to its existing css tag. The styled tag creates a React component with a parameterized styling.

import { styled } from 'linaria/react';

// Create a styled component
const Button = styled.a`
  display: inline-block;
  border-radius: 3px;
  padding: 0.5rem 0;
  margin: 0.5rem 1rem;
  width: 11rem;
  background: transparent;
  color: white;
  border: 2px solid white;
`

render(
    <Button
      href="https://github.com/callstack/linaria"
      target="_blank"
      rel="noopener"
      primary
    >
      GitHub
    </Button>
)

Linaria's tags follow the ES2015 tagged template literal syntax. Template literals are string literals allowing embedded expressions. Tagged templates allow parsing template literals with a function. In the previous code example, display: inline-block is a template literal,styled.a is a template tag, and styled.a`display: inline-block` is a tagged template literal. Developers may write template literals with a syntax following standard CSS or with an object style syntax.

Additionally, the styled tag supports dynamic styling through interpolation of a function within a template literal.

const Title = styled.h1`
  color: ${props => (props.primary ? 'tomato' : 'black')};
`;

The Title React component will adjust its color to tomato or black based on its primary props.

Dynamic styling is however not supported by older browsers such as Internet Explorer as it relies on CSS custom properties (also known as CSS variables). CSS custom properties are supported by modern browsers.

Linaria 1.0 ships with a new Command Line Interface (CLI) to extract the CSS content from the JavaScript source. The following command will extract the CSS from the component and screen directories into the styles directory.

npx linaria -o styles src/component/**/*.js src/screens/**/*.js

Linaria 1.0 also comes with a new Rollup plugin, enabling developers to build with Rollup as an alternative to existing Webpack support. This release also improves its support for the stylelint processor. While previous Linaria releases only supported the Stylis CSS preprocessor, Linaria now allows developers to use any CSS preprocessor, such as Sass, or custom PostCSS syntaxes. Linaria also accepts a configuration file (linaria.config.js)`.Importantly, Linaria supports CSS source maps for a streamlined debugging experience.

CSS-in-JS refers to a pattern where CSS is composed using JavaScript instead of defined in external CSS files. Two sub-patterns coexist. Runtime CSS-in-JS libraries, such as Emotion or Styled-components, dynamically modify styles at runtime, for instance by injecting style tags into the document. Zero-runtime CSS-in-JS is a pattern which promotes extracting all the CSS at build time. Linaria and Astroturf are primary proponents of that pattern.

Linaria is an open source project available under the MIT license. Contributions are welcome via the Linaria GitHub project and should follow the Linaria code of conduct and contributions guidelines.