UnoCSS 中支持驼峰式和下划线命名的 CSS 变量

在 CSS 生态系统中，变量命名规范一直是一个值得关注的话题。UnoCSS 作为一款流行的原子化 CSS 引擎，近期社区提出了对其变量命名规则进行扩展的需求，特别是支持驼峰式(camelCase)和下划线前缀的变量命名方式。

背景与现状

CSS 自定义属性（变量）是现代前端开发中的重要特性，开发者可以通过 -- 前缀定义变量并在样式中复用。传统上，CSS 变量命名多采用短横线分隔(kebab-case)的方式，如 --main-color。然而，随着 JavaScript 和 CSS 交互的加深，以及开发者个人偏好的差异，驼峰式和下划线前缀的命名方式也逐渐流行起来。

当前 UnoCSS 的实现中，变量命名被限制为仅包含小写字母和短横线，这导致以下常见命名方式无法被正确解析：

• 驼峰式变量：--primaryColor
• 下划线前缀变量：--_internal-value

技术实现分析

问题的核心在于 UnoCSS 的解析逻辑中使用了过于严格的正则表达式校验。原始实现中，属性名匹配模式为 /^[a-z-]+$/，这明确限制了只能使用小写字母和短横线。

解决方案相对直接，只需扩展正则表达式模式即可：

1. 添加大写字母支持：A-Z
2. 添加下划线支持：_
3. 修改后的模式：/^[a-zA-Z-_]+$/

这种修改不会引入任何破坏性变更，因为：

• 原有短横线命名方式仍然有效
• 新增支持的字符本就是 CSS 规范允许的
• 不会影响现有项目的构建结果

实际应用场景

支持更灵活的变量命名方式可以带来以下优势：

1. 团队协作一致性：当团队同时使用 JavaScript 和 CSS 时，保持命名风格一致可以减少认知负担
2. 代码可读性：对于某些开发者而言，驼峰式命名可能更符合其阅读习惯
3. 特殊约定：下划线前缀常用于表示私有变量或内部使用变量
4. 迁移项目：方便从其他支持这些命名方式的工具迁移到 UnoCSS

实现建议

对于想要在项目中提前使用这些特性的开发者，可以通过以下方式之一实现：

1. 等待官方更新：该功能已通过社区贡献合并到主分支
2. 自定义规则：通过 UnoCSS 的扩展机制添加自定义解析规则
3. 预处理转换：在构建流程中添加预处理步骤，将特殊命名转换为短横线格式

总结

CSS 变量命名的灵活性是现代前端工具应该支持的重要特性。UnoCSS 通过这次改进，进一步提升了其对不同开发风格和团队规范的适应能力。这种看似小的改进，实际上反映了开源项目对社区需求的快速响应能力，也是 UnoCSS 保持竞争力的关键因素之一。

对于开发者而言，现在可以更自由地选择符合项目特点和团队习惯的变量命名方式，而不必受限于工具的限制。这种灵活性对于大型项目和长期维护的代码库尤为重要。