# Linaria

> Linaria exposes a core`css`method alongside with small, but just enough amount of helpers. Inside`@linaria/core`module you can find following methods:

---

# Linaria Documentation
# Source: https://raw.githubusercontent.com/callstack/linaria/master/docs/API.md
# Path: docs/API.md

# API

Linaria exposes a core `css` method alongside with small, but just enough amount of helpers. Inside `@linaria/core` module you can find following methods:

## Client APIs

### `css`

String tag for tagged template literals consisting CSS code. The tagged template literal is evaluated to a unique class name by the Babel plugin:

```js
import { css } from '@linaria/core';

const flower = css`
  display: inline;
  color: violet;
`;

// flower === flower__9o5awv –> with babel plugin
```

All rules inside the template literal are scoped to the class name, including media queries and animations. For example, we can declare CSS animation like so:

```js
import { css } from '@linaria/core';

const box = css`
  animation: rotate 1s linear infinite;

  @keyframes rotate {
     {
      from: 0deg;
    }
     {
      to: 360deg;
    }
  }
`;
```

### `cx(...classNames: Array<string | false | void | null | 0>) => string`

Takes a list of class names and returns a concatenated string with the class names. Falsy values are ignored.

```js
import { css, cx } from '@linaria/core';

const cat = css`
  font-weight: bold;
`;

const yarn = css`
  color: violet;
`;

const fun = css`
  display: flex;
`;

function App({ isPlaying }) {
  return <Playground className={cx(cat, yarn, isPlaying && fun)} />;
}
```

