StyleX v0.8.0 现已发布，其中包含大量修复和新的 ESLint 规则。
代码风格检查增强
我们一直在对我们的 ESLint 插件进行大量改进。我们既改进了现有的规则，又添加了新的规则。感谢 Melissa Liu！
以下是一些亮点
新的 valid-shorthands 规则
此规则强制执行我们关于何时以及如何使用 CSS 简写属性的意见。它不允许对简写使用多值简写，并且完全禁止某些属性。
const styles = stylex({
invalidShorthands: {
// border shorthands are entirely disallowed
// Use `borderWidth`, `borderStyle`, and `borderColor` instead
border: '1px solid black',
// Multiple values for different sides within the same shorthand are disallowed
borderWidth: '1px 2px 3px 4px',
margin: '10px 20px 30px',
padding: '10px 20px',
},
validShorthands: {
borderBottomWidth: 3,
borderColor: 'black',
borderInlineEndWidth: 2,
borderInlineStartWidth: 4,
borderStyle: 'solid',
borderTopWidth: 1,
marginBottom: 30,
marginInline: 20,
marginTop: 10,
paddingBlock: 10,
paddingInline: 20,
},
});
这些意见指导您使用最一致且最可重用的 CSS。
此规则为所有不允许的属性提供了自动修复功能。
新的 enforce-extension 规则
此新规则强制执行 定义变量时的规则。它强制执行 stylex.defineVars 的用法是在具有 .stylex.js（或 '.ts' 或 '.jsx' 或 '.tsx'）扩展名的文件中命名的导出，并且此类文件没有其他导出。
其他代码风格检查修复
我们已更新 ESLint 规则以包含其他缺少的属性和值。值得注意的是，valid-styles 规则现在应该理解
fieldSizing作为有效属性@starting-style作为有效的 at 规则。
使用 lightningcss 进行后处理
StyleX 的编译过程在概念上是一个三步过程
- 转换 JavaScript 源文件以替换
stylex.create等的用法，并使用生成的类名和收集生成的 CSS。 - 对所有收集到的 CSS 进行去重和排序。
- 将 CSS 写入文件。
但是，在将 CSS 写入文件之前，通常需要对其进行后处理。此后处理可以包括缩小、添加前缀或其他转换。经过多次讨论，我们决定将 lightningcss 标准化为此后处理。
作为第一步，我们默认情况下为我们的 Rollup 插件添加了 lightningcss。我们接下来将推出对其他捆绑器插件的支持。
感谢 Prakshal Jain 为此做出的贡献！
主题改进
我们对 StyleX 中的主题进行了两个小的但重要的改进。
使用 stylex.firstThatWorks 为 CSS 变量定义回退值
StyleX 有一个 stylex.firstThatWorks 函数，可用于为 CSS 属性定义回退值。这类似于在 CSS 中多次使用具有不同值的相同属性。
/* Represent this */
.my-class {
background-color: #808080;
background-color: oklab(0.5 0.5 0.5);
}
const styles = stylex.create({
myClass: {
// as:
backgroundColor: stylex.firstThatWorks(
'oklab(0.5 0.5 0.5)',
'#808080',
),
},
});
现在，相同的 API 也适用于 CSS 变量。
/* Represent this */
.my-class {
background-color: var(--bg-color, #808080);
}
const styles = stylex.create({
myClass: {
// as:
backgroundColor: stylex.firstThatWorks(
'var(--bg-color)',
'#808080',
),
},
});
主题比默认变量值具有更高的特异性
使用 stylex.createTheme 创建的 CSS 规则现在比使用 stylex.defineVars 创建的规则具有更高的特异性。
这在绝大多数情况下不应该成为问题，因为我们始终按正确的顺序对规则进行排序。但是，在您可能在同一页面上加载多个 StyleX CSS 文件的极端边缘情况下，此修复将确保一致性。
其他修复
我们对 StyleX 的各个部分进行了一些其他修复
- **修复**：
textAlign的逻辑值不再转换为left和right。 - 修复: [CLI]优雅地处理删除文件时的错误 (#695)
- **特性**：扩展 CLI 的配置选项 (#638)
- **修复**：不要为用于变量的数字值添加 'px' 单位 (#694)
- **修复**：不要为接受原始数字作为值的附加属性添加 'px' 单位 (#705)
文档改进
我们添加了各种捆绑器插件选项的文档，并在我们的 生态系统页面 中添加了其他项目。
我们还更新了网站上的搜索，使其更全面和准确。（由 Algolia 提供支持）
