fix(preset-mini): normalize preflights with variablePrefix (#2086)

close #2084

packages/preset-mini/src/index.ts

@@ -1,4 +1,4 @@
-import type { Postprocessor, Preset, PresetOptions } from '@unocss/core'
+import type { Postprocessor, Preflight, PreflightContext, Preset, PresetOptions } from '@unocss/core'
 import { preflights } from './preflights'
 import { rules } from './rules'
 import type { Theme, ThemeAnimation } from './theme'
@@ -74,7 +74,7 @@ export const presetMini = (options: PresetMiniOptions = {}): Preset<Theme> => {
     postprocess: options.variablePrefix && options.variablePrefix !== 'un-'
       ? VarPrefixPostprocessor(options.variablePrefix)
       : undefined,
-    preflights: options.preflight ? preflights : [],
+    preflights: options.preflight ? normalizePreflights(preflights, options.variablePrefix) : [],
     prefix: options.prefix,
   }
 }
@@ -90,3 +90,18 @@ export function VarPrefixPostprocessor(prefix: string): Postprocessor {
     })
   }
 }
+
+export function normalizePreflights(preflights: Preflight[], variablePrefix?: string) {
+  if (variablePrefix && variablePrefix !== 'un-') {
+    return preflights.map(p => ({
+      ...p,
+      getCSS: (() => async (ctx: PreflightContext) => {
+        const css = await p.getCSS(ctx)
+        if (css)
+          return css.replace(/--un-/g, `--${variablePrefix}`)
+      })(),
+    }))
+  }
+
+  return preflights
+}

packages/preset-uno/src/index.ts

@@ -1,7 +1,7 @@
 import type { Preset } from '@unocss/core'
 import type { PresetMiniOptions, Theme } from '@unocss/preset-mini'
 import { rules, shortcuts, theme, variants } from '@unocss/preset-wind'
-import { VarPrefixPostprocessor, preflights } from '@unocss/preset-mini'
+import { VarPrefixPostprocessor, normalizePreflights, preflights } from '@unocss/preset-mini'
 import { variantColorMix } from './variants/mix'
 
 export type { Theme }
@@ -26,7 +26,7 @@ export const presetUno = (options: PresetUnoOptions = {}): Preset<Theme> => {
     postprocess: options.variablePrefix && options.variablePrefix !== 'un-'
       ? VarPrefixPostprocessor(options.variablePrefix)
       : undefined,
-    preflights: options.preflight ? preflights : [],
+    preflights: options.preflight ? normalizePreflights(preflights, options.variablePrefix) : [],
     prefix: options.prefix,
   }
 }

packages/preset-wind/src/index.ts

@@ -1,6 +1,6 @@
 import type { Preset } from '@unocss/core'
 import type { PresetMiniOptions, Theme } from '@unocss/preset-mini'
-import { VarPrefixPostprocessor, preflights } from '@unocss/preset-mini'
+import { VarPrefixPostprocessor, normalizePreflights, preflights } from '@unocss/preset-mini'
 import { rules } from './rules'
 import { shortcuts } from './shortcuts'
 import { theme } from './theme'
@@ -29,7 +29,7 @@ export const presetWind = (options: PresetWindOptions = {}): Preset<Theme> => {
     postprocess: options.variablePrefix && options.variablePrefix !== 'un-'
       ? VarPrefixPostprocessor(options.variablePrefix)
       : undefined,
-    preflights: options.preflight ? preflights : [],
+    preflights: options.preflight ? normalizePreflights(preflights, options.variablePrefix) : [],
     prefix: options.prefix,
   }
 }

test/__snapshots__/preflights.test.ts.snap

@@ -16,3 +16,8 @@ exports[`preflights > preflight root can be customized with string 1`] = `
 "/* layer: preflights */
 :root{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-ring-offset-shadow:0 0 rgba(0,0,0,0);--un-ring-shadow:0 0 rgba(0,0,0,0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0,0,0,0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,0.5);}"
 `;
+
+exports[`preflights > preflight with variablePrefix 1`] = `
+"/* layer: preflights */
+*,::before,::after{--test-rotate:0;--test-rotate-x:0;--test-rotate-y:0;--test-rotate-z:0;--test-scale-x:1;--test-scale-y:1;--test-scale-z:1;--test-skew-x:0;--test-skew-y:0;--test-translate-x:0;--test-translate-y:0;--test-translate-z:0;--test-ring-offset-shadow:0 0 rgba(0,0,0,0);--test-ring-shadow:0 0 rgba(0,0,0,0);--test-shadow-inset: ;--test-shadow:0 0 rgba(0,0,0,0);--test-ring-inset: ;--test-ring-offset-width:0px;--test-ring-offset-color:#fff;--test-ring-width:0px;--test-ring-color:rgba(147,197,253,0.5);}::backdrop{--test-rotate:0;--test-rotate-x:0;--test-rotate-y:0;--test-rotate-z:0;--test-scale-x:1;--test-scale-y:1;--test-scale-z:1;--test-skew-x:0;--test-skew-y:0;--test-translate-x:0;--test-translate-y:0;--test-translate-z:0;--test-ring-offset-shadow:0 0 rgba(0,0,0,0);--test-ring-shadow:0 0 rgba(0,0,0,0);--test-shadow-inset: ;--test-shadow:0 0 rgba(0,0,0,0);--test-ring-inset: ;--test-ring-offset-width:0px;--test-ring-offset-color:#fff;--test-ring-width:0px;--test-ring-color:rgba(147,197,253,0.5);}"
+`;

test/preflights.test.ts

@@ -83,4 +83,16 @@ describe('preflights', () => {
     const { css } = await uno.generate('')
     expect(css).eql('')
   })
+
+  test('preflight with variablePrefix', async () => {
+    const uno = createGenerator({
+      presets: [
+        presetMini({
+          variablePrefix: 'test-',
+        }),
+      ],
+    })
+    const { css } = await uno.generate('')
+    expect(css).toMatchSnapshot()
+  })
 })