Unlike the [`classnames`](https://www.npmjs.com/package/classnames) library, this doesn't handle objects. If you want or need the features of the `classnames` library, you can use it instead.

### `styled`

Helper to build React components. It allows you to write your components in a similar syntax as [`styled-components`](https://www.styled-components.com/):

The syntax is similar to the `css` tag. Additionally, you can use function interpolations that receive the component's props:

```js
import { styled } from '@linaria/react';
import colors from './colors.json';

const Container = styled.div`
  background-color: ${colors.background};
  color: ${(props) => props.color};
  width: ${100 / 3}%;
  border: 1px solid red;

  &:hover {
    border-color: blue;
  }
`;
```

All rules inside the template literal are scoped to the component, similar to the `css` tag.

Dynamic function interpolations are replaced with CSS custom properties. A dynamic function interpolation will receive the `props` of the component as it's arguments and the returned result will be used as the value for the variable. When using this, a tiny helper is imported so that we don't duplicate the code for creating the component in all files.

You can also interpolate a component to refer to it:

```js
const Title = styled.h1`
  font-size: 36px;
`;

const Article = styled.article`
  font-size: 16px;

  /* this will evaluate to the selector that refers to `Title` */
  ${Title} {
    margin-bottom: 24px;
  }
`;
```

If you want to swap out the tag that's rendered, you can use the `as` prop:

```js
// Here `Button` is defined as a `button` tag
const Button = styled.button`
  background-color: rebeccapurple;
`;

// You can switch it to use an `a` tag with the `as` prop
<Button as="a" href="/get-started">
  Click me
</Button>;
```

You can also decorate another styled component with `styled`:

```js
const Button = styled.button`
  background-color: rebeccapurple;
`;

// The background-color in FancyButton will take precedence
const FancyButton = styled(Button)`
  background-color: black;
`;
```

### Atomic `css`

In addition to `css` from `@linaria/core`, the `@linaria/atomic` package exports its own `css` template literal which produces _atomic_ styles. See [the atomic css documentation](./ATOMIC_CSS.md) on this for more information.

## Server APIs (`@linaria/server`)

### `collect(html: string, css: string) => string`

Takes HTML and CSS strings and returns the critical CSS used in the page by analyzing the class names. It can be used to determine critical CSS for server side rendering.

```js
import { collect } from '@linaria/server';

const css = fs.readFileSync('./dist/styles.css', 'utf8');
const html = ReactDOMServer.renderToString(<App />);
const { critical, other } = collect(html, css);

// critical – returns critical CSS for given html
// other – returns the rest of styles
```

This will only detect critical CSS based on class names, so if you have any other type of selectors, they'll get added to the critical CSS.

Also note that extracting critical CSS this way will change the order of class names. It's not a problem if you're primarily using Linaria for styling. However if you're using a third party framework which imports its own CSS, then it's not recommended to use this helper on the extracted CSS.

---

# Linaria Documentation
# Source: https://raw.githubusercontent.com/callstack/linaria/master/docs/ATOMIC_CSS.md
# Path: docs/ATOMIC_CSS.md

# Atomic CSS

## What is Atomic CSS?

Atomic CSS is an approach to styling that reduces payload sizes for style delivery, and allows style composition and reuse easily. This document describes the concept of Atomic CSS, its advantage and use cases.

Atomic CSS is a way of writing CSS such that each CSS rule has exactly one declaration (an "atom"). For example,

```css
/** A normal class */
.myClass {
  background: red;
  width: 100%;
  height: 100%;
}

/** Can be written atomically as: */
.a {
  background: red;
}
.b {
  width: 100%;
}
.c {
  height: 100%;
}
```

## Usage in Linaria

Atomic styles can be enabled in the linaria config by providing an `atomizer` function (see [configuration](./CONFIGURATION.md) for details).

Once enabled, it is possible to write atomic styles by importing the `css` template literal from `@linaria/atomic`:

```tsx
import { cx } from '@linaria/core';
import { css } from '@linaria/atomic';

const atomicCss = css`
  background: red;
  width: 100%;
  height: 100%;
  border: 1px solid black;
`;

const blueBackground = css`
  background: blue;
  border: 1px solid black;
`;

// In React:
<div className={cx(atomicCss, blueBackground)} />;

// In vanilla JS:
const div = document.createElement('div');
div.setAttribute('class', cx(atomicCss, blueBackground));
document.body.appendChild(div);
```

Which at build time, is transformed into:

```ts
import { cx } from '@linaria/core';
import { css } from '@linaria/atomic';

const atomicCss =
  'atm_background_abcd atm_width_efgh atm_height_ijkl atm_border_mnop';

const blueBackground = 'atm_background_qrst atm_border_mnop';

// In React:
<div className={cx(atomicCss, blueBackground)} />; // <div class="atm_width_efgh atm_height_ijkl atm_border_mnop" atm_background_qrst />

// In vanilla JS:
const div = document.createElement('div');
div.setAttribute('class', cx(atomicCss, blueBackground)); // same as React example
document.body.appendChild(div);
```

(Note: in the example above, the slugs in the atoms are lengthened for readability)

The format of these atoms is `atm_${propertySlug}_${valueSlug}` which lets us deduplicate based on the `propertySlug` part of the atom.

As you can see in the above example, `atm_border_mnop` can be removed as it duplicated, and we see two atoms with the `background` property slug, and can remove one of them.

### at-rules, pseudo classes and keyframes

Linaria's atomic css also supports creating (nested) at-rules, pseudo classes and keyframes:

```ts
import { css } from '@linaria/atomic';

// Note: animation name namespacing does not happen automatically with @linaria/atomic. Keyframe animations are pulled out to the top level and not atomized.
export const animation = css`
  @keyframes my-animation {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  animation: my-animation 1s infinite;
`;

export const pseudoClass = css`
  &:hover {
    color: pink;
  }
`;

export const mediaQuery = css`
  @media (max-width: 400px) {
    background: orange;
  }
`;
```

These can also be combined for further nesting.

### Property priorities

Using atomic CSS, longhand properties such as `padding-top` have a _higher_ priority than their shorthand equivalents like `padding`. For example:

```ts
import { css } from '@linaria/atomic';

const noPadding = css`
  padding: 0;
`;

const paddingTop = css`
  padding-top: 5px:
`;

// In react:
<div className={cx(noPadding, paddingTop)}>...</div>;
```

The result will be that the div has `padding-top: 5px;`, as that is higher priority than `padding: 0`.

The way linaria achieves this is through property priorities. See [this blog post](https://weser.io/blog/the-shorthand-longhand-problem-in-atomic-css) for more details on the concept, and the problems it solves. The method used in linaria is to increase the specificity of the rules: see `@linaria/atomic`'s `propertyPriority` function for a list of longhand and shorthand properties supported by this. The basic rules are:

- Longhand properties have higher priority than shorthand properties
- Declarations in @media rules (and any @-rule, such as @supports) have higher priority than those outside of them

## Use cases

### Reducing number of rules

One advantage of writing styles in this way is that we can reuse CSS more effectively. In many cases, declarations are repeated in CSS, and atomic CSS allows heavy reuse of these classes. For example if we have the classes,

```html
<style>
  .redButton {
    background: red;
    width: 100px;
  }

  .blueButton {
    background: blue;
    width: 100px;
  }
</style>
<button class="redButton" />
<button class="blueButton" />
```

We've repeated the declaration `width: 100px` twice. This repetition can become heavy as the amount of rules increases. Atomically, this can be written as:

```html
<style>
  .a {
    background: red;
  }
  .b {
    background: blue;
  }
  .c {
    width: 100px;
  }
</style>
<button class="a c" />
<button class="b c" />
```

### Application order precedence vs. Definition order precedence

Another advantage is that rule precedence can be managed upon _application_ to an element rather than in the declaration. Consider a React component that passes a class name through a prop:

```ts
// BaseComponent.js
import { cx, css } from '@linaria/core';
const myClass = css`
  background: red;
`;

export default function BaseComponent({ overrideClass }) {
  return <div className={cx(myClass, overrideClass)} />;
}

// OverrideComponent.js
import { cx, css } from '@linaria/core';
import BaseComponent from './BaseComponent';

const overrides = css`
  background: blue;
`;

function OverrideComponent({ overrideClass }) {
  return <BaseComponent overrideClass={overrideClass} />;
}
```

The expectation would be that `background: blue` should be the result for `OverrideComponent`, but the result depends on the ordering of the compiled output in the DOM:

```ts
// dist/BaseComponent.js
import { cx, css } from '@linaria/core';
const myClass = 'myClass';

export default function BaseComponent({ overrideClass }) {
  return <div className={cx(myClass, overrideClass)} />;
}

// dist/BaseComponent.css
.myClass {
    background: red;
}

// dist/OverrideComponent.js
import { cx, css } from '@linaria/core';
import BaseComponent from './BaseComponent';

const overrides = 'overrides';

function OverrideComponent({ overrideClass }) {
  return <BaseComponent overrideClass={overrideClass} />;
}

// dist/BaseComponent.css
.overrides {
    background: blue;
}
```

Since `.overrides` and `.myClass` have the same specificity, the ultimate result of which component has precedence depends on their ordering in the DOM. This may be stable, but for async components, it may produce race conditions in styling.

With atomic styles, the precedence can be managed upon application – `cx` has the ability to look at the classes it is provided with, and filter duplicates. This means that there should never be rules with the same precedence applied to the same element.

Note that this example uses React, but is not a unique problem to react – it applies to any files that deliver bundles split between different files, where the ordering (and ultimate winner in specificity) may be nondeterministic at runtime.

### Limitations

- `@linaria/atomic` does not support targeting child selectors in css
- Shorthand properties like background are discouraged, as conflicts may still occur between properties like `border` and `border-top`
- Usage of `cx` is required to correctly deduplicate atoms, to ensure the application order precedence is guaranteed.

## See also

- [style9](https://github.com/johanholmerin/style9) using atomic styles
- Introduction of stylex: [conference talk video](https://www.youtube.com/watch?v=9JZHodNR184&t=229s)

---

# Linaria Documentation
# Source: https://raw.githubusercontent.com/callstack/linaria/master/docs/BASICS.md
# Path: docs/BASICS.md

# Basics

## Basic syntax

Linaria uses the [tagged template literal syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#Tagged_templates) for defining styles. This is a new syntax introduced in the recent versions of JavaScript.

A template literal is a string wrapped between backticks (`` ` ``) instead of quotes. You can use multi-line strings and string interpolation with them.

```js
const message = `
This is a template literal.
This is an interpolation: ${answer}.
`;
```

A tagged template literal is a tag attached to a template literal:

```js
const message = someTag`This is a tagged template literal`;
```

Tags are normal JavaScript function that receive the template literal and its interpolations, and can perform operations before returning a value.

Linaria exposes 2 tags for styling, `css` and `styled`. They both support the same set of features, except prop based styles, which is only supported by the `styled` tag.

These tags let you write styles in CSS syntax inside the template literals.

### The `css` tag

The `css` tag allows you to create simple class names:

```js
import { css } from '@linaria/core';

// Create a class name
const title = css`
  font-size: 24px;
  font-weight: bold;
`;

function Heading() {
  // Pass it to a component
  return <h1 className={title}>This is a title</h1>;
}
```

Here the value of the `title` variable will be a unique class name which you can pass in the `className` prop. This code is equivalent to the following CSS and JavaScript.

CSS:

```css
.title {
  font-size: 24px;
  font-weight: bold;
}
```

JavaScript:

```js
function Heading() {
  return <h1 className="title">This is a title</h1>;
}
```

### The `styled` tag

The `styled` tag allows you to create a React component with some styles already applied.

You write `styled` followed by the name of the HTML tag you want to use, e.g. `styled.div`, `styled.a`, `styled.button`, `styled.h3` etc.

```js
import { styled } from '@linaria/react';

// Create a styled component
const Title = styled.h1`
  font-size: 24px;
  font-weight: bold;
`;

function Heading() {
  // Use the styled component
  return <Title>This is a title</Title>;
}
```

This reduces quite a bit of boilerplate code you had to write when you manually created the class name and applied it to a tag. This code is equivalent to the following CSS and JavaScript.

CSS:

```css
.title {
  font-size: 24px;
  font-weight: bold;
}
```

JavaScript:

```js
function Title(props) {
  return <h1 {...props} className="title" />;
}

function Heading() {
  return <Title>This is a title</Title>;
}
```

Apart from the reduced boilerplate code, this also makes it easier to do prop based styling which you'll cover later in the guide.

### Nesting, pseudo-elements and pseudo-selectors

You can nest selectors, pseudo-elements and pseudo-selectors similar to Sass, thanks to [stylis](https://github.com/thysultan/stylis.js).

For example, to change the color of a button on hover, you'll write something like this:

```js
const Button = styled.button`
  color: black;

  &:hover {
    color: blue;
  }
`;
```

The value of `&` refers to the class name. This code is equivalent to the following CSS:

```css
.button {
  color: black;
}

.button:hover {
  color: blue;
}
```

You can nest pseudo-elements as well as other selectors:

```js
const Thing = styled.div`
  color: black;

  &::after {
    /* .thing::after */
    content: '🌟';
  }

  h3 {
    /* .thing h3 */
    color: tomato;
  }

  .code {
    /* .thing .code */
    color: #555;
  }

  & + & {
    /* .thing + .thing */
    background: yellow;
  }

  &.bordered {
    /* .thing.bordered */
    border: 1px solid black;
  }

  .parent & {
    /* .parent .thing */
    color: blue;
  }
`;
```

You can also nest media queries:

```js
const Thing = styled.div`
  color: black;

  @media (min-width: 200px) {
    color: blue;
  }
`;
```

This is equivalent to the following CSS:

```css
.thing {
  color: black;
}

@media (min-width: 200px) {
  .thing {
    color: blue;
  }
}
```

### Keyframe animations

You can write keyframe declarations right inside the template literal:

```js
const Box = styled.div`
  height: 200px;
  width: 200px;
  background-color: tomato;
  animation: spin 2s linear infinite;

  @keyframes spin {
    from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(360deg);
    }
  }
`;
```

Here `spin` will be replaced with a unique string to scope the animation to the class name.

## Interpolations

Like normal template literals, you can interpolate other expressions inside a template literal tagged with `css` or `styled`.

If you try to interpolate an invalid value, you'll get an error at build-time.

### Basic interpolations

You can interpolate variables declared in the same file as well as imported variables:

```js
const fontSize = 16;

const Title = styled.h1`
  font-size: ${fontSize}px;
`;
```

Here, the `fontSize` variable will be evaluated at build time and inserted into the generated CSS.

You can also call functions while interpolating:

```js
const Button = styled.button`
  background-color: ${colors.primary};

  &:hover {
    background-color: ${darken(0.2, colors.primary)};
  }
`;
```

### Object interpolations

You can also interpolate object styles. It's converted to a CSS string before inserting to the stylesheet:

```js
const cover = {
  position: 'absolute',
  top: 0,
  right: 0,
  bottom: 0,
  left: 0,
  opacity: 1,
  minHeight: 360,

  '@media (min-width: 200px)': {
    minHeight: 480,
  },
};

const Title = styled.h1`
  font-size: 24px;

  ${cover};
`;
```

This is equivalent to the following CSS:

```js
const Title = styled.h1`
  font-size: 24px;

  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 1;
  min-height: 360px;

  @media (min-width: 200px): {
    min-height: 480px;
  }
`;
```

The interpolated object can have nested selectors, media queries, pseudo-selectors and pseudo-elements. Numeric values which require a unit (e.g. `minHeight` in the above example) will be appended with `px` unless specified.

### Prop based styles

When writing React components using the `styled` syntax, you can write styles based on the component's props. These values will use [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables) under the hood and can change dynamically in runtime.

For dynamic prop based styles, pass a function to the interpolation:

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

The function will be called with the component's props as an argument when it is rendered. Here, the color of the title will be automatically updated whenever the value of the `primary` prop changes.

### Referring to another component or class name

You can interpolate a styled component or a class name to refer to it. For example:

```js
const title = css`
  font-size: 24px;
  color: black;
`;

const Paragraph = styled.p`
  font-size: 16px;
  color: #555;
`;

const Article = styled.article`
  /* when referring to class names, prepend a dot (.) */
  .${title} {
    font-size: 36px;
  }

  /* when referring to a component, interpolate it as a selector */
  ${Paragraph} {
    font-size: 14px;
    margin: 16px;
  }
`;
```

## Overriding styles

If you want to override few styles on a styled component you defined earlier, you can do so by wrapping it in the `styled(..)` tag:

```js
const Button = styled.button`
  font-size: 14px;
  background-color: tomato;
  padding: 8px;
  box-shadow: 0 0.5px 0.3px rgba(0, 0, 0, 0.1);
`;

const LargeButton = styled(Button)`
  font-size: 18px;
  padding: 16px;
`;
```

Here, when you use `LargeButton`, it'll have all the same styles as `Button` except the `font-size` and `padding` which we overrode.

## Styling custom components

You can use the `styled(..)` tag to style any component as long as they accept a `className` and a `style` prop:

```js
function CoolComponent({ className, style, ...rest }) {
  return (
    <div className={className} style={style}>
      {...}
    </div>
  );
}

const StyledCoolComponent = styled(CoolComponent)`
  background-color: tomato;
`;
```

The `style` prop is necessary to apply CSS variables. If you're using a component library that doesn't support passing a `style` prop, you can wrap it in a `div` (or any other tag that makes sense) to apply it:

```js
import { Card } from 'some-library';

function CustomCard({ className, style, ...rest }) {
  return (
    <div style={style}>
      <Card className={className} {...rest} />
    </div>
  );
}

const StyledCustomCard = styled(CustomCard)`
  margin: 16px;
  height: ${props => props.height}px;
`;
```

If you want to use linaria classname, which is generated for component, you can get it as last item from `className` prop:

```js
function CoolComponent({ className, style, variant, ...rest }) {
  const allClasses = className.split(' ');
  const linariaClassName = allClasses[allClasses.length - 1];

  const classes = cx(
    className,
    variant === 'primary' && `${linariaClassName}--primary`
  );

  return (
    <div className={classes} style={style}>
      {...}
    </div>
  );
}

const StyledCoolComponent = styled(CoolComponent)`
  background-color: tomato;

  &--primary {
    background-color: yellow;
  }
`;
```

## Adding global styles

Normally, the styles are scoped to specific components. But sometimes you may need to write some global styles, for example, to normalize browser inconsistencies, define a font-family etc.

You can do the following to generate unscoped global styles:

```js
export const globals = css`
  :global() {
    html {
      box-sizing: border-box;
    }

    *,
    *:before,
    *:after {
      box-sizing: inherit;
    }

    @font-face {
      font-family: 'MaterialIcons';
      src: url(../assets/fonts/MaterialIcons.ttf) format('truetype');
    }
  }
`;
```

It's not possible to use dynamic prop based styles inside global styles.

---

# Linaria Documentation
# Source: https://raw.githubusercontent.com/callstack/linaria/master/docs/BENEFITS.md
# Path: docs/BENEFITS.md

# Why use Linaria

## Advantages over regular CSS

### 1. Selectors are scoped

Unlike regular CSS, Linaria will generate scoped class names so that there's no collision between multiple styles in a large application. It's automatic, unlike conventions such as BEM.

For example, consider the following:

```js
const title = css`
  font-size: 18px;
`;
```

The resulting CSS will look something like:

```css
.k4yi6fg {
  font-size: 18px;
}
```

Here the generated class name is unique and based on the hash of the file path.

### 2. Styles are in same file as the component

With regular CSS, you'll need to create a separate file to write the CSS. This can be annoying when working with components because you'll need to do constant switching between the JS and CSS files while you're tweaking the styles. With Linaria, you can have the styles in the same file as rest of the JS.

You can also keep the styles in a separate JS file if you want, of course.

### 3. Refactor with confidence

You don't have to worry about breaking an unrelated component when changing and removing styles. Since Linaria's styles are like regular JavaScript variables, it's easy to track their usage and refactor.

### 4. No pre-processor needed

Linaria supports JavaScript expressions, which enables you to generate style rules inside a declaration programmatically with JavaScript. You can share constants and helper functions between your CSS and JavaScript freely.

For example, here we are using a `lighten` helper from a third-party library:

```js
import { lighten } from 'polished';

const PRIMARY_COLOR = '#de2d68';

const button = css`
  background-color: ${PRIMARY_COLOR};

  &:hover {
    background-color: ${lighten(0.2, PRIMARY_COLOR)};
  }
`;
```

### 5. Automatic unused styles removal

Linaria automatically drops unused styles in a file unless it is exported. Linters like [ESLint](https://eslint.org/) can also warn you about when you have unused styles since they are just normal JS variables.

### 6. Automatic vendor prefixing

Linaria will automatically vendor prefix your CSS, so you don't have to worry about supporting older browsers. You write modern CSS, and Linaria takes care of the rest.

You can still use tools like [PostCSS](https://postcss.org/) to further optimize the CSS.

### 7. Declarative dynamic styling with React

When using the `styled` helper, Linaria will generate dynamic CSS variables which automatically update when props change. When writing regular CSS, you'll have to manage it manually.

For example, here the `height` and `width` will automatically update based on the `size` prop of `Box`:

```js
const Box = styled.div`
  background-color: orange;
  height: ${props => props.size}px;
  width: ${props => props.size}px;
`;

<Box size={48}>
```

## Advantages over CSS preprocessors

### 1. No new syntax to learn

Linaria's syntax is just like regular CSS, plus ability to nest selectors for convenience. There's no new syntax for variables, mixins or functions. It's just JavaScript.

### 2. Same advantages as regular CSS

Linaria has all the same advantages mentioned in "Advantages over regular CSS" even when you are using a CSS pre-processor.

## Advantages over inline styles

### 1. Full power of CSS

Unlike inline styles, you have the full power of CSS with Linaria, such as:

- Media queries
- Animation keyframes
- Hover, focus states etc.
- Pseudo-selectors

### 2. Performance

Class names perform much faster than inline styles.

## Advantages over other CSS-in-JS solutions

### 1. CSS is downloaded and parsed separately from JS

Since the styles are extracted to separate CSS files, the CSS and JavaScript can be downloaded and parsed by the browser in parallel and can improve the load time.

### 2. No extra parsing needed for CSS

Many CSS-in-JS libraries parse the CSS string using a custom parser on the client. This increases the bundle size (albeit slightly) due to the inclusion of the parser. In addition, the CSS cannot be parsed until the JavaScript code is parsed and executed, which can be noticable, especially on low-end devices and bigger JS bundles.

Linaria is unique in the sense that it doesn't need a runtime to work. Styles are parsed, evaluated and generated at build time and no extra parsing is needed on the client.

### 3. No style duplication on SSR

For component based CSS in JS libraries, rendering same component with different props can lead to duplicating the same set of styles multiple times. It doesn't matter on client side, but may increase the size of the rendered CSS when doing SSR. It may not matter in most cases, but in cases where you are rendering a large list of elements with tiny differences in styles, it can quickly add up.

In addition, when you do SSR, the rendered CSS is downloaded in addition to the CSS you wrote in JS files, further increasing the size.

Linaria produces only one rule set per declaration, and the differences are taken care of using CSS variables, so there's no duplication, which is great for reducing bundle size.

### 4. Catch errors early due to build-time evaluation

When you interpolate invalid values in Linaria (for example NaN in styles), you'll get a build time error. So you don't accidentally ship bugs into production and realize it later.

Linaria's stylelint processor is also more robust and can lint styles much better, like you're writing vanilla CSS files.

### 5. Familiar CSS syntax

Unlike some CSS in JS libraries, Linaria lets you write normal CSS syntax, which means you can copy paste styles from the browser's dev tools (or StackOverflow), and avoid unnecessary noise in the styles.

You can also use a pre-processor such as Sass if you prefer.

### 6. Works without JavaScript

If your website needs to work without JavaScript, or you generate the HTML in advance at build time, Linaria is a great fit for styling such websites.

---

# Linaria Documentation
# Source: https://raw.githubusercontent.com/callstack/linaria/master/docs/BUNDLERS_INTEGRATION.md
# Path: docs/BUNDLERS_INTEGRATION.md

# Bundlers Integration

## Jump To

- [webpack](#webpack)
- [esbuild](#esbuild)
- [Rollup](#Rollup)
- [Vite](#Vite)
- [Svelte](#Svelte)

## Pre-requisites

If you use Babel in your project, make sure to have a [config file for Babel](https://babeljs.io/docs/en/config-files) in your project root with the plugins and presets you use. Otherwise Linaria won't be able to parse the code.

## Bundlers

Please note, that `@babel/core` is a peer dependency of all loaders. Do not forget to add it to `devDependencies` list in your project.

### webpack

To use Linaria with webpack, in your webpack config, add `@wyw-in-js/webpack-loader` under `module.rules`:

```js
{
  test: /\.js$/,
  use: [
    { loader: 'babel-loader' },
    {
      loader: '@wyw-in-js/webpack-loader',
      options: {
        sourceMap: process.env.NODE_ENV !== 'production',
      },
    }
  ],
}
```

Make sure that `@wyw-in-js/webpack-loader` is included after `babel-loader`.

In order to have your styles extracted, you'll also need to use **css-loader** and **MiniCssExtractPlugin**. First, install them:

```sh
yarn add --dev css-loader mini-css-extract-plugin
```

Import `mini-css-extract-plugin` at the top of your webpack config:

```js
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
```

Now add the following snippet in under `module.rules`:

```js
{
  test: /\.css$/,
  use: [
    {
      loader: MiniCssExtractPlugin.loader,
    },
    {
      loader: 'css-loader',
      options: {
        sourceMap: process.env.NODE_ENV !== 'production',
      },
    },
  ],
},
```

Then add the following under `plugins`:

```js
new MiniCssExtractPlugin({
  filename: 'styles.css',
});
```

This will extract the CSS from all files into a single `styles.css`. Then you can link to this file in your HTML file manually or use something like [`HTMLWebpackPlugin`](https://github.com/jantimon/html-webpack-plugin).

It will also hot reload your styles when in a development environment.

For production usage, you should include a hash in the filename:

```js
new MiniCssExtractPlugin({
  filename: 'styles-[contenthash].css',
});
```

Using a hash like this allows for a far future `Expires` header to be used, to improve cache efficiency. To link to the correct filename, you can either use [`HTMLWebpackPlugin`](https://github.com/jantimon/html-webpack-plugin) for a static HTML file, or [`assets-webpack-plugin`](https://yarn.pm/assets-webpack-plugin) to save the filename to a JSON file which you can then read in your server-side code.

Linaria integrates with your CSS pipeline, so you can always perform additional operations on the CSS, for example, using [postcss](https://postcss.org/) plugins such as [clean-css](https://github.com/jakubpawlowicz/clean-css) to further minify your CSS.

#### Full example

Here is an example webpack config with Linaria:

```js
const webpack = require('webpack');
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const dev = process.env.NODE_ENV !== 'production';

module.exports = {
  mode: dev ? 'development' : 'production',
  devtool: 'source-map',
  entry: {
    app: './src/index',
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/dist/',
    filename: '[name].bundle.js',
  },
  optimization: {
    noEmitOnErrors: true,
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': { NODE_ENV: JSON.stringify(process.env.NODE_ENV) },
    }),
    new MiniCssExtractPlugin({ filename: 'styles.css' }),
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          { loader: 'babel-loader' },
          {
            loader: '@wyw-in-js/webpack-loader',
            options: { sourceMap: dev },
          },
        ],
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
          },
          {
            loader: 'css-loader',
            options: { sourceMap: dev },
          },
        ],
      },
      {
        test: /\.(jpg|png|gif|woff|woff2|eot|ttf|svg)$/,
        use: [{ loader: 'file-loader' }],
      },
    ],
  },
  devServer: {
    contentBase: [path.join(__dirname, 'public')],
    historyApiFallback: true,
  },
};
```

You can copy this file to your project if you are starting from scratch.

To install the dependencies used in the example config, run:

```sh
yarn add --dev webpack webpack-cli webpack-dev-server mini-css-extract-plugin css-loader file-loader babel-loader @wyw-in-js/webpack-loader
```

You can now run the dev server by running `webpack-dev-server` and build the files by running `webpack`.

#### Options

The loader accepts the following options:

- `sourceMap: boolean` (default: `false`):

  Setting this option to `true` will include source maps for the generated CSS so that you can see where source of the class name in devtools. We recommend to enable this only in development mode because the sourcemap is inlined into the CSS files.

- `cacheProvider: undefined | string | ICache` (default: `undefined`):
  By default Linaria use a memory cache to store temporary CSS files. But if you are using this loader with [thread-loader](https://www.npmjs.com/package/thread-loader) you should use some consistent cache to prevent [some unexpected issues](https://github.com/callstack/linaria/issues/881). This options support a `ICache` instance or a path to NodeJS module which export a `ICache` instance as `module.exports`

  > ```
  > interface ICache {
  >   get: (key: string) => Promise<string>;
  >   set: (key: string, value: string) => Promise<void>;
  >   getDependencies?: (key: string) => Promise<string[]>;
  >   setDependencies?: (key: string, value: string[]) => Promise<void>;
  > }
  > ```

  When running webpack with `--watch`, `getDependencies` and `setDependencies` will be used to carry dependencies of the Linaria JavaScript source to the generated css output, ensuring both are rebuilt when dependencies change. When these methods are not present on the cache instance, dependencies for the css output will be ignored and may get out of sync with the JavaScript output. Linaria's default memory cache does not have this issue.

- `extension: string` (default: `'.linaria.css'`):

  An extension of the intermediate CSS files.

- `preprocessor: 'none' | 'stylis' | Function` (default: `'stylis'`)

  You can override the pre-processor if you want to override how the loader processes the CSS.

  - `'none'`: This will disable pre-processing entirely and the CSS will be left as you wrote it.

    You might want to do it if you want to use non-standard syntax such as Sass or custom [postcss](https://postcss.org/) syntax. Features such as nesting will no longer work with this option. You need to specify a loader such as [`sass-loader`](https://github.com/webpack-contrib/sass-loader) for `.linaria.css` files which handles the syntax you wrote.

  - `'stylis'`: This is the default pre-processor using [stylis.js](https://github.com/thysultan/stylis.js).

    This option also applies a custom `stylis` plugin to correct the relative paths inside `url(...)` expressions so that `css-loader` can resolve them properly.

  - `Function`: You can pass a custom function which receives the `selector` and `cssText` strings. It should return the resulting CSS code.

    A very basic implementation may look like this: `` (selector, cssText) => `${selector} { ${cssText} }`; ``.

  Changing the `preprocessor` doesn't affect the following operations:

  - The class names are always generated by the library and the pre-processor cannot change it.
  - Dynamic interpolations are always replaced with CSS variables.
  - Interpolations for JS objects always generate syntax used by default.

  Note that if you use a custom syntax, you also need to specify the `syntax` in your `stylelint.config.js` to properly lint the CSS.

In addition to the above options, the loader also accepts all the options supported in the [configuration file](/docs/CONFIGURATION.md).

You can pass options to the loader like so:

```js
{
  loader: '@wyw-in-js/webpack-loader',
  options: {
    sourceMap: false,
  },
}
```

### esbuild

To use Linaria with esbuild, you don't need to install any external package since esbuild handles CSS by itself:

```sh
yarn add --dev @wyw-in-js/esbuild
```

Then add it to your esbuild config:

```js
import linaria from '@wyw-in-js/esbuild';
import esbuild from 'esbuild';

const prod = process.env.NODE_ENV === 'production';

esbuild
  .build({
    entryPoints: ['src/index.ts'],
    outdir: 'dist',
    bundle: true,
    minify: prod,
    plugins: [
      linaria({
        sourceMap: prod,
      }),
    ],
  })
  .catch(() => process.exit(1));
```

### Rollup

To use Linaria with Rollup, you need to use it together with a plugin which handles CSS files, such as `rollup-plugin-css-only`:

```sh
yarn add --dev rollup-plugin-css-only @wyw-in-js/rollup
```

Then add them to your `rollup.config.js`:

```js
import linaria from '@wyw-in-js/rollup';
import css from 'rollup-plugin-css-only';

export default {
  plugins: [
    linaria({
      sourceMap: process.env.NODE_ENV !== 'production',
    }),
    css({
      output: 'styles.css',
    }),
  ],
};
```

If you are using [@rollup/plugin-babel](https://github.com/rollup/plugins/tree/master/packages/babel) as well, ensure the linaria plugin is declared earlier in the `plugins` array than your babel plugin.

```js
import linaria from '@wyw-in-js/rollup';
import css from 'rollup-plugin-css-only';
import babel from '@rollup/plugin-babel';

export default {
  plugins: [
    linaria({
      sourceMap: process.env.NODE_ENV !== 'production',
    }),
    css({
      output: 'styles.css',
    }),
    babel({}),
    /* rest of your plugins */
  ],
};
```

### Vite

~~Since Vite supports Rollup plugin~~ Since Vite provides more features and flexibility, Linaria has a separate plugin for it `@wyw-in-js/vite`. Vite handles CSS by itself, you don't need a css plugin.

```sh
yarn add --dev @wyw-in-js/vite
```

Then add them to your `vite.config.js`:

```js
import { defineConfig } from 'vite';
import linaria from '@wyw-in-js/vite';

export default defineConfig(() => ({
  // ...
  plugins: [linaria()],
}));
```

If you are using language features that requires a babel transform (such as typescript), ensure the proper babel presets or plugins are passed to linaria.

```js
import { defineConfig } from 'vite';
import linaria from '@wyw-in-js/vite';

// example to support typescript syntax:
export default defineConfig(() => ({
  // ...
  plugins: [
    linaria({
      include: ['**/*.{ts,tsx}'],
      babelOptions: {
        presets: ['@babel/preset-typescript', '@babel/preset-react'],
      },
    }),
  ],
}));
```

### Svelte

#### Contents

- [Svelte with Rollup](#Rollup-1)
- [Svelte with Webpack](#Webpack-1)

#### Rollup

Take a look: [d964432](https://github.com/madhavarshney/svelte-linaria-sample/commit/d96443218694c0c8d80edf7c40a8fbf7c1f6997f)

Install `rollup-plugin-css-only` and update `rollup.config.js`

```js
import svelte from 'rollup-plugin-svelte';
import css from 'rollup-plugin-css-only'; // for CSS bundling
import linaria from '@wyw-in-js/rollup';

const dev = process.env.NODE_ENV !== 'production';

export default {
  ...
  plugins: [
    svelte({
      dev,
      // allow `plugin-css-only` to bundle with CSS generated by linaria
      emitCss: true,
    }),
    linaria({
      sourceMap: dev,
    }),
    css({
      output: '<OUT_FOLDER>/bundle.css',
    }),
  ],
};
```

**IMPORTANT**: `rollup-plugin-css-only` generates incorrect sourcemaps (see [thgh/rollup-plugin-css-only#10](https://github.com/thgh/rollup-plugin-css-only/issues/10)). Use an alternative CSS plugin such as [`rollup-plugin-postcss`](https://github.com/egoist/rollup-plugin-postcss) instead in the same way as above.

#### Webpack

Take a look: [5ffd69d](https://github.com/madhavarshney/svelte-linaria-sample/commit/5ffd69dc9f9584e3eec4127e798d7a4c1552ec19)

Update `webpack.config.js` with the following:

```js
const prod = process.env.NODE_ENV === 'production';

const linariaLoader = {
  loader: '@wyw-in-js/webpack-loader',
  options: {
    sourceMap: !prod,
  },
};

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: [linariaLoader],
      },
      {
        test: /\.svelte$/,
        use: [
          linariaLoader,
          {
            loader: 'svelte-loader',
            options: {
              dev: !prod,
              emitCss: true,
              hotReload: true,
            },
          },
        ],
      },
      ...(CSS rules)
    ],
  },
};
```

---

# Linaria Documentation
# Source: https://raw.githubusercontent.com/callstack/linaria/master/docs/CLI.md
# Path: docs/CLI.md

# CLI

Linaria CLI (`@linaria/cli`) allows you to extract CSS from your source files using a command line.

### Usage

```bash
yarn linaria [options] <file1> [<fileN>...]
```

Option `-o, --out-dir <dir>` __is always required__.

You can also use glob for specifying files to process:

```bash
yarn linaria -o styles src/component/**/*.js
# or multiple globs
yarn linaria -o styles src/component/**/*.js src/screens/**/*.js
```

CLI supports adding a require statement for generated CSS file automatically:

```bash
yarn linaria -o out-dir --source-root src --insert-css-requires dist src/**/*.js
```

where `source-root` is directory with source JS files and `insert-css-requires` has directory with transpiled/compiled JS files.

### Options

* `-o, --out-dir <dir>` (__required__) - Output directory for the extracted CSS files
* `-s, --source-maps` - Generate source maps for the CSS files
* `-r, --source-root <dir>` - Directory containing the source JS files
* `-i, --insert-css-requires <dir>` - Directory containing JS files to insert require statements for the CSS files (__works only if `-r, --source-root` is provided__)
* `-c, --config-file <filepath>` - Path to the configuration file. If a relative path is given, it'll be resolved relative to the current working directory.
* `-x, --ignore "<pattern>"` - Pattern of files to ignore. Be sure to wrap with quotes.
* `-m, --modules <type>` - Specifies a type of used imports.
* `-t, --transform <boolean>` - Replace template tags with evaluated values.

---

# Linaria Documentation
# Source: https://raw.githubusercontent.com/callstack/linaria/master/docs/CONFIGURATION.md
# Path: docs/CONFIGURATION.md

# Configuration

Linaria uses [WyW-in-JS](https://wyw-in-js.dev) under the hood and can be customized using a JavaScript, JSON or YAML file. This can be in form of:

- `wyw-in-js.config.js` JS file exporting the object (recommended).
- `wyw-in-js` property in a `package.json` file.
- `.wyw-in-jsrc` file with JSON or YAML syntax.
- `.wyw-in-jsrc.json`, `.wyw-in-jsrc.yaml`, `.wyw-in-jsrc.yml`, or `.wyw-in-jsrc.js` file.

Example `wyw-in-js.config.js`:

```js
module.exports = {
  evaluate: true,
  displayName: false,
};
```

## Options

- `evaluate: boolean` (default: `true`):

  Enabling this will evaluate dynamic expressions in the CSS. You need to enable this if you want to use imported variables in the CSS or interpolate other components. Enabling this also ensures that your styled components wrapping other styled components will have the correct specificity and override styles properly.

- `displayName: boolean` (default: `false`):

  Enabling this will add a display name to generated class names, e.g. `.Title_abcdef` instead of `.abcdef'. It is disabled by default to generate smaller CSS files.

