带有“release”标签的 6 篇文章

StyleX v0.8.0 现已发布，其中包含大量修复和新的 ESLint 规则。

Lint 功能增强​

我们一直在对我们的 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'）的文件中命名的导出，并且此类文件没有其他导出。

其他 Lint 修复​

我们已更新 ESLint 规则以包含其他缺少的属性和值。值得注意的是，valid-styles 规则现在应该理解

• fieldSizing 作为有效属性
• @starting-style 作为有效的 at-规则。

使用 lightningcss 进行后处理​

StyleX 的编译过程从概念上讲是一个三步过程

1. 转换 JavaScript 源文件以替换 stylex.create 等的用法，使用生成的 className 并收集生成的 CSS。
2. 对所有收集到的 CSS 进行重复数据删除和排序。
3. 将 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 提供支持）

StyleX v0.7.3 现已发布，其中修复了 Rollup 插件的问题，该插件以前未在发布到 NPM 时包含所有必要文件。

我们很高兴发布 StyleX v0.7.0，其中包含一个新的 CLI，使 StyleX 的入门更加容易，改进了变量，并修复了各种错误。

CLI​

StyleX 依赖于一个编译器，该编译器转换您的 JavaScript 代码 *并* 生成一个静态 CSS 文件。但是，将此编译器与捆绑器集成可能很棘手。因此，虽然我们继续致力于提高捆绑器集成的质量，但我们正在引入一个新的 CLI 作为替代方案！

CLI 转换整个文件夹。它生成一个输出文件夹，其中 StyleX 已被编译，并且已生成一个静态 CSS 文件。此外，CLI 将导入生成的 CSS 文件的语句插入到每个使用 StyleX 的文件中。

我们很高兴提供这种基于捆绑器的设置的替代方案，并选择以实验状态发布 CLI。我们很乐意听取您对它的使用情况以及您希望看到的改进的反馈。

特别感谢 Joel Austin 为 CLI 做出的贡献。

CSS 变量的文字名称​

使用 stylex.defineVars 时，StyleX 会抽象出实际的 CSS 变量名称，并允许您将其用作 JavaScript 引用。在幕后，为每个变量生成唯一的变量名称。

但是，在某些情况下，了解确切的变量名称很有用。例如，当您可能希望在独立的 CSS 文件中使用该变量时。

为了解决此类用例，我们已更新 stylex.defineVars API 以按原样使用以 -- 开头的文字。除了传递给 stylex.defineVars 的键之外，API 保持不变。

const vars = stylex.defineVars({
  '--primary-color': 'red',
  '--secondary-color': 'blue',
});

错误修复和改进​

此外，还对类型、eslint 规则和捆绑器插件进行了错误修复。

我们很高兴发布 StyleX v0.6.1，其中包含一些用于处理 CSS 自定义属性（也称为“变量”）的大改进以及许多错误修复。

变量改进​

我们为在 StyleX 中使用变量和主题添加了一些新功能和改进。

变量的回退值​

您现在可以为使用 stylex.defineVars API 定义的变量提供回退值。此新功能没有引入任何新的 API。相反，现有的 stylex.firstThatWorks API 现在支持变量作为参数。

import * as stylex from '@stylexjs/stylex';
import {colors} from './tokens.stylex';

const styles = stylex.create({
  container: {
    color: stylex.firstThatWorks(colors.primary, 'black'),
  },
});

支持使用回退变量列表。

类型化变量​

StyleX 引入了一套全新的 API，用于为 CSS 变量定义 <syntax> 类型。这会在生成的 CSS 输出中生成 @property 规则，这些规则可用于动画化 CSS 变量以及其他特殊用例。

在定义变量时可以使用新的 stylex.types.* 函数来使用特定类型定义它们。

import * as stylex from '@stylexjs/stylex';

const typedTokens = stylex.defineVars({
  bgColor: stylex.types.color<string>({
    default: 'cyan',
    [DARK]: 'navy',
  }),
  cornerRadius: stylex.types.length<string | number>({
    default: '4px',
    '@media (max-width: 600px)': 0,
  }),
  translucent: stylex.types.number<number>(0.5),
  angle: stylex.types.angle<string>('0deg'),
  shortAnimation: stylex.types.time<string>('0.5s'),
});

一旦使用类型定义了变量，就可以像任何其他 CSS 属性一样使用 stylex.keyframes 对其进行动画处理。

import * as stylex from '@stylexjs/stylex';
import {typedTokens} from './tokens.stylex';

const rotate = stylex.keyframes({
  from: { [typedTokens.angle]: '0deg' },
  to: { [typedTokens.angle]: '360deg' },
});

