UnoCSS 动态文件监听与预设重建机制解析

背景与问题场景

在使用 UnoCSS 开发自定义预设时，经常会遇到需要动态读取用户文件并生成样式的情况。一个典型场景是：开发者通过 glob 模式匹配 src 目录下的文件，当新增文件时，期望 UnoCSS 能够自动检测变化并重新构建样式预设。

核心问题分析

UnoCSS 的预设系统默认不会自动监听 glob 匹配目录下的文件新增操作。即使通过 configDeps 手动添加依赖，也无法触发对新文件的自动重建。这是因为：

1. UnoCSS 的预设机制主要关注样式生成逻辑，而非文件监听
2. 配置依赖(configDeps)主要用于声明已知文件，不适合动态变化的场景
3. 文件系统的实时监听超出了预设的职责范围

解决方案探讨

方案一：Vite 集成方案

对于使用 Vite 的项目，可以通过 Vite 的插件系统实现文件监听：

1. 在 Vite 插件中使用 chokidar 监听目标目录
2. 在文件变化时更新 UnoCSS 的配置依赖
3. 通过 transform 钩子触发 UnoCSS 重建

// 示例代码
export function myPlugin() {
  return {
    name: 'unocss-file-watcher',
    configureServer(server) {
      const watcher = chokidar.watch('src/**/*.ext')
      watcher.on('add', (path) => {
        // 更新 UnoCSS 配置
        server.ws.send({ type: 'full-reload' })
      })
    }
  }
}

方案二：预设扩展模式

虽然官方不建议在预设中处理文件监听，但可以通过以下方式实现有限支持：

1. 预设暴露文件监听配置选项
2. 在构建工具层面集成监听逻辑
3. 通过事件机制通知 UnoCSS 更新

export function defineDynamicPreset(options) {
  let watcher;
  
  return {
    name: 'dynamic-preset',
    configResolved(config) {
      if (options.watch) {
        watcher = chokidar.watch(options.watch)
        watcher.on('all', () => {
          // 触发 UnoCSS 更新
        })
      }
    },
    // ...其他预设逻辑
  }
}

最佳实践建议

1. 关注点分离原则：将文件监听逻辑与样式生成逻辑解耦
2. 构建工具集成：优先在 Vite/Rollup 等构建工具层面实现监听
3. 性能考量：避免过度监听大目录，合理设置 glob 模式
4. 开发体验：在开发模式下启用监听，生产构建时使用静态分析

技术实现原理

UnoCSS 的核心工作流程包括：

1. 解析配置和预设
2. 扫描源代码
3. 生成实用类
4. 输出 CSS

文件监听应该作用于整个流程的开始阶段，通过构建工具的机制触发 UnoCSS 重新初始化，而不是在预设内部处理。

总结

UnoCSS 的预设系统设计初衷是处理确定性的样式生成逻辑。对于需要动态响应文件变化的场景，建议在更高层级的构建工具中实现文件监听机制，通过标准的构建流程触发 UnoCSS 重建。这种架构既符合关注点分离原则，又能充分利用构建工具现有的文件监听能力。