- `variableNameConfig: "var" | "dashes" | "raw"` (default: `var`):

  Configures how the variable will be formatted in final CSS.

  ### Possible values

  #### `var`
  Use full css variable structure. This is default behavior.

  ```js
  import { styled } from "@linaria/react";

  export const MyComponent = styled.div`
    color: ${(props) => props.color};
  `;
  ```

  In CSS you will see full variable declaration

  ```css
  .MyComponent_m1cus5as {
    color: var(--m1cus5as-0);
  }
  ```

  #### `dashes`
  Removes `var()` around the variable name. It is useful when you want to control the variable on your own. For example you can set default value for CSS variable.

  ```js
  import { styled } from "@linaria/react";

  export const Theme = styled.div`
    --font-color: red;
  `;

  export const MyComponent = styled.div`
    // Returning empty string is mandatory
    // Otherwise you will have "undefined" in css variable value
    color: var(${(props) => props.color ?? ""}, var(--font-color));
  `;

  function App() {
    return (
      <Theme>
        <MyComponent>Text with red color</MyComponent>
        <MyComponent color="blue">Text with blue color</MyComponent>
      </Theme>
    );
  }
  ```

  In CSS you will see generated variable name and your default value.

  ```css
  .Theme_t1cus5as {
    --font-color: red;
  }

  .MyComponent_mc195ga {
    color: var(--mc195ga-0, var(--font-color));
  }
  ```

  #### `raw`
  Use only variable name without dashes and `var()` wrapper.

  ```js
  import { styled } from "@linaria/react";

  export const MyComponent = styled.div`
    color: ${(props) => props.color};
  `;
  ```

  In CSS you will see just the variable name. This is not valid value for css property.

  ```css
  .MyComponent_mc195ga {
    color: mc195ga-0;
  }
  ```

  You will have to make it valid:

  ```js
  export const MyComponent = styled.div`
    color: var(--${(props) => props.color});
  `;
  ```

- `classNameSlug: string | ((hash: string, title: string, args: ClassNameSlugVars) => string)` (default: `default`):

  Using this will provide an interface to customize the output of the CSS class name. Example:

      classNameSlug: '[title]',

  Would generate a class name such as `.header` instead of the default `.header_absdjfsdf` which includes a hash.

  You may also use a function to define the slug. The function will be evaluated at build time and must return a string:

      classNameSlug: (hash, title) => `${hash}__${7 * 6}__${title}`,

  Would generate the class name `.absdjfsdf__42__header`.

  Last argument `args` is an object that contains following properties: `title`, `hash`, `dir`, `ext`, `file`, `name`. These properties
  are useful when you want to generate your own hash:

  ```js
  const sha1 = require("sha1");

  module.exports = {
    classNameSlug: (hash, title, args) => sha1(`${args.name}-${title}`)
  };
  ```

  **note** invalid characters will be replaced with an underscore (`_`).

  ### Variables

  - `hash`: The hash of the content.
  - `title`: The name of the class.

- `variableNameSlug: string | ((context: IVariableContext) => string)` (default: `default`):

  Using this will provide an interface to customize the output of the CSS variable name. Example:

      variableNameSlug: '[componentName]-[valueSlug]-[index]',

  Would generate a variable name such as `--Title-absdjfsdf-0` instead of the `@react/styled`'s default `--absdjfsdf-0`.

  You may also use a function to define the slug. The function will be evaluated at build time and must return a string:

      variableNameSlug: (context) => `${context.valueSlug}__${context.componentName}__${context.precedingCss.match(/([\w-]+)\s*:\s*$/)[1]}`,

  Would generate the variable name `--absdjfsdf__Title__flex-direction`.

  **note** invalid characters will be replaced with an underscore (`_`).

  ### Variables

  - `componentName` - the displayName of the component.
  - `componentSlug` - the component slug.
  - `index` - the index of the css variable in the current component.
  - `precedingCss` - the preceding part of the css for the variable, i.e. `flex: 1; flex-direction: `.
  - `preprocessor` - the preprocessor used to process the tag (e.g. 'StyledProcessor' or 'AtomicStyledProcessor').
  - `source` - the string source of the css property value.
  - `unit` - the unit.
  - `valueSlug` - the value slug.


- `overrideContext: (context: Partial<vm.Context>, filename: string) => Partial<vm.Context>`

  A custom function to override the context used to evaluate modules. This can be used to add custom globals or override the default ones.
    
  ```js
  module.exports = {
    overrideContext: (context, filename) => ({
      ...context,
      HighLevelAPI: () => "I'm a high level API",
    }),
  };
  ```

