UnoCSS 网格布局规则优化：简化列/行定义语法

背景介绍

UnoCSS 是一个高性能的原子化 CSS 引擎，它通过简洁的类名语法来生成 CSS 规则。在网格布局系统中，UnoCSS 提供了一系列实用工具类来快速构建网格布局。目前，定义网格列和行的语法需要完整书写 grid-cols- 或 grid-rows- 前缀，这虽然清晰但略显冗长。

当前实现分析

在 UnoCSS 的预设中，网格布局相关的规则通过正则表达式匹配类名。例如，定义网格列数的规则如下：

[/^grid-(rows|cols)-(\d+)$/, ([, c, d]) => ({
  [`grid-template-${rowCol(c)}`]: `repeat(${d},minmax(0,1fr))`
})]

这种实现方式要求开发者必须完整书写 grid- 前缀，才能正确应用网格布局规则。相比之下，网格自动流向规则（grid-auto-flow）已经实现了前缀可选的设计：

[/^(?:grid-)?auto-flow-(.+)$/, ([, v]) => ({
  'grid-auto-flow': h.bracket.cssvar(v)
})]

优化方案

社区贡献者提出了一种优化方案：通过修改正则表达式，使 grid- 前缀成为可选部分。这一改动将带来以下好处：

1. 更简洁的语法：开发者可以使用 cols-3 替代 grid-cols-3
2. 保持向后兼容：原有的 grid-cols-3 语法仍然有效
3. 一致性增强：与现有的 auto-flow- 规则保持相同的设计理念

实现这一优化的关键是在正则表达式中添加 ?: 修饰符，使 grid- 前缀变为可选：

[/^(?:grid-)?(rows|cols)-(\d+)$/, ([, c, d]) => ({
  [`grid-template-${rowCol(c)}`]: `repeat(${d},minmax(0,1fr))`
})]

技术细节

这一优化涉及 UnoCSS 核心规则的修改，主要影响以下方面：

1. 规则匹配：正则表达式将同时匹配带前缀和不带前缀的类名
2. 自动补全：需要相应更新自动补全提示，包含两种格式的选项
3. 文档更新：官方文档需要反映这一语法变化，说明两种格式都可用

实际应用示例

优化后，开发者可以更灵活地定义网格布局：

<!-- 传统写法 -->
<div class="grid grid-cols-3 grid-rows-2">
  <!-- 网格内容 -->
</div>

<!-- 新写法 -->
<div class="grid cols-3 rows-2">
  <!-- 网格内容 -->
</div>

两种写法将生成完全相同的 CSS 输出：

.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

总结

这一语法优化将使 UnoCSS 的网格布局工具更加灵活和简洁，同时保持与现有代码的兼容性。它体现了 UnoCSS 一贯追求的开发体验优化理念，通过减少不必要的重复输入来提高开发效率。对于已经熟悉传统写法的开发者，可以继续使用原有语法；而对于追求简洁的新开发者，则可以选择更短的语法形式。