feat(preset-wind4): support theme variable safelist (#4730)

zyyv · web-flow · commit 368902150c3b · 2025-06-12T18:50:09.000+08:00
diff --git a/packages-presets/preset-wind4/src/index.ts b/packages-presets/preset-wind4/src/index.ts
@@ -45,8 +45,6 @@ export interface PreflightsTheme {
 
   /**
    * Process the theme keys.
-   *
-   * @default undefined
    */
   process?: Arrayable<(entry: CSSEntry, ctx: PreflightContext<Theme>) => void>
 }
diff --git a/packages-presets/preset-wind4/src/preflights/theme.ts b/packages-presets/preset-wind4/src/preflights/theme.ts
@@ -1,9 +1,9 @@
 import type { CSSEntry, Preflight } from '@unocss/core'
 import type { PreflightsTheme, PresetWind4Options } from '..'
 import type { Theme } from '../theme/types'
-import { toArray } from '@unocss/core'
+import { toArray, uniq } from '@unocss/core'
 import { alphaPlaceholdersRE } from '@unocss/rule-utils'
-import { compressCSS, getThemeByKey, trackedTheme } from '../utils'
+import { compressCSS, detectThemeValue, getThemeByKey, themeTracking, trackedTheme } from '../utils'
 
 /** Exclude output for CSS Variables */
 const ExcludeCssVarKeys = [
@@ -56,17 +56,33 @@ export function theme(options: PresetWind4Options): Preflight<Theme> {
     layer: 'theme',
     getCSS(ctx) {
       const { theme, generator } = ctx
-      const preflightsTheme = options.preflights!.theme as PreflightsTheme
-      if (preflightsTheme.mode === false) {
+      const safelist = uniq(generator.config.safelist.flatMap(s => typeof s === 'function' ? s(ctx) : s))
+      const { mode, process } = options.preflights!.theme as PreflightsTheme
+      if (mode === false) {
         return undefined
       }
 
-      let deps
+      if (safelist.length > 0) {
+        for (const s of safelist) {
+          const [key, ...prop] = s.trim().split(':')
+          if (key in theme && prop.length <= 1) {
+            const props = prop.length === 0 ? ['DEFAULT'] : prop[0].split('-')
+            const v = getThemeByKey(theme, key as keyof Theme, props)
+
+            if (typeof v === 'string') {
+              themeTracking(key, props)
+              detectThemeValue(v, theme)
+            }
+          }
+        }
+      }
+
+      let deps: CSSEntry[]
       const generateCSS = (deps: CSSEntry[]) => {
-        if (preflightsTheme.process) {
+        if (process) {
           for (const utility of deps) {
-            for (const process of toArray(preflightsTheme.process)) {
-              process(utility, ctx)
+            for (const p of toArray(process)) {
+              p(utility, ctx)
             }
           }
         }
@@ -83,15 +99,15 @@ ${depCSS}
 }`, generator.config.envMode === 'dev')
       }
 
-      if (preflightsTheme.mode === 'on-demand') {
+      if (mode === 'on-demand') {
         if (trackedTheme.size === 0)
           return undefined
 
         deps = Array.from(trackedTheme).map((k) => {
           const [key, prop] = k.split(':') as [keyof Theme, string]
           const v = getThemeByKey(theme, key, prop.split('-'))
 
-          if (v) {
+          if (typeof v === 'string') {
             return [`--${key}${`${key === 'spacing' && prop === 'DEFAULT' ? '' : `-${prop}`}`}`, v]
           }
 
diff --git a/packages-presets/preset-wind4/src/utils/theme-track.ts b/packages-presets/preset-wind4/src/utils/theme-track.ts
@@ -29,7 +29,8 @@ export function detectThemeValue(value: string, theme: Theme) {
     if (variable) {
       const [key, ...path] = variable.split('-')
       const themeValue = getThemeByKey(theme, key as keyof Theme, path)
-      if (themeValue != null) {
+
+      if (typeof themeValue === 'string') {
         themeTracking(key, path)
         detectThemeValue(themeValue, theme)
       }
diff --git a/test/preset-wind4.test.ts b/test/preset-wind4.test.ts
@@ -322,4 +322,53 @@ describe('preset-wind4', () => {
       }"
     `)
   })
+
+  it('theme safelist', async () => {
+    const uno = await createGenerator<object>({
+      envMode: 'dev',
+      theme: {
+        custom: {
+          foo: 'var(--custom-bar)',
+          bar: 'var(--custom-baz-DEFAULT, inherit)',
+          baz: {
+            DEFAULT: 'inherit',
+          },
+        },
+      },
+      presets: [
+        presetWind4({
+          preflights: {
+            reset: false,
+          },
+        }),
+      ],
+      safelist: [
+        'spacing',
+        'colors:red-100',
+        'breakpoint:sm',
+        ({ theme }) => {
+          if ('custom' in theme) {
+            return [
+              'custom:foo',
+            ]
+          }
+          return []
+        },
+      ],
+    })
+
+    const { getLayer } = await uno.generate('')
+    const css = getLayer('theme')
+    expect(css).toMatchInlineSnapshot(`
+      "/* layer: theme */
+      :root, :host {
+      --spacing: 0.25rem;
+      --colors-red-100: oklch(93.6% 0.032 17.717);
+      --breakpoint-sm: 40rem;
+      --custom-foo: var(--custom-bar);
+      --custom-bar: var(--custom-baz-DEFAULT, inherit);
+      --custom-baz-DEFAULT: inherit;
+      }"
+    `)
+  })
 })

Original file line number	Diff line number	Diff line change
`@@ -45,8 +45,6 @@ export interface PreflightsTheme {`
`45`	`45`
`46`	`46`	`/**`
`47`	`47`	`* Process the theme keys.`
`48`		`- *`
`49`		`- * @default undefined`
`50`	`48`	`*/`
`51`	`49`	`process?: Arrayable<(entry: CSSEntry, ctx: PreflightContext<Theme>) => void>`
`52`	`50`	`}`