如何使用规则而非原生CSS配置UnoCSS的Preflights？

可以通过UnoCSS内置的类名解析与生成工具，在Preflights中用类名替代原生CSS代码来定义全局样式，具体实现方式如下：

方法一：使用parse和generate工具函数 #

直接利用UnoCSS提供的解析和生成函数，将类名转换为对应的CSS属性，再绑定到目标选择器上：

import { defineConfig, parse, generate } from 'unocss'

export default defineConfig({
  theme: {
    // 你的主题配置，比如颜色、间距等
    spacing: {
      3: '0.75rem'
    },
    borderWidth: {
      5: '5px'
    }
  },
  preflights: [
    {
      getCSS: ({ theme }) => {
        // 定义需要全局应用的选择器和对应类名
        const globalStyleEntries = [
          { selector: 'button', classes: ['m-3', 'border-5', 'rounded-2px'] },
          { selector: '*', classes: ['p-0', 'm-0', 'text-gray-700'] }
        ]

        return globalStyleEntries.map(({ selector, classes }) => {
          // 解析类名得到UnoCSS内部规则结构
          const parsedRules = parse(classes.join(' '), { theme })
          // 将解析后的规则转换为CSS属性字符串
          const cssProperties = generate(parsedRules, { theme })
          // 拼接成完整的选择器CSS规则
          return `${selector} { ${cssProperties.replace(/\n/g, ' ').trim()} }`
        }).join('\n')
      }
    }
  ],
  // 其他UnoCSS配置，比如自定义规则、预设等
})

方法二：使用createGenerator生成器 #

如果需要更灵活的类名处理（比如依赖自定义规则），可以创建UnoCSS生成器实例来生成对应样式：

import { defineConfig, createGenerator } from 'unocss'

// 创建生成器实例，同步主题和规则配置
const unoGenerator = createGenerator({
  theme: {
    spacing: { 3: '0.75rem' },
    borderWidth: { 5: '5px' }
  },
  // 自定义规则（如果有）
  rules: [
    ['rounded-2px', { 'border-radius': '2px' }]
  ]
})

export default defineConfig({
  theme: {
    spacing: { 3: '0.75rem' },
    borderWidth: { 5: '5px' }
  },
  rules: [
    ['rounded-2px', { 'border-radius': '2px' }]
  ],
  preflights: [
    {
      async getCSS({ theme }) {
        // 定义目标类名
        const targetClasses = ['m-3', 'border-5', 'rounded-2px']
        // 生成类名对应的完整CSS
        const { css } = await unoGenerator.generate(targetClasses.join(' '), { theme })
        // 提取类名对应的样式属性（去掉类名选择器部分）
        const rawStyles = css.replace(/\.[\w-]+ {/g, '').replace(/}/g, '').trim()
        // 绑定到button选择器
        return `button { ${rawStyles} }`
      }
    }
  ]
})

注意事项 #

• 确保使用的类名是UnoCSS内置支持的，或者已经在自定义规则中配置好，否则无法生成对应的CSS
• 主题配置要保持一致，避免解析类名时出现主题变量不匹配的问题
• 异步getCSS需要UnoCSS版本≥0.50.0支持，若使用旧版本可改用同步方式

内容的提问来源于stack exchange，提问作者sigmaxf