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

发布于2019-04-20 11:57:43

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