UnoCSS 自定义预设中 Transformers 失效问题解析

问题背景

在使用 UnoCSS 0.61.9 版本时，开发者发现了一个关于 transformers 的有趣现象：当 transformers 被定义在通过 definePreset 创建的自定义预设中时，这些 transformers 会被系统忽略。然而，如果直接在 uno.config.ts 配置文件中添加相同的 transformers，它们却能正常工作。

技术分析

Transformers 是 UnoCSS 中用于处理 CSS 指令和变体组的重要功能模块。正常情况下，它们应该能够通过预设进行配置，但目前版本中存在一个功能缺失 - 系统没有实现对预设中定义的 transformers 的继承支持。

临时解决方案

开发者发现可以通过 configResolved 钩子函数实现变通方案：

export default definePreset(() => ({
  name: 'my-preset',
  configResolved: (config) => {
    config.transformers ??= []
    config.transformers.push(...[
      transformerDirectives(),
      transformerVariantGroup(),
    ])
  },
}))

这种方法虽然可行，但显然不够优雅，也不是官方推荐的做法。

官方回应

UnoCSS 核心团队成员确认这是一个应该支持但尚未实现的功能。相关实现应该相对简单，可以参考之前类似的合并请求。团队鼓励社区贡献者提交 Pull Request 来解决这个问题。

技术展望

这个问题的解决将使得 UnoCSS 的预设系统更加完善，允许开发者将 transformers 的配置完全封装在预设中，提高代码的模块化和可复用性。对于构建复杂的 CSS 工具链和共享预设来说，这将是一个重要的功能增强。

总结

目前 UnoCSS 0.61.9 版本中，transformers 还不能通过预设直接配置，需要使用 configResolved 钩子作为临时解决方案。这个问题预计会在未来的版本中得到修复，使预设系统能够完整支持 transformers 配置。对于需要高度定制化 CSS 处理流程的项目，建议关注此问题的进展或考虑贡献代码来加速问题的解决。