const styles = stylex.create({
  gradient: {
    backgroundImage: `conic-gradient(from ${tokens.angle}, ...colors)`,
    animationName: rotate,
    animationDuration: '10s',
    animationTimingFunction: 'linear',
    animationIterationCount: 'infinite',
  },
})

这可以用来实现一些有趣的效果，例如动画化圆锥渐变的 angle

此新功能主要与 CSS 类型有关，但新的 API 也使变量的 TypeScript（或 Flow）类型更加强大。

如示例所示，在使用stylex.createTheme创建主题时，可以使用泛型类型参数来约束变量可以取的值。

ESlint 插件​

新的 sort-keys 规则​

我们在 StyleX ESlint 插件中添加了一个新的 sort-keys 规则。此规则是一个风格规则，用于强制对 StyleX 样式的键采用一致的顺序。

感谢 nedjulius

改进 valid-styles 规则的 propLimits。​

valid-styles 规则已得到改进，允许使用更具表现力的“属性限制”。

其他​

• ESlint 的 'valid-styles' 规则现在允许在动态样式中使用用 stylex.defineVars 创建的变量作为键。
• 实验性 stylex.include API 的错误修复
• 修复了 stylex.createTheme 的调试 className 生成
• 不再从 0 值中删除单位
• 编译错误修复

我们的 生态系统 页面继续随着社区项目的增长而发展。包括一个用于排序 StyleX 样式的 Prettier 插件。

我们很高兴发布 Stylex v0.5.0，其中包含一些重大改进和修复！

新的 stylex.attrs 函数​

stylex.props 函数返回一个包含 className 字符串和 style 对象的对象。某些框架可能期望 class 而不是 className，以及 style 的字符串值。

我们正在引入一个新的 stylex.attrs 函数，以便 StyleX 在更多地方都能正常工作。stylex.attrs 返回一个包含 class 字符串和 style 字符串的对象。

ESlint 插件的新 sort-keys 规则​

引入了一个新的 @stylexjs/sort-keys 插件，它将按字母顺序和优先级对样式进行排序。这将使媒体查询顺序更具可预测性。

感谢 @nedjulius！

StyleX Babel 插件的新 aliases 选项​

可以使用新的 aliases 字段配置 StyleX 以解析可能在您的 tsconfig 文件中设置的自定义别名。**注意**：StyleX 目前需要使用绝对路径来配置您的别名。

感谢 @rayan1810！

新的 Esbuild 插件​

一个新的官方 Esbuild 插件已作为 @stylexjs/esbuild-plugin 引入。

感谢 @nedjulius！

其他增强功能​

• 传递给 StyleX Babel 插件的配置选项现在将进行验证。
• @stylexjs/stylex 现在除了 commonJS 导出外，还具有 ESM 导出。
• ESLint 的 valid-styles 规则将在使用空字符串作为字符串值时进行捕获。

错误修复​

• 一些以前导致类型和 lint 错误的 CSS 属性现在将被接受。
• 使用变量表示 opacity 将不再导致类型错误。
• 在 stylex.defineVars 中使用 stylex.keyframes 现在将正常工作
• runtimeInjection 将被正确处理
• 将 defineVars 中变量的值设置为动态样式现在将正常工作。
• 在 CSS 函数中使用 0px 将不再简化为无单位的 0，因为这在某些情况下不起作用。
• 将保留 CSS 运算符周围的空格。

除此之外，我们还在网站上添加了“生态系统”页面，以突出显示围绕 StyleX 的各种社区项目。

三周前，我们开源了 StyleX。从那时起，我们一直在努力修复错误和改进。以下是一些亮点

增强功能​

• 编译后生成的 JavaScript 代码量已进一步减少。
• 为 ESLint 插件添加了一些以前缺少的 CSS 属性的支持。
• 添加了在 stylex.keyframes 中使用变量的支持。
• 从生产运行时中删除了样式注入代码，使运行时的大小减少了 50% 以上。
• 为 Rollup 插件添加了 Flow 和 TypeScript 类型。
• 添加了在所有捆绑器插件中使用 CSS 层的选项。
• TypeScript 现在将自动完成样式属性名称。
• 捆绑器插件现在将跳过不包含 StyleX 的文件，从而缩短构建时间。

错误修复​

• 修复了一个错误，该错误导致 ESLint 插件有时无法解析用于媒体查询和伪类的本地常量。
• 解决了开发模式下样式的运行时注入有时会失败的错误。
• 解决了开发过程中运行时注入的样式有时会遇到特异性冲突的错误。
• Theme 的 TypeScript 类型现在将在应用错误 VarGroup 的主题时正确抛出错误。

除此之外，我们还对类型和文档进行了其他改进。我要感谢所有为其提交请求请求的贡献者。♥️

新年快乐！