fix(preset-wind4): fix option variable-prefix not working (#5142)

micaiguai · web-flow · commit f1094ed2a8e7 · 2026-03-13T09:21:04.000Z
diff --git a/packages-presets/preset-wind4/src/postprocess/varPrefix.ts b/packages-presets/preset-wind4/src/postprocess/varPrefix.ts
@@ -3,6 +3,9 @@ import type { PresetWind4Options } from '..'
 
 export function varPrefix({ variablePrefix: prefix }: PresetWind4Options): Postprocessor[] {
   const processor: Postprocessor = (obj) => {
+    if (obj.layer === 'properties')
+      obj.selector = obj.selector.replace(/^@property --un-/, `@property --${prefix}`)
+
     obj.entries.forEach((i) => {
       i[0] = i[0].replace(/^--un-/, `--${prefix}`)
       if (typeof i[1] === 'string')
diff --git a/packages-presets/preset-wind4/src/preflights/property.ts b/packages-presets/preset-wind4/src/preflights/property.ts
@@ -18,13 +18,15 @@ export function property(options: PresetWind4Options): Preflight<Theme> | undefi
   const selector = propertyConfig?.selector
     ?? '*, ::before, ::after, ::backdrop'
 
+  const prefix = options.variablePrefix ?? 'un-'
+
   return {
     getCSS: () => {
       if (trackedProperties.size === 0)
         return
 
       const css = Array.from(trackedProperties.entries())
-        .map(([property, value]) => `${property}:${value};`)
+        .map(([property, value]) => `${property.replace(/^--un-/, `--${prefix}`)}:${value};`)
         .join('')
 
       return parentSelector === false
diff --git a/test/preset-wind4.test.ts b/test/preset-wind4.test.ts
@@ -464,6 +464,32 @@ describe('preset-wind4', () => {
       "
     `)
   })
+
+  it('basic variable prefix', async () => {
+    const uno = await createGenerator({
+      presets: [
+        presetWind4({
+          variablePrefix: 'foo-',
+          preflights: {
+            reset: false,
+            theme: false,
+            property: true,
+          },
+        }),
+      ],
+    })
+    const { css } = await uno.generate('bg-white')
+    expect(css).toMatchInlineSnapshot(`
+    "/* layer: properties */
+    @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*, ::before, ::after, ::backdrop{--foo-bg-opacity:100%;}}
+    @property --foo-bg-opacity{syntax:"<percentage>";inherits:false;initial-value:100%;}
+    /* layer: default */
+    .bg-white{background-color:color-mix(in srgb, var(--colors-white) var(--foo-bg-opacity), transparent);}
+    @supports (color: color-mix(in lab, red, red)){
+    .bg-white{background-color:color-mix(in oklab, var(--colors-white) var(--foo-bg-opacity), transparent);}
+    }"
+  `)
+  })
 })
 
 describe('important', () => {
