UnoCSS 媒体查询规则生成异常问题分析与解决

在 UnoCSS 0.60.3 版本中，开发者发现了一个关于媒体查询规则生成的严重问题。当使用 CLI 工具输出 CSS 文件时，如果同时使用 sm: 和 lg: 等响应式前缀，生成的 CSS 文件中媒体查询规则会缺少闭合的大括号，导致后续样式规则被错误地包含在媒体查询中。

问题现象

受影响的项目在使用 UnoCSS CLI 生成 CSS 文件时，输出的媒体查询规则如 @media (min-width: 1024px) 会缺少闭合的 } 符号。这使得后续所有样式规则都被错误地包含在该媒体查询条件内，导致样式应用出现异常。

问题根源

经过开发者测试验证，这个问题首次出现在 UnoCSS 0.60.3 版本中，而在 0.60.2 及之前版本表现正常。问题似乎与配置文件中的入口模式(entry pattern)设置有关，特别是当使用 **/*.{js,css,html} 这样的通配符模式时更容易触发。

临时解决方案

目前开发者发现了几个可行的临时解决方案：

1. 从入口模式中移除 css 扩展名，例如将 ./static/**/*.{js,css,html} 改为 ./static/**/*.{js,html}
2. 简化入口模式，避免使用深层通配符，例如改为 ./static/*.{js,css,html}
3. 降级到 0.60.2 或更早版本

技术分析

这个问题可能源于 UnoCSS 在处理多个响应式前缀和深层文件扫描时的规则生成逻辑。当系统同时处理多个断点的媒体查询规则，并且扫描大量文件时，CSS 规则的拼接过程可能出现异常，导致闭合符号丢失。

对于前端开发者而言，这个问题尤其需要注意，因为它不会直接导致构建失败，而是会生成看似正常但实际上有问题的 CSS 文件，这种隐性错误在开发过程中更难被发现。

最佳实践建议

1. 在升级 UnoCSS 版本后，务必检查生成的 CSS 文件完整性
2. 对于关键项目，建议锁定 UnoCSS 版本以避免意外升级带来的问题
3. 考虑在构建流程中加入 CSS 验证步骤，确保生成的 CSS 语法正确
4. 关注 UnoCSS 官方更新，等待该问题的正式修复版本发布

这个问题提醒我们，即使是成熟的工具链也可能在特定条件下出现意外行为，保持对构建产物的审查习惯是保证项目质量的重要环节。