Linaria 1.0正式发布：一个零运行时CSS-in-JS库-InfoQ



 写点什么

Linaria](https://github.com/callstack/linaria)（一个零运行时 CSS-in-JS 库）第一个稳定版已发布，可供开发人员使用。Linaria 提供了一个新的 API，可以与 React 一起使用，目的是提供更好的开发者体验和构建集成。

Linaria 在其现有的CSS标签中新增了 styled 标签。styled 标签使用参数化的样式创建 React 组件。

import { styled } from 'linaria/react';
// Create a styled componentconst Button = styled.a`  display: inline-block;  border-radius: 3px;  padding: 0.5rem 0;  margin: 0.5rem 1rem;  width: 11rem;  background: transparent;  color: white;  border: 2px solid white;`render(    <Button      href="https://github.com/callstack/linaria"      target="_blank"      rel="noopener"      primary    >      GitHub    </Button>)

复制代码

Linaria 的标签遵循的是ES2015标签模板字面量语法。模板字面量是指可以嵌入表达式的字符串。被标记的模板可以使用函数来解析模板字面量。在上面的代码示例中，display: inline-block 是一个模板字面量，styled.a 是一个模板标签，styled.adisplay: inline-block是一个被标记的模板字面量。开发人员可以使用标准 CSS 语法或对象样式语法编写模板字面量。

此外，styled 标签通过在模板字面量内插入函数来支持动态样式。

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

复制代码

React 组件 Title 将根据 primary 属性将颜色调整为 tomato 或 black。

不过，IE 等较老的浏览器不支持动态样式，因为动态样式依赖 CSS 自定义属性（也称为CSS变量）。现代浏览器可以支持 CSS 自定义属性。

Linaria 1.0 附带了一个新的命令行接口（CLI），用于从 JavaScript 中提取 CSS 内容。下面的命令将从 component 和 screen 目录提取 CSS，并放进 styles 目录中。

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

复制代码

Linaria 1.0 还提供了一个新的Rollup插件，允许开发人员使用 Rollup 构建项目，作为 Webpack 的替代。这个版本还改进了对stylelint处理器的支持。虽然以前的 Linaria 版本只支持Stylis CSS预处理器，但现在 Linaria 允许开发人员使用任意的CSS预处理器，比如 Sass 或自定义 PostCSS 语法。Linaria 还可以接受一个配置文件（linaria.config.js）。最重要的是，Linaria 支持 CSS 源映射，带来了简化的调试体验。

CSS-in-Js 是指一种在 JavaScript 而不是外部 CSS 文件中定义 CSS 的模式。它有两种子可以共存的子模式。运行时 CSS-in-JS 库（如 Emotion 或 style-components）可以在运行时动态修改样式，例如将样式标签注入文档。零运行时 CSS-in-Js 是一种在构建时提取所有 CSS 的模式。Linaria 和 Astroturf 是这种模式的主要支持者。

Linaria 是一个基于 MIT 许可的开源项目。欢迎读者参与 Linaria GitHub 项目的贡献，并遵循 Linaria 行为准则和贡献指南。

查看英文原文：Linaria 1.0 Released: CSS-in-JS with No Runtime