linaria零运行时 CSS-in-JS 库

linaria 是一个零运行时 CSS-in-JS 库。在 JS 中编写 CSS，并在构建期间获得真正的 CSS 文件。使用 React 绑定的基于动态道具的样式，并将其自动转换为 CSS 变量。通过 source maps 和 linting 支持获得巨大的生产力。

特性：

• 在 JS 中编写 CSS，但运行时间为零，CSS在构建时被提取到 CSS 文件中
• 熟悉的 CSS 语法与 Sass 一样嵌套
• 使用基于 React 绑定的动态道具样式，在幕后使用 CSS 变量
• 通过 CSS 源码图轻松找到样式的定义位置
• 使用 stylelint 在 JS 中提示你的 CSS
• 使用 JavaScript 的逻辑，不需要 CSS 预处理程序
• 可以选择使用任何 CSS 预处理器，如 Sass 或 PostCSS 

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>;