UnoCSS 自定义规则正则匹配问题解析

在使用 UnoCSS 时，开发者可能会遇到自定义规则生成不正确 CSS 的问题。本文将通过一个典型案例，深入分析问题原因并提供解决方案。

问题现象

当开发者尝试在 UnoCSS 中定义类似 black-0.5 这样的自定义规则时，生成的 CSS 中会出现意外的 element 选择器，导致样式无法按预期工作。

根本原因

问题的根源在于正则表达式的编写方式。在 UnoCSS 中定义自定义规则时，如果没有明确指定匹配字符串的边界（即开始和结束位置），正则表达式可能会匹配到意外的内容。

解决方案

正确的做法是在正则表达式中使用 ^ 和 $ 来明确标记字符串的开始和结束位置。例如：

rules: [
  [/^black-(0\.\d+)$/, ([_, opacity]) => ({
    'background-color': `rgba(0, 0, 0, ${opacity})`
  })]
]

技术原理

1. ^ 表示匹配字符串的开始位置
2. $ 表示匹配字符串的结束位置
3. 0\.\d+ 匹配类似 0.5 这样的小数（注意小数点需要转义）

这种精确匹配方式确保了规则只会匹配到预期的类名格式，避免了意外的匹配结果。

最佳实践

在 UnoCSS 中定义自定义规则时，建议始终：

1. 使用 ^ 和 $ 明确边界
2. 对特殊字符进行转义
3. 测试各种可能的输入情况

通过遵循这些原则，可以确保自定义规则按预期工作，生成正确的 CSS 输出。