当前位置：首页 > news >正文

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

news 来源：原创 2024/5/2 18:56:50

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(    \u0026lt;Button      href=\u0026quot;https://github.com/callstack/linaria\u0026quot;      target=\u0026quot;_blank\u0026quot;      rel=\u0026quot;noopener\u0026quot;      primary    \u0026gt;      GitHub    \u0026lt;/Button\u0026gt;)

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

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

const Title = styled.h1`  color: ${props =\u0026gt; (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