UnoCSS v0.63.3 版本中属性化模式媒体查询失效问题分析

UnoCSS 是一个高性能的原子化 CSS 引擎，其属性化模式（Attributify）允许开发者直接在 HTML 元素属性中编写样式。在最新发布的 v0.63.3 版本中，出现了一个关于媒体查询生成的重要回归问题。

问题现象

在 v0.63.3 版本中，当开发者使用属性化模式编写包含媒体查询的样式时，例如：

<div text="12 lg:30"/>

预期应该生成响应式样式，其中 lg:30 应该对应大屏幕下的字体大小 7.5rem。然而实际生成的 CSS 却存在问题：

[text~="lg\:30"] {
  font-size:1.125rem;
  line-height:7.5rem;
}

这里 font-size 错误地应用了 lg 断点的默认值 1.125rem，而不是预期的 7.5rem。

技术背景

UnoCSS 的属性化模式通过解析 HTML 属性值来生成对应的 CSS 规则。在处理包含冒号(:)的字符串时，如媒体查询断点(lg:30)，解析逻辑需要正确区分这是媒体查询断点还是其他用途的冒号。

问题根源

这个回归问题源于 v0.63.3 版本中的一个提交，该提交尝试允许冒号作为透明度修饰符使用。这个改动导致解析器在处理属性化模式中的媒体查询断点时出现歧义，错误地将 lg:30 中的冒号识别为透明度修饰符而非断点分隔符。

解决方案

项目维护者迅速响应，在 v0.63.4 版本中回滚了这个有问题的提交。新的解决方案是明确禁止在属性化模式中使用冒号作为透明度修饰符，从而确保媒体查询断点的解析能够正常工作。

开发者建议

对于遇到此问题的开发者：

1. 立即升级到 v0.63.4 或更高版本
2. 检查项目中是否使用了属性化模式的媒体查询
3. 如果必须停留在 v0.63.3 版本，可以考虑暂时使用传统类名模式替代属性化模式

总结

这个案例展示了原子化 CSS 引擎在处理复杂选择器时面临的挑战，也体现了 UnoCSS 团队对问题快速响应的能力。作为开发者，在遇到类似样式生成问题时，可以通过简化测试用例、对比不同版本行为来快速定位问题根源。