UnoCSS中Hex颜色在--at-apply指令中的使用注意事项

在UnoCSS的最新版本v0.60.0中，开发者报告了一个关于Hex颜色值在--at-apply指令中无法正常工作的问题。这个问题主要出现在使用SCSS语法时，当尝试通过--at-apply指令应用带有Hex颜色值的背景色时，样式无法正确编译。

问题现象

开发者在使用UnoCSS时发现，以下写法无法正常工作：

.test-box {
  --at-apply: bg-#f8ce3d; // Hex颜色值无效
  --at-apply: c-red;      // 普通颜色名称有效
}

解决方案

经过项目维护者的确认，在UnoCSS v0.60.0中，Hex颜色值的正确使用方式有以下两种：

1. 使用hex-前缀的专用语法：

.test-box {
  --at-apply: bg-hex-f8ce3d;
}

2. 使用方括号语法并添加引号：

.test-box {
  --at-apply: "bg-[#f8ce3d]";
}

技术背景

这个变化源于CSS解析器的行为调整。在较新版本的UnoCSS中，CSS解析器不再将#字符视为内容的一部分。这种变化可能是为了提升解析器的严格性和一致性，但也导致了之前有效的写法不再适用。

最佳实践建议

对于需要使用Hex颜色值的场景，建议开发者：

1. 优先使用hex-前缀的专用语法，这是UnoCSS推荐的标准写法
2. 如果必须使用方括号语法，确保添加引号以避免解析问题
3. 在升级UnoCSS版本时，注意检查项目中所有Hex颜色值的使用方式

这个变化提醒我们在使用工具链时，应该关注版本升级带来的潜在兼容性问题，特别是当涉及到语法解析规则的细微调整时。