UnoCSS中实现@supports特性查询的规则封装技巧

在现代CSS开发中，特性查询(@supports)是一种强大的工具，它允许开发者根据浏览器对特定CSS特性的支持情况来应用不同的样式规则。本文将介绍如何在UnoCSS中优雅地实现这种特性查询的封装。

背景与需求

在CSS开发中，我们经常需要处理浏览器兼容性问题。以writing-mode属性为例，不同浏览器对其sideways-lr值的支持程度不一。传统解决方案是编写如下CSS代码：

.sideways-lr {
  writing-mode: sideways-lr;
}
@supports (not (writing-mode: sideways-lr)) {
  .sideways-lr {
    writing-mode: vertical-rl;
    transform: rotate(-180deg);
  }
}

在UnoCSS中，我们希望以更简洁、可维护的方式实现这种特性查询。

解决方案演进

初始方案：完全控制规则

UnoCSS提供了"完全控制规则"的方式，允许开发者直接返回CSS字符串：

rules: [
  [/^sideways-lr$/, ([, name], { rawSelector }) => {
    const selector = e(rawSelector)
    return `
${selector} { writing-mode: sideways-lr; }
@supports (not (writing-mode: sideways-lr)) {
  ${selector} {
    writing-mode: vertical-rl;
    transform: rotate(-180deg);
  }
}`
  }]
]

这种方案虽然可行，但存在明显缺点：

1. 无法利用UnoCSS的变体系统
2. 代码可读性差
3. 维护困难

改进方案：利用UnoCSS 0.61+的规则封装

UnoCSS 0.61版本引入了更优雅的解决方案，通过symbols.parent实现规则封装：

rules: [
  [
    /^sideways-lr$/,
    (match, { symbols }) => {
      return [
        { "writing-mode": "sideways-lr" },
        {
          [symbols.parent]: "@supports (not (writing-mode: sideways-lr))",
          "writing-mode": "vertical-rl",
          transform: "rotate(-180deg)",
        },
      ]
    }
  ]
]

这种方案的优势在于：

1. 保持了UnoCSS的原子化特性
2. 代码结构清晰
3. 易于维护和扩展
4. 支持变体系统

实现原理

UnoCSS的规则封装机制基于以下核心概念：

1. 规则数组：每个匹配规则可以返回一个数组，包含多个样式对象
2. 父级封装：通过特殊的symbols.parent键指定父级选择器或特性查询
3. 嵌套结构：支持多级嵌套，实现复杂的样式逻辑

扩展应用

这种封装技术不仅适用于特性查询，还可以应用于其他CSS上下文：

1. 媒体查询：封装响应式样式
2. 容器查询：基于容器尺寸的样式调整
3. 嵌套选择器：实现复杂的选择器逻辑

最佳实践

1. 保持简洁：每个规则只处理一个核心功能
2. 合理命名：使用有意义的工具类名称
3. 文档注释：为复杂规则添加说明
4. 渐进增强：先提供基础样式，再添加高级特性

总结

UnoCSS的规则封装机制为处理CSS兼容性问题提供了优雅的解决方案。通过利用symbols.parent和数组返回值的组合，开发者可以轻松实现特性查询等高级CSS功能，同时保持代码的简洁性和可维护性。这种模式代表了现代CSS工具链的发展方向，将原子化CSS的便利性与复杂样式逻辑的处理能力完美结合。