- `rules: EvalRule[]`

  The set of rules that defines how the matched files will be transformed during the evaluation.
  `EvalRule` is an object with two fields:

  - `test` is a regular expression or a function `(path: string) => boolean`;
  - `action` is an `Evaluator` function, `"ignore"` or a name of the module that exports `Evaluator` function as a default export.

  If `test` is omitted, the rule is applicable for all the files.

  The last matched rule is used for transformation. If the last matched action for a file is `"ignore"` the file will be evaluated as is, so that file must not contain any js code that cannot be executed in nodejs environment (it's usually true for any lib in `node_modules`).

  If you need to compile certain modules under `/node_modules/` (which can be the case in monorepo projects), it's recommended to do it on a module by module basis for faster transforms, e.g. `ignore: /node_modules[\/\\](?!some-module|other-module)/`. Example is using Regular Expressions negative lookahead.

  The Information about `Evaluator`, its default setting and custom implementations can be founded it [evaluators section of How it works docs](./HOW_IT_WORKS.md#evaluators)

  The default setup is:

  ```js
  [
    {
      action: require.resolve('@linaria/shaker'),
    },
    {
      test: /[\\/]node_modules[\\/]/,
      action: 'ignore',
    },
    {
      test: (filename, code) => {
        if (!/[\\/]node_modules[\\/]/.test(filename)) {
          return false;
        }
        
        return /(?:^|\*\/|;|})\s*(?:export|import)\s/m.test(code);
      },
      action: require.resolve('@linaria/shaker'),
    }
  ];
  ```

- `tagResolver: (source, tag) => string`

  A custom function to use when resolving template tags.

  By default, linaria APIs like `css` and `styled` **must** be imported directly from the package – this is because babel needs to be able to recognize the API's to do static style extraction. `tagResolver` allows `css` and `styled` APIs to be imported from other files too.

  `tagResolver` takes the path for the source module (eg. `@linaria/core`) and the name of imported tag (eg. `css`), and returns the full path to the related processor. If `tagResolver` returns `null`, the default tag processor will be used.

  For example, we can use this to map `@linaria/core` , `@linaria/react` or `@linaria/atomic` where we re-export the module.

   ```js
   {
     tagResolver: (source, tag) => {
       const pathToLocalFile = join(__dirname, './my-local-folder/linaria.js');
       if (source === pathToLocalFile) {
         if (tag === 'css') {
           return require.resolve('@linaria/core/processors/css');
         }
  
         if (tag === 'styled') {
           return require.resolve('@linaria/react/processors/styled');
         }
       }
  
       return null;
     };
   }
   ```

  We can then re-export and use linaria API's from `./my-local-folder`:

   ```js
   // my-file.js
   import { css, styled } from './my-local-folder/linaria';

   export const MyComponent = styled.div`
      color: red;
   `;
  
   export default css`
     border: 1px solid black;
   `;
   ```

   ```js
   // ./my-local-folder/core.js
   export * from '@linaria/core';
   ```

- `babelOptions: Object`

  If you need to specify custom babel configuration, you can pass them here. These babel options will be used by Linaria when parsing and evaluating modules.

- `features: Record<string, FeatureFlag>`

  A map of feature flags to enable/disable. See [Feature Flags](./FEATURE_FLAGS.md##feature-flags) for more information.

## `@linaria/babel-preset`

The preset pre-processes and evaluates the CSS. The bundler plugins use this preset under the hood. You also might want to use this preset if you import the components outside of the files handled by your bundler, such as on your server or in unit tests.

To use this preset, add `@linaria/babel-preset` to your Babel configuration at the end of the presets list:

`.babelrc`:

```diff
{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react",
+   "@linaria"
  ]
}
```

The babel preset can accept the same options supported by the configuration file, however it's recommended to use the configuration file directly.

## Preact

If you wish you use Preact, we recommend you to use the `preact-cli` and start from there. The following configuration assumes you are using the default template provided by preact-cli. Start by creating your project using;

```
npx preact-cli create default my-project
```

On top of the default template, you will need to install `@babel/preset-react`. This is because Linaria works with JSX syntax. Otherwise, preact will throw an error saying that `@linaria/webpack-loader` can't parse JSX. Don't forget to install all required `@linaria`-packages!.

After that, your `package.json` should look like the following:

```diff
"devDependencies": {
+   "@babel/preset-react": "^7.8.3",
    "enzyme": "^3.10.0",
    "enzyme-adapter-preact-pure": "^2.0.0",
    "eslint": "^6.0.1",
    "eslint-config-preact": "^1.1.0",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^24.9.0",
    "jest-preset-preact": "^1.0.0",
    "per-env": "^1.0.2",
    "preact-cli": "^3.0.0-rc.6",
    "preact-render-spy": "^1.2.1",
    "sirv-cli": "^0.4.5"
  },
  "dependencies": {
+   "@linaria/babel-preset": "^3.0.0",
+   "@linaria/core": "^3.0.0",
+   "@linaria/react": "^3.0.0",
+   "@linaria/webpack-loader": "^3.0.0",
    "preact": "^10.3.2",
    "preact-render-to-string": "^5.1.4",
    "preact-router": "^3.2.1"
  },
```

> If you wish to work with TypeScript, you will also need to install `@babel/preset-typescript`

Now in your `preact.config.js`, we will modify the babel rule to use the necessary loaders and presets. Add the following:

```js
export default (config) => {
  const { options, ...babelLoaderRule } = config.module.rules[0]; // Get the babel rule and options
  options.presets.push('@babel/preset-react', '@linaria'); // Push the necessary presets
  config.module.rules[0] = {
    ...babelLoaderRule,
    loader: undefined, // Disable the predefined babel-loader on the rule
    use: [
      {
        loader: 'babel-loader',
        options,
      },
      {
        loader: '@linaria/webpack-loader',
        options: {
          babelOptions: options, // Pass the current babel options to linaria's babel instance
        },
      },
    ],
  };
};
```

> If you wish to work with TypeScript, add the `@babel/preset-typescript` preset before `@babel/preset-react`.

After all of that, you should be able to run `npm build`, and it should have no errors.

To test that everthing is working, go to a file, for example `components/Header/index.js`, and create a class name.

```js
import { h } from 'preact';
import { Link } from 'preact-router/match';
import style from './style.css';

import { css } from '@linaria/core';

const className = css`
  color: red;
  font-weight: 800;
`;

const Header = () => (
  <header class={style.header}>
    <h1>Preact App</h1>
    <nav>
      <Link activeClassName={style.active} href="/">
        Home
      </Link>
      <Link activeClassName={style.active} href="/profile">
        Me
      </Link>
      <Link activeClassName={style.active} href="/profile/john">
        John
      </Link>
    </nav>
    <button class={className}>Hello</button> //here I use it
  </header>
);

export default Header;
```

> You can also use the `styled` variant, importing from `@linaria/react`.

If you run `npm run dev`, you should be able to see a button next to the nav title, with red bold text.

You can take a look at this example [here](../examples/Preact)

## Gatsby

If you wish you use Gatsby, we recommend you to use the `gatsby-cli` and start from there. The following configuration assumes you are using the default template provided by gatsby-cli. Start by creating your project using:

```
npx gatsby new my-project
```

Now, you have two options. You can use `gatsby-plugin-linaria` or create a custom config.

### gatsby-plugin-linaria

This is an easier and more straightforward way of integrating Linaria with Gatsby. Check [plugin docs](https://github.com/cometkim/gatsby-plugin-linaria) for instructions.

You can also take a look at the example [here](../examples/gatsby/plugin)

### Custom config

This is a bit more advanced way of integrating Linaria into your Gatsby project.

First, you will need to install `@linaria/babel-preset` and `babel-preset-gatsby`. Then, create `babel.config.js` in the root of your project with the following contents:

```js
module.exports = {
  presets: [
    'babel-preset-gatsby',
    [
      '@linaria',
      {
        evaluate: true,
        displayName: process.env.NODE_ENV !== 'production',
      },
    ],
  ],
};
```

You can read more about configuring Babel in Gatsby projects in [their docs](https://www.gatsbyjs.org/docs/babel/).

Besides that, you will need to alter Gatsby's Webpack config to modify the Babel loader. This can be done in `gatsby-node.js` file. Consider the following snippet:

```js
exports.onCreateWebpackConfig = ({ actions, loaders, getConfig, stage }) => {
  const config = getConfig();

  config.module.rules = [
    ...config.module.rules.filter(
      (rule) => String(rule.test) !== String(/\.js?$/)
    ),

    {
      ...loaders.js(),

      test: /\.js?$/,
      loader: '@linaria/webpack-loader',
      options: {
        sourceMap: stage.includes('develop'),
        displayName: stage.includes('develop'),
        babelOptions: {
          presets: ['babel-preset-gatsby'],
        },
      },
      exclude: /node_modules/,
    },
  ];

  actions.replaceWebpackConfig(config);
};
```

If you want to know more about extending Webpack config in Gatsby projects, check out [relevant Gatsby docs](https://www.gatsbyjs.org/docs/add-custom-webpack-config/).

With that done, you should be all set! You can take a look at the minimal example using the above configuration [here](../examples/gatsby/custom-config).

---

# Linaria Documentation
# Source: https://raw.githubusercontent.com/callstack/linaria/master/docs/CRITICAL_CSS.md
# Path: docs/CRITICAL_CSS.md

# Critical CSS extraction

Since Linaria extracts the CSS statically at build time, you don't need to setup a server rendering. Usually, critical CSS extraction will be automatic if you are code splitting your code and using something like [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin) for webpack to generate your CSS files.

If you're not code splitting, or the initial CSS chunk is not representative of initially rendered content, you might want to extract critical CSS using the `collect` helper we provide to ship the minimal amount of CSS used in the page to the browser. To be able to use the `collect` helper, you need to provide the initial HTML, which usually means that you need to have SSR setup for your web app.

The `collect` method takes some HTML and CSS and gives you the critical CSS:

```js
import { collect } from '@linaria/server';

const { critical, other }  = collect(html, css);
```

For example, in an express app with React, you could do something like the following:

```js
import fs from 'fs';
import express from 'express';
import crypto from 'crypto';
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import { collect } from '@linaria/server';
import App from './App';

const cache = {};
const css = fs.readFileSync('./dist/styles.css', 'utf8');
const app = express();

app.get('/', (req, res) => {
  const html = ReactDOMServer.renderToString(<App />);
  const { critical, other }  = collect(html, css);
  const slug = crypto.createHash('md5').update(other).digest('hex');

  cache[slug] = other;

  res.end(`
    <html lang="en">
      <head>
        <title>App</title>
        <style type="text/css">${critical}</style>
      </head>
      <body>
        <div id="root">
          ${html}
        </div>
        <link rel="css" href="/styles/${slug}" />
      </body>
    </html>
  `);
});

app.get('/styles/:slug', (req, res) => {
  res.type('text/css');
  res.end(cache[req.params.slug])
});

app.listen(3242);
```

By placing the non-critical CSS at the end of `body`, you can make sure that page rendering is not blocked until the CSS is loaded. You can also load the non-critical CSS lazily with JavaScript once the page has loaded for a more efficient strategy. However, it's highly recommended that you take advantage of code splitting in webpack which gives you automatic CSS chunks in addition to critical CSS.

---

# Linaria Documentation
# Source: https://raw.githubusercontent.com/callstack/linaria/master/docs/DYNAMIC_STYLES.md
# Path: docs/DYNAMIC_STYLES.md

# Dynamic styles with `css` tag

Sometimes we have some styles based on component's props or state, or dynamic in some way. If you use the `styled` helper with React, this is automatically handled using CSS custom properties. But we cannot do the same for `css` tags since they aren't linked to any component, and so we don't have access to state and props. However, there are some approaches to tackle this, each with their own limitations.

## Inline styles

Inline styles are the most straightforward way to use dynamic styles. Pass a `style` object with the dynamic styles, and you're done.

```js
import React from 'react';

export function Pager({ index, children }) {
  return (
    <div style={{ transform: `translateX(${index * 100}%)` }}>
      {children}
    </div>
  );
}
```

However, it's not possible to use inline styles with pseudo-selectors or media queries.

## CSS custom properties

[CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) can be used to expose dynamic properties to the CSS.

```js
import React from 'react';
import { css } from '@linaria/core';

const box = css`
  height: var(--box-size);
  width: var(--box-size);
`;

export function Box({ size }) {
  return (
    <div
      className={box}
      style={{ '--box-size': size }}
    />
  );
}
```

The [browser support for CSS custom properties](http://caniuse.com/#feat=css-variables) is limited, and it's not polyfilled. Therefore it's not a viable approach if you need to support older browsers. Worth noting that custom properties cascade, so if you don't override the value for the current element, and a custom property with the same name exists for a parent element, it'll be used instead.

## Data attributes

In cases where you know the values ahead of time, you can use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes) to dynamically switch the styles that are applied.

```js
import React from 'react';
import { css } from '@linaria/core';

const box = css`
  &[data-valid] {
    color: yellow;
  }
  &[data-valid="invalid"] {
    color: red;
  }
  &[data-valid="valid"] {
    color: green;
  }
`

export function Box({ color, valid }) {
  return (
    <div
      className={box}
      data-valid={valid ? 'valid' : 'invalid'}
    />
  );
}
```

## `currentColor`

For color values, browsers support a `currentColor` property which points to the text color of the element. It is well supported in all browsers.

```js
import React from 'react';
import { css } from '@linaria/core';

const box = css`
  background-color: currentColor;
`;

const content = css`
  color: white;
`;

export function Box({ color }) {
  return (
    <div
      className={box}
      style={{ color }}
    >
      <span className={content}>
        ¯\_(ツ)_/¯
      </span>
    </div>
  );
}
```

You cannot use this approach if the dynamic value is not a color, or the element contains some text which needs to be styled with a different color. If the element has children, you will need to reset the `color` property for the text.

---

# Linaria Documentation
# Source: https://raw.githubusercontent.com/callstack/linaria/master/docs/FEATURE_FLAGS.md
# Path: docs/FEATURE_FLAGS.md

# Feature Flags

Feature flags are used to enable or disable specific features provided. The `features` option in the configuration allows you to control the availability of these features.

## Syntax for Specifying Flags

- `true`: Enables the feature for all files.
- `false`: Disables the feature for all files.
- `"glob"`: Enables the feature only for files that match the specified glob pattern.
- `["glob1", "glob2"]`: Enables the feature for files matching any of the specified glob patterns.
- `["glob1", "!glob2"]`: Enables the feature for files matching `glob1` but excludes files that match `glob2`.


# `dangerousCodeRemover` Feature

The `dangerousCodeRemover` is a flag that is enabled by default. It is designed to enhance the static evaluation of values that are interpolated in styles and to optimize the processing of styled-wrapped components during the build stage. This optimization is crucial for maintaining a stable and fast build process. It is important to note that the `dangerousCodeRemover` does not impact the runtime code; it solely focuses on the code used during the build.

## How It Works

During the build process, Linaria statically analyzes the CSS-in-JS codebase and evaluates the styles and values that are being interpolated. The `dangerousCodeRemover` steps in at this stage to remove potentially unsafe code, which includes code that might interact with browser-specific APIs, make HTTP requests, or perform other runtime-specific operations. By removing such code, the evaluation becomes more reliable, predictable, and efficient.

## Benefits

Enabling the `dangerousCodeRemover` feature provides several benefits:

1. **Stability**: The removal of potentially unsafe code ensures that the build process remains stable. It minimizes the chances of encountering build-time errors caused by unsupported browser APIs or non-static operations.

2. **Performance**: Removing unnecessary code results in faster build times. The build tool can efficiently process and evaluate the styles and components without unnecessary overhead, leading to quicker development cycles.

## Fine-Tuning the Removal

While the `dangerousCodeRemover` is highly effective at optimizing the build process, there may be cases where it becomes overly aggressive and removes code that is actually required for your specific use case. In such situations, you have the flexibility to fine-tune the behavior of the remover.

By leveraging the `features` option in the configuration, you can selectively disable the `dangerousCodeRemover` for specific files. This allows you to preserve valuable code that may not be safely evaluated during the build process.

### Example

Suppose you have a file named `specialComponent.js` that contains code that should not be deleted. By adding the following entry to your `features` configuration:

```js
{
  features: {
    dangerousCodeRemover: ["**/*", "!**/specialComponent.js"],
  },
}
```

You are instructing Linaria to exclude the `specialComponent.js` file from the removal process. As a result, any code within this file that would have been removed by the `dangerousCodeRemover` will be retained in the build output.


# `globalCache` Feature

The `globalCache` is enabled by default. Linaria uses two levels of caching to improve the performance of the build process. The first level is used to cache transformation and evaluation results for each `transform` call, usually a single call of Webpack's loader or Vite's transform hook. The second level is used to cache the results of the entire build process. The `globalCache` feature controls the second level of caching. Turning off this feature will result in a slower build process but decreased memory usage.


# `happyDOM` Feature

The `happyDOM` is enabled by default. This feature enables usage of https://github.com/capricorn86/happy-dom to emulate a browser environment during the build process. Typically, the `dangerousCodeRemover` feature should remove all browser-related code. However, some libraries may still contain browser-specific code that cannot be statically evaluated. In such cases, the `happyDOM` feature can be used to emulate a browser environment during the build process. This allows Linaria to evaluate the code without encountering errors caused by missing browser APIs.


# `softErrors` Feature

The `softErrors` is disabled by default. It is designed to provide a more lenient evaluation of styles and values that are interpolated in styles. This flag is useful for debugging and prevents the build from failing even if some files cannot be processed with Linaria.


# 'useBabelConfigs' Feature

The `useBabelConfigs` feature is enabled by default. If it is enabled, Linaria will try to resolve the `.babelrc` file for each processed file. Otherwise, it will use the default Babel configuration from `babelOptions` in the configuration.

Please note that the default value of `useBabelConfigs` will be changed to `false` in the next major release.

---

# Linaria Documentation
# Source: https://raw.githubusercontent.com/callstack/linaria/master/docs/HOW_IT_WORKS.md
# Path: docs/HOW_IT_WORKS.md

# How it works

Linaria consists of 2 parts:

1. Babel plugin
2. Bundler integration

## Babel plugin

The Babel plugin will look for `css` and `styled` tags in your code, extract the CSS out and return it in the file's metadata. It will also generate unique class names based on the hash of the filename.

> To get a deep dive into Linaria babel plugin internals, check [debugging section of Contributing docs](../CONTRIBUTING.md#debugging-and-deep-dive-into-babel-plugin)

When using the `styled` tag, dynamic interpolations will be replaced with CSS custom properties. References to constants in the scope will also be inlined. If the same expression is used multiple times, the plugin will create a single CSS custom property for those.

The interpolations used for the CSS custom properties are left in the file, and are passed to the helper which creates the React components. Function interpolations receive the component's props and their return value will be used as the value for the CSS custom property. For other expressions, their result is used as is. If the resulting values aren't strings, they'll be converted to a string before setting the property. Inline styles are used to set the custom properties.

For example, the plugin will transpile this:

```js
import { styled } from '@linaria/react';
import { families, sizes } from './fonts';

const background = 'yellow';

const Title = styled.h1`
  font-family: ${families.serif};
`;

const Container = styled.div`
  font-size: ${sizes.medium}px;
  background-color: ${background};
  color: ${props => props.color};
  width: ${100 / 3}%;
  border: 1px solid red;

  &:hover {
    border-color: blue;
  }
`;
```

To this:

```js
import { styled } from '@linaria/react';
import { families, sizes } from './fonts';

const background = 'yellow';

const Title = styled('h1')({
  name: 'Title',
  class: 'Title_t1ugh8t',
  vars: {
    't1ugh8t9-0': [families.serif],
  },
});

const Container = styled('div')({
  name: 'Container',
  class: 'Container_c1ugh8t',
  vars: {
    'c1ugh8t9-0': [sizes.medium, 'px'],
    'c1ugh8t9-2': [props => props.color],
  },
});
```

The extracted CSS will look something like this:

```css
.Title_t1ugh8t9 {
  font-family: var(--t1ugh8t-0);
}

.Container_c1ugh8t9 {
  font-size: var(--c1ugh8t-0);
  background-color: yellow;
  color: var(--c1ugh8t-2);
  width: 33.333333333333336%;
  border: 1px solid red;
}

.Container_c1ugh8t9:hover {
  border-color: blue;
}
```

If we encounter a valid unit directly after the interpolation, it'll be passed to the helper so that the correct unit is used when setting the property. This allows you to write this:

```js
const Title = styled.h1`
  font-size: ${large}px;
`;
```

Instead of having to write this:

```js
const Title = styled.h1`
  font-size: ${large + 'px'};
`;
```

It's necessary since if we just replaced the interpolation as is, it wouldn't be a valid syntax:

```css
.Title_t1ugh8t9 {
  font-size: var(--t1ugh8t9-0-0)px; /* you can't have 'px' after the `var(..)` */
}
```

If we encounter a JS object when inlining, the JS object is assumed to be a style rule and converted to a CSS string before inlining it. For example, if you write this:

```js
const absoluteFill = {
  position: 'absolute',
  top: 0,
  right: 0,
  bottom: 0,
  left: 0,
};

const Container = styled.h1`
  background-color: papayawhip;

  ${Box} {
    ${absoluteFill}
  }
`;
```

It is equivalent to writing this:

```js
const Container = styled.h1`
  background-color: papayawhip;

  ${Box} {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
`;
```

We support this usage because it allows you to use a library such as [polished.js](https://polished.js.org) which outputs object based styles along with Linaria.

If you've configured the plugin to evaluate expressions with `evaluate: true` (default), any dynamic expressions we encounter will be evaluated during the build-time in a sandbox, and the result will be included in the CSS. Since these expressions are evaluated at build time in Node, you cannot use any browser specific APIs or any API which is only available in runtime. Access to Node native modules such as `fs` is also not allowed inside the sandbox to prevent malicious scripts. In addition, to achieve consistent build output, you should also avoid doing any side effects in these expressions and keep them pure.

You might want to skip evaluating a certain interpolation if you're using a browser API, a global variable which is only available at runtime, or a module which breaks when evaluating in the sandbox for some reason. To skip evaluating an interpolation, you can always wrap it in a function, like so:

```js
const Box = styled.h1`
  height: ${() => window.innerHeight * 2};
`;
```

But keep in mind that if you're doing SSR for your app, this won't work with SSR. In this particular case, better option will be to use the `calc` function along with the `vh` unit for the viewport height (e.g. `calc(100vh * 2)`).

### Evaluators

Linaria can use different strategies for evaluating the interpolated values.
Currently, we have two built-in strategies:

- `extractor` was the default strategy in `1.x` version. It takes an interpolated expression, finds all the referenced identifiers, gets all its declarations, repeats cycle for all identifiers in found declarations, and then constructs a new tree of statements from all found declarations. It's a pretty simple strategy, but it significantly changes an evaluated code and doesn't work for non-primitive js-constructions.
- `shaker` was introduced as an option in `1.4` and became the default in `2.0` version. In contrast to `extractor`, `shaker` tries to find all irrelevant code and cuts it out of the file. As a result, interpolated values can be defined without any restrictions.

If an interpolated value or one of its dependencies is imported from another module, that module will be also processed with an evaluator (the implementation of evaluator will be chosen by matching `rules` from [the Linaria config](./CONFIGURATION.md#options)).

Sometimes it can be useful to implement your own strategy (it can be just a mocked version of some heavy or browser-only library). You can do it by implementing `Evaluator` function:

```typescript
type Evaluator = (
  filename: string, // the name of processed file
  options: StrictOptions, // Linaria config
  text: string, // source code
  only: string[] | null // list of exported values or `null` for everything
) => [string, Map<string, string[]> | null];
```

The function should return an array with two elements: source code prepared for evaluation and `Map` with imported files in keys and list of the identifiers in values.

## Bundler integration

Plugins for bundlers such as webpack and Rollup use the Babel plugin internally and write the CSS text along with the sourcemap to a CSS file. The CSS file is then picked up and processed by the bundler (e.g. - `css-loader` in case of webpack) to generate the final CSS.

---

# Linaria Documentation
# Source: https://raw.githubusercontent.com/callstack/linaria/master/docs/LINTING.md
# Path: docs/LINTING.md

# Linting

There are separate installations based on whether you use stylelint v13 or stylelint v14

## Stylelint 13

For linting styles with [stylelint 13](https://stylelint.io/), use `@linaria/stylelint`.

### Installation

Install `stylelint` and optionally your favorite config (such as `stylelint-config-recommended`) in your project:

```bash
yarn add --dev stylelint stylelint-config-recommended @linaria/stylelint
```

### Configuring stylelint

All you need to do is to set your config to extend from `@linaria/stylelint`.

Here's the example `.stylelintrc` configuration file:

```json
{
  "extends": [
    "stylelint-config-recommended",
    "@linaria/stylelint"
  ]
}
```

Please refer to the [official stylelint documentation](https://stylelint.io/user-guide/configuration/) for more info about configuration.

The preprocessor will use the [options from the configuration file](/docs/CONFIGURATION.md) for processing your files.

## Stylelint 14

For linting styles with [stylelint 14](https://stylelint.io/), use `@linaria/stylelint-config-standard-linaria`.

### Installation

Install `stylelint` and `@linaria/stylelint-config-standard-linaria`

```bash
yarn add --dev stylelint @linaria/stylelint-config-standard-linaria
```

### Configuring stylelint

For the standard configuration you can extend from `@linaria/stylelint-config-standard-linaria`.

Here's an example `.stylelintrc` configuration file:

```json
{
  "extends": [
    "@linaria/stylelint-config-standard-linaria"
  ]
}
```

`@linaria/stylelint-config-standard-linaria` extends `stylelint-config-standard` which extends `stylelint-config-recommended` so you do NOT need to add those separately.  It also sets the customSyntax as `@linaria/postcss-linaria` and adds a few rules.

Alternatively, to just use the custom syntax you can add `@linaria/postcss-linaria`
Here's an example `.stylelintrc` configuration file:

```json
{
  "customSyntax": "@linaria/postcss-linaria"
}
```

Please refer to the [official stylelint documentation](https://stylelint.io/user-guide/configuration/) for more info about configuration.

### Why did the configuration change between Stylelint v13 and v14?

Stylelint 14 encourages the use of a [custom syntax](https://stylelint.io/developer-guide/syntaxes/) instead of a processor. `@linaria/stylelint-config-standard-linaria` sets the custom syntax to `@linaria/postcss-linaria`, a custom syntax for linaria, whereas @linaria/stylelint uses a processor.  The custom syntax has the benefit of being able to support `stylelint --fix` whereas the processor cannot.

## Usage

### Linting your files

Add the following to your `package.json` scripts:

```json
"lint:css": "stylelint src/**/*.js"
```

Now, you can run `yarn lint:css` to lint the CSS in your JS files with stylelint.

For more information refer to [stylelint documentation](https://stylelint.io/user-guide/cli/).

## Editor Setup

In order to make the
[vscode-stylelint](https://github.com/stylelint/vscode-stylelint)
extension work with this syntax correctly, you must configure it
to validate the files you use linaria in by specifying an array of [language 
identifiers](https://code.visualstudio.com/docs/languages/overview#_changing-the-language-for-the-selected-file).

You can do this by following these
[instructions](https://github.com/stylelint/vscode-stylelint#stylelintvalidate).

For example:

```json
{
  "stylelint.validate": ["typescriptreact"]
}
```

---

# Linaria Documentation
# Source: https://raw.githubusercontent.com/callstack/linaria/master/docs/MIGRATION_GUIDE.md
# Path: docs/MIGRATION_GUIDE.md

# Migration Guide

# 6.x from 5.x, 4.x, 3.x

## For Users

The main breaking change is that all tooling has been moved from the `@linaria` scope to the `@wyw-in-js` scope. This means that you will need to update your dependencies as follows:

| Old | New
| --- | ---
|@linaria/babel-preset | @wyw-in-js/babel-preset
|@linaria/cli | @wyw-in-js/cli
|@linaria/esbuild | @wyw-in-js/esbuild
|@linaria/rollup | @wyw-in-js/rollup
|@linaria/shaker | discontinued
|@linaria/vite | @wyw-in-js/vite
|@linaria/webpack4-loader | discontinued
|@linaria/webpack5-loader | @wyw-in-js/webpack-loader

There is no longer a need to install `@linaria/shaker` as it is now part of `@wyw-in-js/transform`, which will be installed automatically with the bundler plugins.

The configuration file has been renamed from `linaria.config.js` (`linariarc`) to `wyw-in-js.config.js` (`.wyw-in-jsrc`).

## For Custom Processor Developers

Base classes for processors and most helpers have been moved to `@wyw-in-js/processor-utils`.

All APIs that had `linaria` in their names have been renamed:

- The field that stores meta information in runtime has been renamed from `__linaria` to `__wyw_meta`
- The export with all interpolated values has been renamed from `__linariaPreval` to `__wywPreval`
- The caller name in Babel has been renamed from `linaria` to `wyw-in-js`

For additional information, please visit the [wyw-in-js.dev](https://wyw-in-js.dev).

# 4.x, 3.x from 2.x

This release was mostly a refactor to [split into more packages](https://github.com/callstack/linaria/pull/687/).

## Breaking changes

All these package imports in code need to be updated:

| Old | New
| --- | ---
|linaria | @linaria/core
|linaria/loader | @linaria/webpack4-loader, @linaria/webpack5-loader
|linaria/react | @linaria/react
|linaria/rollup | @linaria/rollup
|linaria/server | @linaria/server
|linaria/stylelint-config | @linaria/stylelint


The `shaker` evaluator has moved from `linaria/evaluators` into its own package. You'll need to add `@linaria/shaker` to your package.json even if you never import it.

The Babel preset moved from `linaria/babel` to `@linaria/babel-preset` but has to be referenced as `@linaria` in a Babel config. See https://github.com/callstack/linaria/issues/704


In package.json import all the new packages you use.

# 2.x from 1.x

## Breaking changes

### `Core-js` dependency removal and _theoretical_ drop compatibility for `node` below `10`

In [#569](https://github.com/callstack/linaria/pull/569) We removed `core-js` dependency.

It should not effectively affect your users or build pipelines. But it was technically a breaking change.

We set babel preset that makes all non-browser dependencies compatible with `node` from version `10`. But previous setup was using `browser` env so If you was able to build Linaria with previous versions of node, it should work also now. Support for browsers environment didn't change.

After that you should be able to solve issues with `core-js` dependency in your project, because it will no longer collide with version used by Linaria.

### The default [evaluation strategy](./HOW_IT_WORKS.md#evaluators) has been changed to `shaker` 

It should not affect existed code since the new strategy is more powerful, but you can always switch to the old one by adding the next `rules` section to your Linaria-config:
```js
  [
    {
      action: require('linaria/evaluators').extractor,
    },
    {
      test: /\/node_modules\//,
      action: 'ignore',
    },
  ]
```

---

# Linaria Documentation
# Source: https://raw.githubusercontent.com/callstack/linaria/master/docs/THEMING.md
# Path: docs/THEMING.md

# Theming

There are several approaches you can use for theming. Depending on the browser support and requirements, you can pick the approach that suits you the best.

## CSS custom properties

CSS custom properties aka CSS variables are one of the best ways to apply a theme to your web app. The basic concept is that we add a class name to represent the theme to our root element, and use different values for our CSS variables based on the theme:

```js
// Create class names for different themes
const a = css`
  --color-primary: #6200ee;
  --color-accent: #03dac4;
`;

const b = css`
  --color-primary: #03a9f4;
  --color-accent: #e91e63;
`;

// Apply a theme to the root element
<Container className={a} />;
```

Now, we can use these variables in any of the child elements:

```js
const Button = styled.button`
  background-color: var(--color-accent);
`;
```

CSS custom properties are [not supported in some browsers such as IE](http://caniuse.com/#feat=css-variables), so if you need to support those browsers, this is not a viable approach.

## Class names

Another approach is to add a class name representing the theme (e.g. - `theme-dark`) in the root element, and take advantage of CSS child selectors to theme the elements based on this parent class name.

For example, let's add the theme to the root component:

```js
<Container className="theme-dark" />
```

Now, we can conditionally style any child element according to the theme:

```js
const Header = styled.h1`
  text-transform: uppercase;

  .theme-dark & {
    color: white;
  }

  .theme-light & {
    color: black;
  }
`;
```

You could even make some helpers to make writing this easier:

```js
// Put your colors in an object grouped by the theme names
const colors = {
  light: {
    text: 'black',
  },
  dark: {
    text: 'white',
  },
};

// Create a small helper function to loop over the themes and create CSS rule sets
const theming = cb =>
  Object.keys(colors).reduce((acc, name) => Object.assign(acc, {
    [`.theme-${name} &`]: cb(colors[name]),
  }), {});

// Use the helper in your styles
const Header = styled.h1`
  text-transform: uppercase;

  ${theming(c => ({
    color: c.text,
  }))};
`;
```

This approach works in all browsers, and is the best approach if you want to support older browsers without support for CSS custom properties.

## React Context

Another approach is to use React Context to pass down colors, and then use function interpolations with the `styled` tag to use the colors in your component. You could use something like [`@callstack/react-theme-provider`](https://github.com/callstack/react-theme-provider) or write your own HOC. Then use it like:

```js
const Button = withTheme(styled.button`
  background-color: ${props => props.theme.accent};
`);
```

Note that this approach also uses CSS custom properties under the hood since function interpolations compile down to CSS custom properties. So the browser support is limited.

---

# Linaria Documentation
# Source: https://raw.githubusercontent.com/callstack/linaria/master/README.md
# Path: README.md

<a href="https://www.callstack.com/open-source" align="center">
  <img alt="Linaria" src="https://github.com/user-attachments/assets/746f7b2a-8136-47a7-b79b-e790c1974e40">
</a>

<p align="center">
Zero-runtime CSS in JS library.
</p>

---

[![Build Status][build-badge]][build]
[![Code Coverage][coverage-badge]][coverage]
[![Version][version-badge]][package]
[![MIT License][license-badge]][license]

[![All Contributors][all-contributors-badge]](#contributors)
[![PRs Welcome][prs-welcome-badge]][prs-welcome]
[![Chat][chat-badge]][chat]
[![Code of Conduct][coc-badge]][coc]
[![Greenkeeper][greenkeeper-badge]][greenkeeper]
[![Sponsored by Callstack][callstack-badge]][callstack]

[![tweet][tweet-badge]][tweet]

## 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](https://github.com/stylelint/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`

**[Why use Linaria](/docs/BENEFITS.md)**

**[Learn how Airbnb improved both developer experience and web performance with Linaria](https://medium.com/airbnb-engineering/airbnbs-trip-to-linaria-dc169230bd12)**

## Installation

```sh
npm install @linaria/core @linaria/react @wyw-in-js/babel-preset
```

or

```sh
yarn add @linaria/core @linaria/react @wyw-in-js/babel-preset
```

## Setup

Linaria is now built on top of [wyw-in-js.dev](https://wyw-in-js.dev/). It supports various bundlers to extract the CSS at build time. To configure your bundler, check the following guides on the wyw-in-js.dev site:

- [webpack](https://wyw-in-js.dev/bundlers/webpack)
- [esbuild](https://wyw-in-js.dev/bundlers/esbuild)
- [Rollup](https://wyw-in-js.dev/bundlers/rollup)
- [Vite](https://wyw-in-js.dev/bundlers/vite)
- [Svelte](https://wyw-in-js.dev/bundlers/svelte)

See [Configuration](https://wyw-in-js.dev/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:

```js
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](https://reactjs.org/), you can use the `styled` helper, which makes it easy to write React components with dynamic styles with a styled-component like syntax:

```js
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.

See [Basics](/docs/BASICS.md) for a detailed information about the syntax.

## Demo

[![Edit Linaria Demo](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/linaria-react-vite-ts-qyj5xd)

## Documentation

- [Basics](/docs/BASICS.md)
- [API and usage](/docs/API.md)
  - [Client APIs](/docs/API.md#client-apis)
  - [Server APIs](/docs/API.md#server-apis)
- [Configuration](/docs/CONFIGURATION.md)
- [Dynamic styles with `css` tag](/docs/DYNAMIC_STYLES.md)
- [Theming](/docs/THEMING.md)
- [Critical CSS extraction](/docs/CRITICAL_CSS.md)
- [Bundlers integration](/docs/BUNDLERS_INTEGRATION.md)
  - [webpack](/docs/BUNDLERS_INTEGRATION.md#webpack)
  - [Rollup](/docs/BUNDLERS_INTEGRATION.md#rollup)
- [CLI](/docs/CLI.md)
- [Linting](/docs/LINTING.md)
- [How it works](/docs/HOW_IT_WORKS.md)
- [Example](/website)

## Contributing

We appreciate any support in library development!

Take a look on [Contributing](CONTRIBUTING.md) docs to check how you can run Linaria in development mode.

## 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](/docs/DYNAMIC_STYLES.md) for alternative approaches.
- Modules used in the CSS rules cannot have side-effects.
  For example:

  ```js
  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.

## Interoperability with other CSS-in-JS libraries

Linaria can work together with other CSS-in-JS libraries out-of-the-box. However, if you want to use styled components from Linaria as selectors in `styled-components`/`emotion`, you need to use [@linaria/interop](/packages/interop/README.md)    

## Editor Plugins

### VSCode

- Syntax Highlighting - [language-babel](https://marketplace.visualstudio.com/items?itemName=mgmcdermott.vscode-language-babel)
- Autocompletion - [vscode-styled-components](https://marketplace.visualstudio.com/items?itemName=styled-components.vscode-styled-components)
- Linting - [stylelint](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint)

### Atom

- Syntax Highlighting and Autocompletion - [language-babel](https://atom.io/packages/language-babel)

### Webstorm

- Syntax Highlighting & Autocompletion - [webstorm-styled-components](https://github.com/styled-components/webstorm-styled-components)

### Sublime Text

- Syntax Highlighting & Autocompletion - [Naomi](https://packagecontrol.io/packages/Naomi), [JSCustom](https://packagecontrol.io/packages/JSCustom) (refer to document on how to turn on Styled Component syntax)
- Linting - [SublimeLinter-stylelint](https://packagecontrol.io/packages/SublimeLinter-stylelint), [LSP Stylelint](https://packagecontrol.io/packages/LSP-stylelint)

## Recommended Libraries

- [gatsby-plugin-linaria](https://github.com/cometkim/gatsby-plugin-linaria) – Gatsby plugin that sets up Babel and webpack configuration for Linaria.
- [polished.js](https://polished.js.org/) - A lightweight toolset for writing styles in JavaScript.
- [craco-linaria](https://github.com/jedmao/craco-linaria) - A [Craco](https://www.npmjs.com/package/@craco/craco) plugin that allows you to use Linaria [without ejecting](https://create-react-app.dev/docs/alternatives-to-ejecting) from a [CRA](https://create-react-app.dev/).

## Inspiration

- [glam](https://github.com/threepointone/glam)
- [styled-components](https://github.com/styled-components/styled-components)
- [css-literal-loader](https://github.com/4Catalyzer/css-literal-loader)

## Acknowledgements

This project wouldn't have been possible without the following libraries or the people behind them.

- [babel](https://babeljs.io/)
- [stylis.js](https://github.com/thysultan/stylis.js)

Special thanks to [@kentcdodds](https://github.com/kentcdodds) for his babel plugin and [@threepointone](https://github.com/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](https://callstack.com) is a group of React and React Native geeks, contact us at [hello@callstack.com](mailto:hello@callstack.com) if you need any help with these or just want to say hi!

Like the project? ⚛️ [Join the team](https://callstack.com/careers/?utm_campaign=Senior_RN&utm_source=github&utm_medium=readme) who does amazing stuff for clients and drives React Native Open Source! 🔥

## Sponsors

<p>
  <a href="https://www.callstack.com"><img alt="{callstack}" src="website/assets/callstack-logo.svg" width="250"></a>
</p>
<p>
  <a href="https://www.servers.com"><img alt="Servers.com" src="website/assets/serverscom-logo-black.svg" width="250"></a>
</p>

## Contributors

Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore-start -->
<!-- markdownlint-disable -->
<table>
  <tbody>
    <tr>
      <td align="center"><a href="https://twitter.com/_zamotany"><img src="https://avatars2.githubusercontent.com/u/17573635?v=4?s=100" width="100px;" alt="Paweł Trysła"/><br /><sub><b>Paweł Trysła</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=zamotany" title="Code">💻</a> <a href="https://github.com/callstack/linaria/commits?author=zamotany" title="Documentation">📖</a> <a href="#ideas-zamotany" title="Ideas, Planning, & Feedback">🤔</a></td>
      <td align="center"><a href="https://medium.com/@satya164"><img src="https://avatars2.githubusercontent.com/u/1174278?v=4?s=100" width="100px;" alt="Satyajit Sahoo"/><br /><sub><b>Satyajit Sahoo</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=satya164" title="Code">💻</a> <a href="https://github.com/callstack/linaria/commits?author=satya164" title="Documentation">📖</a> <a href="#ideas-satya164" title="Ideas, Planning, & Feedback">🤔</a></td>
      <td align="center"><a href="https://github.com/thymikee"><img src="https://avatars2.githubusercontent.com/u/5106466?v=4?s=100" width="100px;" alt="Michał Pierzchała"/><br /><sub><b>Michał Pierzchała</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=thymikee" title="Code">💻</a> <a href="https://github.com/callstack/linaria/commits?author=thymikee" title="Documentation">📖</a> <a href="#ideas-thymikee" title="Ideas, Planning, & Feedback">🤔</a></td>
      <td align="center"><a href="https://lcs.sh"><img src="https://avatars1.githubusercontent.com/u/1909761?v=4?s=100" width="100px;" alt="Lucas"/><br /><sub><b>Lucas</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=AgtLucas" title="Documentation">📖</a></td>
      <td align="center"><a href="https://github.com/pronevich"><img src="https://avatars0.githubusercontent.com/u/680439?v=4?s=100" width="100px;" alt="Alexey Pronevich"/><br /><sub><b>Alexey Pronevich</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=pronevich" title="Documentation">📖</a></td>
      <td align="center"><a href="https://github.com/wojteg1337"><img src="https://avatars3.githubusercontent.com/u/18573330?v=4?s=100" width="100px;" alt="Wojtek Szafraniec"/><br /><sub><b>Wojtek Szafraniec</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=wojteg1337" title="Code">💻</a></td>
      <td align="center"><a href="http://twitter.com/anber_dev"><img src="https://avatars3.githubusercontent.com/u/148258?v=4?s=100" width="100px;" alt="Anton Evzhakov"/><br /><sub><b>Anton Evzhakov</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=Anber" title="Code">💻</a> <a href="#ideas-Anber" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/callstack/linaria/commits?author=Anber" title="Documentation">📖</a></td>
    </tr>
    <tr>
      <td align="center"><a href="https://twitter.com/tushkiz"><img src="https://avatars1.githubusercontent.com/u/1854763?v=4?s=100" width="100px;" alt="Tushar Sonawane"/><br /><sub><b>Tushar Sonawane</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=Tushkiz" title="Documentation">📖</a> <a href="#example-Tushkiz" title="Examples">💡</a></td>
      <td align="center"><a href="http://twitter.com/ferrannp"><img src="https://avatars2.githubusercontent.com/u/774577?v=4?s=100" width="100px;" alt="Ferran Negre"/><br /><sub><b>Ferran Negre</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=ferrannp" title="Documentation">📖</a></td>
      <td align="center"><a href="https://jukben.cz"><img src="https://avatars3.githubusercontent.com/u/8135252?v=4?s=100" width="100px;" alt="Jakub Beneš"/><br /><sub><b>Jakub Beneš</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=jukben" title="Code">💻</a> <a href="https://github.com/callstack/linaria/commits?author=jukben" title="Documentation">📖</a></td>
      <td align="center"><a href="https://github.com/oBusk"><img src="https://avatars2.githubusercontent.com/u/13413409?v=4?s=100" width="100px;" alt="Oscar Busk"/><br /><sub><b>Oscar Busk</b></sub></a><br /><a href="https://github.com/callstack/linaria/issues?q=author%3AoBusk" title="Bug reports">🐛</a> <a href="https://github.com/callstack/linaria/commits?author=oBusk" title="Code">💻</a></td>
      <td align="center"><a href="https://github.com/Trancever"><img src="https://avatars3.githubusercontent.com/u/18584155?v=4?s=100" width="100px;" alt="Dawid"/><br /><sub><b>Dawid</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=Trancever" title="Code">💻</a> <a href="https://github.com/callstack/linaria/commits?author=Trancever" title="Documentation">📖</a></td>
      <td align="center"><a href="https://twitter.com/esemesek"><img src="https://avatars2.githubusercontent.com/u/9092510?v=4?s=100" width="100px;" alt="Kacper Wiszczuk"/><br /><sub><b>Kacper Wiszczuk</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=Esemesek" title="Code">💻</a> <a href="https://github.com/callstack/linaria/commits?author=Esemesek" title="Documentation">📖</a></td>
      <td align="center"><a href="https://github.com/que-etc"><img src="https://avatars3.githubusercontent.com/u/2401842?v=4?s=100" width="100px;" alt="Denis Rul"/><br /><sub><b>Denis Rul</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=que-etc" title="Code">💻</a></td>
    </tr>
    <tr>
      <td align="center"><a href="https://github.com/johanholmerin"><img src="https://avatars0.githubusercontent.com/u/7433263?v=4?s=100" width="100px;" alt="Johan Holmerin"/><br /><sub><b>Johan Holmerin</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=johanholmerin" title="Code">💻</a> <a href="https://github.com/callstack/linaria/commits?author=johanholmerin" title="Documentation">📖</a></td>
      <td align="center"><a href="https://www.giladpeleg.com/"><img src="https://avatars0.githubusercontent.com/u/4533329?v=4?s=100" width="100px;" alt="Gilad Peleg"/><br /><sub><b>Gilad Peleg</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=pgilad" title="Documentation">📖</a></td>
      <td align="center"><a href="http://giuseppe.pizza"><img src="https://avatars3.githubusercontent.com/u/711311?v=4?s=100" width="100px;" alt="Giuseppe"/><br /><sub><b>Giuseppe</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=giuseppeg" title="Code">💻</a></td>
      <td align="center"><a href="https://silvenon.com"><img src="https://avatars2.githubusercontent.com/u/471278?v=4?s=100" width="100px;" alt="Matija Marohnić"/><br /><sub><b>Matija Marohnić</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=silvenon" title="Code">💻</a> <a href="https://github.com/callstack/linaria/commits?author=silvenon" title="Documentation">📖</a></td>
      <td align="center"><a href="http://schultstefan.de"><img src="https://avatars2.githubusercontent.com/u/120432?v=4?s=100" width="100px;" alt="Stefan Schult"/><br /><sub><b>Stefan Schult</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=Schubidu" title="Code">💻</a></td>
      <td align="center"><a href="http://www.coding-tech.be"><img src="https://avatars3.githubusercontent.com/u/1120926?v=4?s=100" width="100px;" alt="Ward Peeters"/><br /><sub><b>Ward Peeters</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=wardpeet" title="Code">💻</a></td>
      <td align="center"><a href="https://github.com/radoslaw-medryk"><img src="https://avatars0.githubusercontent.com/u/43260833?v=4?s=100" width="100px;" alt="radoslaw-medryk"/><br /><sub><b>radoslaw-medryk</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=radoslaw-medryk" title="Code">💻</a></td>
    </tr>
    <tr>
      <td align="center"><a href="http://dr2009.com"><img src="https://avatars1.githubusercontent.com/u/8262650?v=4?s=100" width="100px;" alt="杨兴洲"/><br /><sub><b>杨兴洲</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=dr2009" title="Code">💻</a></td>
      <td align="center"><a href="https://github.com/hinok"><img src="https://avatars2.githubusercontent.com/u/1313605?v=4?s=100" width="100px;" alt="Dawid Karabin"/><br /><sub><b>Dawid Karabin</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=hinok" title="Documentation">📖</a></td>
      <td align="center"><a href="https://github.com/chrisabrams"><img src="https://avatars1.githubusercontent.com/u/527740?s=460&v=4?s=100" width="100px;" alt="Chris Abrams"/><br /><sub><b>Chris Abrams</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=chrisabrams" title="Code">💻</a> <a href="https://github.com/callstack/linaria/commits?author=chrisabrams" title="Documentation">📖</a> <a href="#ideas-chrisabrams" title="Ideas, Planning, & Feedback">🤔</a></td>
      <td align="center"><a href="http://hyperlab.se"><img src="https://avatars0.githubusercontent.com/u/329184?v=4?s=100" width="100px;" alt="Jayphen"/><br /><sub><b>Jayphen</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=Jayphen" title="Code">💻</a></td>
      <td align="center"><a href="https://github.com/bolasblack"><img src="https://avatars0.githubusercontent.com/u/382011?v=4?s=100" width="100px;" alt="c4605"/><br /><sub><b>c4605</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=bolasblack" title="Code">💻</a></td>
      <td align="center"><a href="https://koba04.com/"><img src="https://avatars2.githubusercontent.com/u/250407?v=4?s=100" width="100px;" alt="Toru Kobayashi"/><br /><sub><b>Toru Kobayashi</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=koba04" title="Code">💻</a></td>
      <td align="center"><a href="https://github.com/jayu"><img src="https://avatars.githubusercontent.com/u/11561585?v=4?s=100" width="100px;" alt="Jakub Mazurek"/><br /><sub><b>Jakub Mazurek</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=jayu" title="Code">💻</a></td>
    </tr>
    <tr>
      <td align="center"><a href="http://subsecond.dev/"><img src="https://avatars.githubusercontent.com/u/1518604?v=4?s=100" width="100px;" alt="Joshua Nelson"/><br /><sub><b>Joshua Nelson</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=jpnelson" title="Code">💻</a> <a href="#ideas-jpnelson" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/callstack/linaria/commits?author=jpnelson" title="Documentation">📖</a></td>
      <td align="center"><a href="https://twitter.com/TMaszko"><img src="https://avatars.githubusercontent.com/u/16257732?v=4?s=100" width="100px;" alt="Tomasz Krzyżowski"/><br /><sub><b>Tomasz Krzyżowski</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=TMaszko" title="Code">💻</a></td>
      <td align="center"><a href="https://www.slash-m.com/"><img src="https://avatars.githubusercontent.com/u/1476435?v=4?s=100" width="100px;" alt="Martin Schulze"/><br /><sub><b>Martin Schulze</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=dfrkp" title="Code">💻</a></td>
      <td align="center"><a href="https://github.com/wmzy"><img src="https://avatars.githubusercontent.com/u/5526525?v=4?s=100" width="100px;" alt="wmzy"/><br /><sub><b>wmzy</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=wmzy" title="Code">💻</a></td>
      <td align="center"><a href="https://blog.cometkim.kr/"><img src="https://avatars.githubusercontent.com/u/9696352?v=4?s=100" width="100px;" alt="Hyeseong Kim"/><br /><sub><b>Hyeseong Kim</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=cometkim" title="Code">💻</a></td>
      <td align="center"><a href="https://github.com/Hotell"><img src="https://avatars.githubusercontent.com/u/1223799?v=4?s=100" width="100px;" alt="Martin Hochel"/><br /><sub><b>Martin Hochel</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=Hotell" title="Code">💻</a></td>
      <td align="center"><a href="https://d.sb/"><img src="https://avatars.githubusercontent.com/u/91933?v=4?s=100" width="100px;" alt="Daniel Lo Nigro"/><br /><sub><b>Daniel Lo Nigro</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=Daniel15" title="Code">💻</a></td>
    </tr>
    <tr>
      <td align="center"><a href="https://github.com/0xflotus"><img src="https://avatars.githubusercontent.com/u/26602940?v=4?s=100" width="100px;" alt="0xflotus"/><br /><sub><b>0xflotus</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=0xflotus" title="Code">💻</a></td>
      <td align="center"><a href="https://github.com/afzalsayed96"><img src="https://avatars.githubusercontent.com/u/14029371?v=4?s=100" width="100px;" alt="Afzal Sayed"/><br /><sub><b>Afzal Sayed</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=afzalsayed96" title="Code">💻</a></td>
      <td align="center"><a href="https://github.com/aiji42"><img src="https://avatars.githubusercontent.com/u/6711766?v=4?s=100" width="100px;" alt="AijiUejima"/><br /><sub><b>AijiUejima</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=aiji42" title="Code">💻</a></td>
      <td align="center"><a href="https://leopard.in.ua/"><img src="https://avatars.githubusercontent.com/u/98444?v=4?s=100" width="100px;" alt="Oleksii Vasyliev"/><br /><sub><b>Oleksii Vasyliev</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=le0pard" title="Code">💻</a></td>
      <td align="center"><a href="https://github.com/alicanerdogan"><img src="https://avatars.githubusercontent.com/u/1814803?v=4?s=100" width="100px;" alt="Alican Erdoğan"/><br /><sub><b>Alican Erdoğan</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=alicanerdogan" title="Code">💻</a></td>
      <td align="center"><a href="https://amank.me/"><img src="https://avatars.githubusercontent.com/u/3933028?v=4?s=100" width="100px;" alt="Aman Kubanychbek"/><br /><sub><b>Aman Kubanychbek</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=amankkg" title="Code">💻</a></td>
      <td align="center"><a href="http://kinetifex.com/"><img src="https://avatars.githubusercontent.com/u/82775?v=4?s=100" width="100px;" alt="Andrew Gerard"/><br /><sub><b>Andrew Gerard</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=kinetifex" title="Code">💻</a></td>
    </tr>
    <tr>
      <td align="center"><a href="https://www.linkedin.com/in/andrey-frolov-3b8579155/"><img src="https://avatars.githubusercontent.com/u/30667180?v=4?s=100" width="100px;" alt="Andrey Frolov"/><br /><sub><b>Andrey Frolov</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=frolovdev" title="Code">💻</a></td>
      <td align="center"><a href="https://github.com/soluml"><img src="https://avatars.githubusercontent.com/u/589571?v=4?s=100" width="100px;" alt="Benjamin Solum"/><br /><sub><b>Benjamin Solum</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=soluml" title="Code">💻</a></td>
      <td align="center"><a href="https://billykwok.me/"><img src="https://avatars.githubusercontent.com/u/8078716?v=4?s=100" width="100px;" alt="Billy Kwok"/><br /><sub><b>Billy Kwok</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=billykwok" title="Code">💻</a></td>
      <td align="center"><a href="https://github.com/chrstntdd"><img src="https://avatars.githubusercontent.com/u/17863654?v=4?s=100" width="100px;" alt="Christian Todd"/><br /><sub><b>Christian Todd</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=chrstntdd" title="Code">💻</a></td>
      <td align="center"><a href="https://estii.com/"><img src="https://avatars.githubusercontent.com/u/128329?v=4?s=100" width="100px;" alt="David Peek"/><br /><sub><b>David Peek</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=dpeek" title="Code">💻</a></td>
      <td align="center"><a href="https://github.com/dskiba"><img src="https://avatars.githubusercontent.com/u/28356785?v=4?s=100" width="100px;" alt="Denis Skiba"/><br /><sub><b>Denis Skiba</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=dskiba" title="Code">💻</a></td>
      <td align="center"><a href="https://github.com/geakstr"><img src="https://avatars.githubusercontent.com/u/1496368?v=4?s=100" width="100px;" alt="Dima Kharitonov"/><br /><sub><b>Dima Kharitonov</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=geakstr" title="Code">💻</a></td>
    </tr>
    <tr>
      <td align="center"><a href="https://github.com/GabbeV"><img src="https://avatars.githubusercontent.com/u/13839236?v=4?s=100" width="100px;" alt="Gabriel Valfridsson"/><br /><sub><b>Gabriel Valfridsson</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=GabbeV" title="Code">💻</a></td>
      <td align="center"><a href="http://t.cn/EvDFUFF"><img src="https://avatars.githubusercontent.com/u/5354788?v=4?s=100" width="100px;" alt="Gitai"/><br /><sub><b>Gitai</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=GitaiQAQ" title="Code">💻</a></td>
      <td align="center"><a href="https://hampuskraft.com/"><img src="https://avatars.githubusercontent.com/u/24176136?v=4?s=100" width="100px;" alt="Hampus Kraft"/><br /><sub><b>Hampus Kraft</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=hampuskraft" title="Code">💻</a></td>
      <td align="center"><a href="https://github.com/isumix"><img src="https://avatars.githubusercontent.com/u/16747416?v=4?s=100" width="100px;" alt="Igor Sukharev"/><br /><sub><b>Igor Sukharev</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=isumix" title="Code">💻</a></td>
      <td align="center"><a href="https://bandism.net/"><img src="https://avatars.githubusercontent.com/u/22633385?v=4?s=100" width="100px;" alt="Ikko Ashimine"/><br /><sub><b>Ikko Ashimine</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=eltociear" title="Code">💻</a></td>
      <td align="center"><a href="http://jsdecorator.com/"><img src="https://avatars.githubusercontent.com/u/4482199?v=4?s=100" width="100px;" alt="Iman Mohamadi"/><br /><sub><b>Iman Mohamadi</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=ImanMh" title="Code">💻</a></td>
      <td align="center"><a href="https://github.com/codecorsair"><img src="https://avatars.githubusercontent.com/u/9878445?v=4?s=100" width="100px;" alt="JB <codecorsair>"/><br /><sub><b>JB <codecorsair></b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=codecorsair" title="Code">💻</a></td>
    </tr>
    <tr>
      <td align="center"><a href="https://jack-works.github.io/"><img src="https://avatars.githubusercontent.com/u/5390719?v=4?s=100" width="100px;" alt="Jack Works"/><br /><sub><b>Jack Works</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=Jack-Works" title="Code">💻</a></td>
      <td align="center"><a href="https://ghuser.io/jamesgeorge007"><img src="https://avatars.githubusercontent.com/u/25279263?v=4?s=100" width="100px;" alt="James George"/><br /><sub><b>James George</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=jamesgeorge007" title="Code">💻</a></td>
      <td align="center"><a href="https://appleid.apple.com/"><img src="https://avatars.githubusercontent.com/u/1058243?v=4?s=100" width="100px;" alt="Jed Mao"/><br /><sub><b>Jed Mao</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=jedmao" title="Code">💻</a></td>
      <td align="center"><a href="https://github.com/lencioni"><img src="https://avatars.githubusercontent.com/u/195534?v=4?s=100" width="100px;" alt="Joe Lencioni"/><br /><sub><b>Joe Lencioni</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=lencioni" title="Code">💻</a></td>
      <td align="center"><a href="https://github.com/joeycozza"><img src="https://avatars.githubusercontent.com/u/3885959?v=4?s=100" width="100px;" alt="Joey Cozza"/><br /><sub><b>Joey Cozza</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=joeycozza" title="Code">💻</a></td>
      <td align="center"><a href="https://github.com/juanferreras"><img src="https://avatars.githubusercontent.com/u/8507996?v=4?s=100" width="100px;" alt="Juan Ferreras"/><br /><sub><b>Juan Ferreras</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=juanferreras" title="Code">💻</a></td>
      <td align="center"><a href="https://www.linkedin.com/in/kazuma1989/"><img src="https://avatars.githubusercontent.com/u/15844862?v=4?s=100" width="100px;" alt="Kazuma Ebina"/><br /><sub><b>Kazuma Ebina</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=kazuma1989" title="Code">💻</a></td>
    </tr>
    <tr>
      <td align="center"><a href="https://webpro.nl/"><img src="https://avatars.githubusercontent.com/u/456426?v=4?s=100" width="100px;" alt="Lars Kappert"/><br /><sub><b>Lars Kappert</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=webpro" title="Code">💻</a></td>
      <td align="center"><a href="https://loige.co/"><img src="https://avatars.githubusercontent.com/u/205629?v=4?s=100" width="100px;" alt="Luciano Mammino"/><br /><sub><b>Luciano Mammino</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=lmammino" title="Code">💻</a></td>
      <td align="center"><a href="https://github.com/madhavarshney"><img src="https://avatars.githubusercontent.com/u/40002855?v=4?s=100" width="100px;" alt="Madhav Varshney"/><br /><sub><b>Madhav Varshney</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=madhavarshney" title="Code">💻</a></td>
      <td align="center"><a href="https://malash.me/"><img src="https://avatars.githubusercontent.com/u/1812118?v=4?s=100" width="100px;" alt="Malash"/><br /><sub><b>Malash</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=malash" title="Code">💻</a></td>
      <td align="center"><a href="https://github.com/Swaagie"><img src="https://avatars.githubusercontent.com/u/670951?v=4?s=100" width="100px;" alt="Martijn Swaagman"/><br /><sub><b>Martijn Swaagman</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=Swaagie" title="Code">💻</a></td>
      <td align="center"><a href="https://github.com/moitias"><img src="https://avatars.githubusercontent.com/u/1009280?v=4?s=100" width="100px;" alt="Matias Lahti"/><br /><sub><b>Matias Lahti</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=moitias" title="Code">💻</a></td>
      <td align="center"><a href="https://github.com/majames"><img src="https://avatars.githubusercontent.com/u/7553458?v=4?s=100" width="100px;" alt="Michael James"/><br /><sub><b>Michael James</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=majames" title="Code">💻</a></td>
    </tr>
    <tr>
      <td align="center"><a href="https://github.com/kryops"><img src="https://avatars.githubusercontent.com/u/1042594?v=4?s=100" width="100px;" alt="Michael Strobel"/><br /><sub><b>Michael Strobel</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=kryops" title="Code">💻</a></td>
      <td align="center"><a href="https://twitter.com/michalchudziak"><img src="https://avatars.githubusercontent.com/u/7837457?v=4?s=100" width="100px;" alt="Michał Chudziak"/><br /><sub><b>Michał Chudziak</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=michalchudziak" title="Code">💻</a></td>
      <td align="center"><a href="https://github.com/mkanyar"><img src="https://avatars.githubusercontent.com/u/33469024?v=4?s=100" width="100px;" alt="Mike "/><br /><sub><b>Mike </b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=mkanyar" title="Code">💻</a></td>
      <td align="center"><a href="https://www.mikestopcontinues.com/"><img src="https://avatars.githubusercontent.com/u/150434?v=4?s=100" width="100px;" alt="Mike Stop Continues"/><br /><sub><b>Mike Stop Continues</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=mikestopcontinues" title="Code">💻</a></td>
      <td align="center"><a href="https://github.com/Mokshit06"><img src="https://avatars.githubusercontent.com/u/50412128?v=4?s=100" width="100px;" alt="Mokshit Jain"/><br /><sub><b>Mokshit Jain</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=Mokshit06" title="Code">💻</a></td>
      <td align="center"><a href="https://www.linkedin.com/in/layershifter/"><img src="https://avatars.githubusercontent.com/u/14183168?v=4?s=100" width="100px;" alt="Oleksandr Fediashov"/><br /><sub><b>Oleksandr Fediashov</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=layershifter" title="Code">💻</a></td>
      <td align="center"><a href="https://github.com/paddyobrien"><img src="https://avatars.githubusercontent.com/u/846372?v=4?s=100" width="100px;" alt="Paddy O'Brien"/><br /><sub><b>Paddy O'Brien</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=paddyobrien" title="Code">💻</a></td>
    </tr>
    <tr>
      <td align="center"><a href="https://sogocze.cz/"><img src="https://avatars.githubusercontent.com/u/8431593?v=4?s=100" width="100px;" alt="Patrik Smělý"/><br /><sub><b>Patrik Smělý</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=SogoCZE" title="Code">💻</a></td>
      <td align="center"><a href="https://github.com/Nedgeva"><img src="https://avatars.githubusercontent.com/u/19298874?v=4?s=100" width="100px;" alt="Pavel Udaloff"/><br /><sub><b>Pavel Udaloff</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=Nedgeva" title="Code">💻</a></td>
      <td align="center"><a href="https://github.com/pbitkowski"><img src="https://avatars.githubusercontent.com/u/22204594?v=4?s=100" width="100px;" alt="Przemysław Bitkowski"/><br /><sub><b>Przemysław Bitkowski</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=pbitkowski" title="Code">💻</a></td>
      <td align="center"><a href="https://rin.rocks/"><img src="https://avatars.githubusercontent.com/u/16365952?v=4?s=100" width="100px;" alt="RiN"/><br /><sub><b>RiN</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=ri7nz" title="Code">💻</a></td>
      <td align="center"><a href="https://github.com/pustomytnyk"><img src="https://avatars.githubusercontent.com/u/9644824?v=4?s=100" width="100px;" alt="Roman Sokhan"/><br /><sub><b>Roman Sokhan</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=pustomytnyk" title="Code">💻</a></td>
      <td align="center"><a href="https://github.com/SeokminHong"><img src="https://avatars.githubusercontent.com/u/11614766?v=4?s=100" width="100px;" alt="Seokmin Hong (Ray)"/><br /><sub><b>Seokmin Hong (Ray)</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=SeokminHong" title="Code">💻</a></td>
      <td align="center"><a href="https://github.com/lebedev"><img src="https://avatars.githubusercontent.com/u/5000549?v=4?s=100" width="100px;" alt="Serge K Lebedev"/><br /><sub><b>Serge K Lebedev</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=lebedev" title="Code">💻</a></td>
    </tr>
    <tr>
      <td align="center"><a href="https://github.com/funsis"><img src="https://avatars.githubusercontent.com/u/28862758?v=4?s=100" width="100px;" alt="Sergey Korovin"/><br /><sub><b>Sergey Korovin</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=funsis" title="Code">💻</a></td>
      <td align="center"><a href="https://github.com/shreyas44"><img src="https://avatars.githubusercontent.com/u/46835608?v=4?s=100" width="100px;" alt="Shreyas Sreenivas"/><br /><sub><b>Shreyas Sreenivas</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=shreyas44" title="Code">💻</a></td>
      <td align="center"><a href="https://github.com/skywickenden"><img src="https://avatars.githubusercontent.com/u/4930551?v=4?s=100" width="100px;" alt="Sky Wickenden"/><br /><sub><b>Sky Wickenden</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=skywickenden" title="Code">💻</a></td>
      <td align="center"><a href="https://www.linkedin.com/in/stanislavpanferov"><img src="https://avatars.githubusercontent.com/u/198327?v=4?s=100" width="100px;" alt="Stanislav Panferov"/><br /><sub><b>Stanislav Panferov</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=s-panferov" title="Code">💻</a></td>
      <td align="center"><a href="https://github.com/jsbalrog"><img src="https://avatars.githubusercontent.com/u/2457489?v=4?s=100" width="100px;" alt="Ted Jenkins"/><br /><sub><b>Ted Jenkins</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=jsbalrog" title="Code">💻</a></td>
      <td align="center"><a href="https://int3ractive.com/"><img src="https://avatars.githubusercontent.com/u/234226?v=4?s=100" width="100px;" alt="Thanh Tran"/><br /><sub><b>Thanh Tran</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=trongthanh" title="Code">💻</a></td>
      <td align="center"><a href="https://github.com/tamorim"><img src="https://avatars.githubusercontent.com/u/5040487?v=4?s=100" width="100px;" alt="Thor Amorim"/><br /><sub><b>Thor Amorim</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=tamorim" title="Code">💻</a></td>
    </tr>
    <tr>
      <td align="center"><a href="https://github.com/tobenna"><img src="https://avatars.githubusercontent.com/u/12450941?v=4?s=100" width="100px;" alt="tobenna"/><br /><sub><b>tobenna</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=tobenna" title="Code">💻</a></td>
      <td align="center"><a href="https://caurea.org/"><img src="https://avatars.githubusercontent.com/u/34538?v=4?s=100" width="100px;" alt="Tomas Carnecky"/><br /><sub><b>Tomas Carnecky</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=wereHamster" title="Code">💻</a></td>
      <td align="center"><a href="https://github.com/Tsubasa1218"><img src="https://avatars.githubusercontent.com/u/20498480?v=4?s=100" width="100px;" alt="Tsubasa1218"/><br /><sub><b>Tsubasa1218</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=Tsubasa1218" title="Code">💻</a></td>
      <td align="center"><a href="http://turadg.aleahmad.net/"><img src="https://avatars.githubusercontent.com/u/21505?v=4?s=100" width="100px;" alt="Turadg Aleahmad"/><br /><sub><b>Turadg Aleahmad</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=turadg" title="Code">💻</a></td>
      <td align="center"><a href="https://github.com/buzinas"><img src="https://avatars.githubusercontent.com/u/7298695?v=4?s=100" width="100px;" alt="Vitor Buzinaro"/><br /><sub><b>Vitor Buzinaro</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=buzinas" title="Code">💻</a></td>
      <td align="center"><a href="https://github.com/Mistereo"><img src="https://avatars.githubusercontent.com/u/1505518?v=4?s=100" width="100px;" alt="Mistereo"/><br /><sub><b>Mistereo</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=Mistereo" title="Code">💻</a></td>
      <td align="center"><a href="https://ru.linkedin.com/in/govnokoder"><img src="https://avatars.githubusercontent.com/u/351676?v=4?s=100" width="100px;" alt="Vladislav Kozulya"/><br /><sub><b>Vladislav Kozulya</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=5angel" title="Code">💻</a></td>
    </tr>
    <tr>
      <td align="center"><a href="https://yuheiy.com/"><img src="https://avatars.githubusercontent.com/u/11547305?v=4?s=100" width="100px;" alt="Yuhei Yasuda"/><br /><sub><b>Yuhei Yasuda</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=yuheiy" title="Code">💻</a></td>
      <td align="center"><a href="https://github.com/dkamyshov"><img src="https://avatars.githubusercontent.com/u/26835323?v=4?s=100" width="100px;" alt="Danil Kamyshov"/><br /><sub><b>Danil Kamyshov</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=dkamyshov" title="Code">💻</a></td>
      <td align="center"><a href="https://sebastianlandwehr.com/"><img src="https://avatars.githubusercontent.com/u/13484795?v=4?s=100" width="100px;" alt="Sebastian Landwehr"/><br /><sub><b>Sebastian Landwehr</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=dword-design" title="Code">💻</a></td>
      <td align="center"><a href="https://github.com/everdimension"><img src="https://avatars.githubusercontent.com/u/5347023?v=4?s=100" width="100px;" alt="everdimension"/><br /><sub><b>everdimension</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=everdimension" title="Code">💻</a></td>
      <td align="center"><a href="https://github.com/ptol"><img src="https://avatars.githubusercontent.com/u/17497724?v=4?s=100" width="100px;" alt="ptol"/><br /><sub><b>ptol</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=ptol" title="Code">💻</a></td>
      <td align="center"><a href="https://roottool.vercel.app/"><img src="https://avatars.githubusercontent.com/u/11808736?v=4?s=100" width="100px;" alt="roottool"/><br /><sub><b>roottool</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=roottool" title="Code">💻</a></td>
      <td align="center"><a href="https://github.com/ryamaguchi0220"><img src="https://avatars.githubusercontent.com/u/14275842?v=4?s=100" width="100px;" alt="ryamaguchi0220"/><br /><sub><b>ryamaguchi0220</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=ryamaguchi0220" title="Code">💻</a></td>
    </tr>
    <tr>
      <td align="center"><a href="https://www.simka.dev/"><img src="https://avatars.githubusercontent.com/u/16965735?v=4?s=100" width="100px;" alt="simka"/><br /><sub><b>simka</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=simka" title="Code">💻</a></td>
      <td align="center"><a href="https://so-so.dev/"><img src="https://avatars.githubusercontent.com/u/18658235?v=4?s=100" width="100px;" alt="soso"/><br /><sub><b>soso</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=SoYoung210" title="Code">💻</a></td>
      <td align="center"><a href="https://twitter.com/skovorodan"><img src="https://avatars.githubusercontent.com/u/291301?v=4?s=100" width="100px;" alt="Nikita Skovoroda"/><br /><sub><b>Nikita Skovoroda</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=ChALkeR" title="Code">💻</a></td>
      <td align="center"><a href="https://github.com/huang-xiao-jian"><img src="https://avatars.githubusercontent.com/u/4002210?v=4?s=100" width="100px;" alt="黄小健"/><br /><sub><b>黄小健</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=huang-xiao-jian" title="Code">💻</a></td>
      <td align="center"><a href="https://github.com/iMoses"><img src="https://avatars.githubusercontent.com/u/1083065?v=4?s=100" width="100px;" alt="iMoses"/><br /><sub><b>iMoses</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=iMoses" title="Code">💻</a></td>
      <td align="center"><a href="http://jneander.com"><img src="https://avatars.githubusercontent.com/u/880186?v=4?s=100" width="100px;" alt="Jeremy Neander"/><br /><sub><b>Jeremy Neander</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=jneander" title="Code">💻</a></td>
      <td align="center"><a href="https://evensix.com"><img src="https://avatars.githubusercontent.com/u/1213447?v=4?s=100" width="100px;" alt="Andy Parsons"/><br /><sub><b>Andy Parsons</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=andparsons" title="Code">💻</a></td>
    </tr>
    <tr>
      <td align="center"><a href="http://platane.github.io"><img src="https://avatars.githubusercontent.com/u/1659820?v=4?s=100" width="100px;" alt="Platane"/><br /><sub><b>Platane</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=Platane" title="Documentation">📖</a></td>
      <td align="center"><a href="https://github.com/kutnickclose"><img src="https://avatars.githubusercontent.com/u/6117662?v=4?s=100" width="100px;" alt="Tim Kutnick"/><br /><sub><b>Tim Kutnick</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=kutnickclose" title="Documentation">📖</a></td>
      <td align="center"><a href="https://github.com/aspirisen"><img src="https://avatars.githubusercontent.com/u/3620639?v=4?s=100" width="100px;" alt="Dmitrii Pikulin"/><br /><sub><b>Dmitrii Pikulin</b></sub></a><br /><a href="https://github.com/callstack/linaria/commits?author=aspirisen" title="Code">💻</a></td>
    </tr>
  </tbody>
</table>

<!-- markdownlint-restore -->
<!-- prettier-ignore-end -->

<!-- ALL-CONTRIBUTORS-LIST:END -->

This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!

<!-- badges -->

[build-badge]: https://img.shields.io/circleci/project/github/callstack/linaria/master.svg?style=flat-square
[build]: https://circleci.com/gh/callstack/linaria
[coverage-badge]: https://img.shields.io/codecov/c/github/callstack/linaria.svg?style=flat-square
[coverage]: https://codecov.io/github/callstack/linaria
[version-badge]: https://img.shields.io/npm/v/linaria.svg?style=flat-square
[package]: https://www.npmjs.com/package/linaria
[license-badge]: https://img.shields.io/npm/l/linaria.svg?style=flat-square
[license]: https://opensource.org/licenses/MIT
[prs-welcome-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square
[prs-welcome]: https://github.com/callstack/linaria/blob/master/CONTRIBUTING.md
[coc-badge]: https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square
[coc]: https://github.com/callstack/linaria/blob/master/CODE_OF_CONDUCT.md
[all-contributors-badge]: https://img.shields.io/badge/all_contributors-23-orange.svg?style=flat-square
[chat-badge]: https://img.shields.io/discord/426714625279524876.svg?style=flat-square&colorB=758ED3
[chat]: https://discord.gg/zwR2Cdh
[tweet-badge]: https://img.shields.io/badge/tweet-%23linaria-blue.svg?style=flat-square&colorB=1DA1F2&logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAUCAYAAACXtf2DAAAAAXNSR0IArs4c6QAAAaRJREFUOBGtlM8rBGEYx3cWtRHJRaKcuMtBSitxkCQ3LtzkP9iUUu5ODspRHLhRLtq0FxeicEBC2cOivcge%2FMgan3fNM8bbzL4zm6c%2BPT%2Fe7%2FO8887svrFYBWbbtgWzsAt3sAcpqJFxxF1QV8oJFqFPFst5dLWQAT87oTgPB7DtziFRT1EA4yZolsFkhwjGYFRO8Op0KD8HVe7unoB6PRTBZG8IctAmG1xrHcfkQ2B55sfI%2ByGMXSBqV71xZ8CWdxBxN6ThFuECDEAL%2Bc9HIzDYumVZ966GZnX0SzCZvEqTbkaGywkyFE6hKAsBPhFQ18uPUqh2ggJ%2BUor%2F4M%2F%2FzOC8g6YzR1i%2F8g4vvSI%2ByD7FFNjexQrjHd8%2BnjABI3AU4Wl16TuF1qANGll81jsi5qu%2Bw6XIsCn4ijhU5FmCJpkV6BGNw410hfSf6JKBQ%2FUFxHGYBnWnmOwDwYQ%2BwzdHqO75HtiAMJfaC7ph32FSRJCENUhDHsLaJkL%2FX4wMF4%2BwA5bgAcrZE4sr0Cu9Jq9fxyrvBHWbNkMD5CEHWTjjT2m6r5D92jfmbbKJEWuMMAAAAABJRU5ErkJggg%3D%3D
[tweet]: https://twitter.com/intent/tweet?text=Check%20out%20linaria!%20https://github.com/callstack/linaria%20%F0%9F%91%8D
[greenkeeper-badge]: https://badges.greenkeeper.io/callstack/linaria.svg
[greenkeeper]: https://greenkeeper.io/
[callstack-badge]: https://callstack.com/images/callstack-badge.svg
[callstack]: https://callstack.com/open-source/?utm_source=github.com&utm_medium=referral&utm_campaign=linaria&utm_term=readme