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

阅读数:3271 2019 年 3 月 14 日

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 component
const Button = styled.a`
  display: inline-block;
  border-radius: 3px;
  padding: 0.5rem 0;
  margin: 0.5rem 1rem;
  width: 11rem;
  background: transparent;
  color: white;
  border: 2px solid white;
`
render(
    <Button
      href="https://github.com/callstack/linaria"
      target="_blank"
      rel="noopener"
      primary
    >
      GitHub
    </Button>
)

Linaria 的标签遵循的是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

收藏

评论

微博

发表评论

注册/登录 InfoQ 发表评论