@brandonkal/linaria

Zero-runtime CSS in JS library.

Fork

This is a fork of Linaria. Reasons you will enjoy using the @brandonkal fork:

Much smaller styled runtime! No dependency on @emotion/is-prop-valid.
Simple and predictable prop filtering. Props that end in "$" are not forwarded to the DOM.
Modifiers! All style logic can be contained inside your CSS.
Improved babel support for arrow functions. This means shorter interpolations inside our styles.
Generated BEM-like modifiers. No need to name all those modifiers! Javascript logic is transformed into a CSS modifier name, all of this is stripped away after development:
Tiny class names in production with optional prefix and suffix support
Uses postCSS rather than stylis. This allows for a much deeper integration with your existing CSS pipeline.
High resolution source maps. Even nested selectors and modifiers point to the proper line rather than the start of the template literal.
Vastly improved Typescript types and support.

Modifiers look like this (with optional TS typing and shorthand prop syntax):

interface ButtonProps {
  primary$?: boolean;
}

const Button = (p => styled.button<ButtonProps>`
  background: black;
  color: white;
  &${[p.primary$]} {
    background: blue;
    color: black;
    &:hover {
      border-color: red;
    }
  }
`)({} as ButtonProps);

This has been published as a package due to a lack of response to an RFC and an open Pull Request. This package will be maintained and is used in production.

Consider using eslint-plugin-csstyper to lint dynamic CSS values!

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

Why use Linaria

Installation

yarn add @brandonkal/linaria

npm install @brandonkal/linaria

Setup

Linaria currently supports webpack and Rollup to extract the CSS at build time. To configure your bundler, check the following guides:

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"]
}

See Configuration to customize how Linaria processes your files.

Syntax

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

import { css } from '@brandonkal/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 '@brandonkal/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.

See Basics for a detailed information about the syntax.

Demo

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 '@brandonkal/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 - language-babel
Autocompletion - vscode-styled-components
Linting - stylelint

Atom

Syntax Highlighting and Autocompletion - language-babel

Recommended Libraries

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.

Made with ❤️ at Callstack

Linaria is an open source project and will always remain free to use. If you think it's cool, please star it 🌟. Callstack is a group of React and React Native geeks, contact us at hello@callstack.com if you need any help with these or just want to say hi!

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 💻 📖	_{Kacper Wiszczuk} 💻 📖	_{Denis Rul} 💻	_{Johan Holmerin} 💻 📖
_{Gilad Peleg} 📖	_Giuseppe 💻	_{Matija Marohnić} 💻 📖	_{Stefan Schult} 💻	_{Ward Peeters} 💻	_{radoslaw-medryk} 💻	_杨兴洲 💻
_{Dawid Karabin} 📖	_{Anton Evzhakov} 💻	_{Brandon Kalinowski} 💻 💬 ⚠️