feat(preset-uno,preset-wind): support variablePrefix

packages/preset-mini/src/index.ts

@@ -81,7 +81,7 @@ export const presetMini = (options: PresetMiniOptions = {}): Preset<Theme> => {
 
 export default presetMini
 
-function VarPrefixPostprocessor(prefix: string): Postprocessor {
+export function VarPrefixPostprocessor(prefix: string): Postprocessor {
   return (obj) => {
     obj.entries.forEach((i) => {
       i[0] = i[0].replace(/^--un-/, `--${prefix}`)

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 { preflights } from '@unocss/preset-mini'
+import { VarPrefixPostprocessor, preflights } from '@unocss/preset-mini'
 import { variantColorMix } from './variants/mix'
 
 export type { Theme }
@@ -23,6 +23,9 @@ export const presetUno = (options: PresetUnoOptions = {}): Preset<Theme> => {
       variantColorMix,
     ],
     options,
+    postprocess: options.variablePrefix && options.variablePrefix !== 'un-'
+      ? VarPrefixPostprocessor(options.variablePrefix)
+      : undefined,
     preflights: options.preflight ? preflights : [],
     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 { preflights } from '@unocss/preset-mini'
+import { VarPrefixPostprocessor, preflights } from '@unocss/preset-mini'
 import { rules } from './rules'
 import { shortcuts } from './shortcuts'
 import { theme } from './theme'
@@ -26,6 +26,9 @@ export const presetWind = (options: PresetWindOptions = {}): Preset<Theme> => {
     shortcuts,
     variants: variants(options),
     options,
+    postprocess: options.variablePrefix && options.variablePrefix !== 'un-'
+      ? VarPrefixPostprocessor(options.variablePrefix)
+      : undefined,
     preflights: options.preflight ? preflights : [],
     prefix: options.prefix,
   }

test/__snapshots__/preset-uno.test.ts.snap

@@ -1,5 +1,12 @@
 // Vitest Snapshot v1
 
+exports[`custom var prefix 1`] = `
+"/* layer: default */
+.scale-100{--hi-scale-x:1;--hi-scale-y:1;transform:translateX(var(--hi-translate-x)) translateY(var(--hi-translate-y)) translateZ(var(--hi-translate-z)) rotate(var(--hi-rotate)) rotateX(var(--hi-rotate-x)) rotateY(var(--hi-rotate-y)) rotateZ(var(--hi-rotate-z)) skewX(var(--hi-skew-x)) skewY(var(--hi-skew-y)) scaleX(var(--hi-scale-x)) scaleY(var(--hi-scale-y)) scaleZ(var(--hi-scale-z));}
+.text-red{--hi-text-opacity:1;color:rgba(248,113,113,var(--hi-text-opacity));}
+.text-opacity-50{--hi-text-opacity:0.5;}"
+`;
+
 exports[`targets 1`] = `
 "/* layer: default */
 .border-custom-b{border-color:rgba(var(--custom), 1);}

test/__snapshots__/preset-wind.test.ts.snap

@@ -54,6 +54,13 @@ exports[`preset-wind > containers 1`] = `
 }"
 `;
 
+exports[`preset-wind > custom var prefix 1`] = `
+"/* layer: default */
+.scale-100{--hi-scale-x:1;--hi-scale-y:1;transform:translateX(var(--hi-translate-x)) translateY(var(--hi-translate-y)) translateZ(var(--hi-translate-z)) rotate(var(--hi-rotate)) rotateX(var(--hi-rotate-x)) rotateY(var(--hi-rotate-y)) rotateZ(var(--hi-rotate-z)) skewX(var(--hi-skew-x)) skewY(var(--hi-skew-y)) scaleX(var(--hi-scale-x)) scaleY(var(--hi-scale-y)) scaleZ(var(--hi-scale-z));}
+.text-red{--hi-text-opacity:1;color:rgba(248,113,113,var(--hi-text-opacity));}
+.text-opacity-50{--hi-text-opacity:0.5;}"
+`;
+
 exports[`preset-wind > targets 1`] = `
 "/* layer: preflights */
 *,::before,::after{--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-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y: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);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}::backdrop{--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-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y: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);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}

test/preset-uno.test.ts

@@ -167,3 +167,21 @@ test('non-targets', async () => {
   expect(Array.from(matched)).toEqual([])
   expect(css).toBe('')
 })
+
+test('custom var prefix', async () => {
+  const uno = createGenerator({
+    presets: [
+      presetUno({
+        variablePrefix: 'hi-',
+      }),
+    ],
+  })
+
+  const { css } = await uno.generate([
+    'text-opacity-50',
+    'text-red',
+    'scale-100',
+  ].join(' '), { preflights: false })
+
+  expect(css).toMatchSnapshot()
+})

test/preset-wind.test.ts

@@ -92,4 +92,22 @@ describe('preset-wind', () => {
     expect(matched).toEqual(new Set(targets))
     expect(css).toMatchSnapshot()
   })
+
+  test('custom var prefix', async () => {
+    const uno = createGenerator({
+      presets: [
+        presetWind({
+          variablePrefix: 'hi-',
+        }),
+      ],
+    })
+
+    const { css } = await uno.generate([
+      'text-opacity-50',
+      'text-red',
+      'scale-100',
+    ].join(' '), { preflights: false })
+
+    expect(css).toMatchSnapshot()
+  })
 })