FranklinWH-Toolbox/uno.config.ts

// uno.config.ts
import { defineConfig, presetWind4, presetTypography, presetAttributify, presetIcons } from 'unocss'
import type { Rule } from 'unocss'
import { Theme } from 'unocss/preset-wind4'
import transformerDirectives from '@unocss/transformer-directives'
import transformerVariantGroup from '@unocss/transformer-variant-group'

export default defineConfig({
  // ...UnoCSS options
  content: {
    pipeline: {
      include: [
        // default
        /\.(vue|svelte|[jt]sx|vine.ts|mdx?|astro|elm|php|phtml|html)($|\?)/,
        // include js/ts files
        'src/**/*.{js,ts}',
      ],
    },
  },

  blocklist: [
    /^[a-zA-Z]--/, // 正则表达式：以单个字母开头，后跟两个连字符
  ],

  presets: [
    presetWind4({
      dark: 'class', // UnoCSS 不支持 Tailwind 的 darkMode: ['selector', ...] 写法，但可用 class 模式模拟
    }), // Uno 默认预设
    presetAttributify(), // 如果你想使用属性风格的语法
    presetIcons({
      warn: true,
      autoInstall: true,
    }), // 纯CSS图标
    presetTypography(),
  ],

  transformers: [
    transformerDirectives(), // 支持 @apply 等指令
    transformerVariantGroup(), // 支持 hover:(bg-red text-white) 等
  ],

  theme: {
    colors: {},
  },

  rules: [
    // colors rules
    // [
    //   /^text-(.*)$/,
    //   ([, c], { theme }) => {
    //     if (theme.colors[c]) return { color: theme.colors[c] }
    //   },
    // ],
    ['text-primary', { color: 'var(--primary-color)' }],

    // transition增强
    [
      /^transition-(?:\[([\s\w,-]+)\]|([\w-]+))-(\d+)$/,
      ([, bracketedProperties, singleProperty, duration]) => {
        let properties

        if (bracketedProperties) {
          // 处理括号内的所有属性，无论数量多少
          properties = bracketedProperties
            .split(',')
            .map((prop) => prop.trim())
            .filter(Boolean) // 移除空值，处理可能的多余逗号
            .join(', ')
        } else {
          // 处理单个属性的情况
          properties = singleProperty
        }

        return {
          '--un-transition-duration': `${duration}ms`, // 捕获数值作为毫秒数
          'transition-property': properties,
          'transition-timing-function': 'var(--un-ease, var(--default-transition-timingFunction))',
          'transition-duration': 'var(--un-transition-duration)',
        }
      },
      {
        // 可选：指定 autocomplete 提示，方便开发时自动补全
        autocomplete: [
          'transition-<property>-<duration>',
          'transition-[<properties>]-<duration>',
          'transition-opacity-300',
          'transition-[opacity]-500',
          'transition-[opacity,transform]-300',
          'transition-[width,height,margin,padding]-400',
          'transition-[color,background-color,border-color,box-shadow]-600',
        ],
      },
    ] as Rule,
  ],
})