feat(preset-mini)!: allow empty string for variablePrefix (#2093)

packages/preset-mini/src/index.ts

@@ -64,35 +64,36 @@ export const presetMini = (options: PresetMiniOptions = {}): Preset<Theme> => {
   options.dark = options.dark ?? 'class'
   options.attributifyPseudo = options.attributifyPseudo ?? false
   options.preflight = options.preflight ?? true
+  options.variablePrefix = options.variablePrefix ?? 'un-'
 
   return {
     name: '@unocss/preset-mini',
     theme,
     rules,
     variants: variants(options),
     options,
-    postprocess: options.variablePrefix && options.variablePrefix !== 'un-'
-      ? VarPrefixPostprocessor(options.variablePrefix)
-      : undefined,
+    postprocess: VarPrefixPostprocessor(options.variablePrefix),
     preflights: options.preflight ? normalizePreflights(preflights, options.variablePrefix) : [],
     prefix: options.prefix,
   }
 }
 
 export default presetMini
 
-export function VarPrefixPostprocessor(prefix: string): Postprocessor {
-  return (obj) => {
-    obj.entries.forEach((i) => {
-      i[0] = i[0].replace(/^--un-/, `--${prefix}`)
-      if (typeof i[1] === 'string')
-        i[1] = i[1].replace(/var\(--un-/g, `var(--${prefix}`)
-    })
+export function VarPrefixPostprocessor(prefix: string): Postprocessor | undefined {
+  if (prefix !== 'un-') {
+    return (obj) => {
+      obj.entries.forEach((i) => {
+        i[0] = i[0].replace(/^--un-/, `--${prefix}`)
+        if (typeof i[1] === 'string')
+          i[1] = i[1].replace(/var\(--un-/g, `var(--${prefix}`)
+      })
+    }
   }
 }
 
-export function normalizePreflights(preflights: Preflight[], variablePrefix?: string) {
-  if (variablePrefix && variablePrefix !== 'un-') {
+export function normalizePreflights(preflights: Preflight[], variablePrefix: string) {
+  if (variablePrefix !== 'un-') {
     return preflights.map(p => ({
       ...p,
       getCSS: (() => async (ctx: PreflightContext) => {

packages/preset-uno/src/index.ts

@@ -12,6 +12,7 @@ export const presetUno = (options: PresetUnoOptions = {}): Preset<Theme> => {
   options.dark = options.dark ?? 'class'
   options.attributifyPseudo = options.attributifyPseudo ?? false
   options.preflight = options.preflight ?? true
+  options.variablePrefix = options.variablePrefix ?? 'un-'
 
   return {
     name: '@unocss/preset-uno',
@@ -23,9 +24,7 @@ export const presetUno = (options: PresetUnoOptions = {}): Preset<Theme> => {
       variantColorMix(),
     ],
     options,
-    postprocess: options.variablePrefix && options.variablePrefix !== 'un-'
-      ? VarPrefixPostprocessor(options.variablePrefix)
-      : undefined,
+    postprocess: VarPrefixPostprocessor(options.variablePrefix),
     preflights: options.preflight ? normalizePreflights(preflights, options.variablePrefix) : [],
     prefix: options.prefix,
   }

packages/preset-wind/src/index.ts

@@ -18,6 +18,7 @@ export const presetWind = (options: PresetWindOptions = {}): Preset<Theme> => {
   options.dark = options.dark ?? 'class'
   options.attributifyPseudo = options.attributifyPseudo ?? false
   options.preflight = options.preflight ?? true
+  options.variablePrefix = options.variablePrefix ?? 'un-'
 
   return {
     name: '@unocss/preset-wind',
@@ -26,9 +27,7 @@ export const presetWind = (options: PresetWindOptions = {}): Preset<Theme> => {
     shortcuts,
     variants: variants(options),
     options,
-    postprocess: options.variablePrefix && options.variablePrefix !== 'un-'
-      ? VarPrefixPostprocessor(options.variablePrefix)
-      : undefined,
+    postprocess: VarPrefixPostprocessor(options.variablePrefix),
     preflights: options.preflight ? normalizePreflights(preflights, options.variablePrefix) : [],
     prefix: options.prefix,
   }

test/__snapshots__/preflights.test.ts.snap

@@ -17,6 +17,11 @@ exports[`preflights > preflight root can be customized with string 1`] = `
 :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 empty variablePrefix 1`] = `
+"/* layer: preflights */
+*,::before,::after{--rotate:0;--rotate-x:0;--rotate-y:0;--rotate-z:0;--scale-x:1;--scale-y:1;--scale-z:1;--skew-x:0;--skew-y:0;--translate-x:0;--translate-y:0;--translate-z:0;--ring-offset-shadow:0 0 rgba(0,0,0,0);--ring-shadow:0 0 rgba(0,0,0,0);--shadow-inset: ;--shadow:0 0 rgba(0,0,0,0);--ring-inset: ;--ring-offset-width:0px;--ring-offset-color:#fff;--ring-width:0px;--ring-color:rgba(147,197,253,0.5);}::backdrop{--rotate:0;--rotate-x:0;--rotate-y:0;--rotate-z:0;--scale-x:1;--scale-y:1;--scale-z:1;--skew-x:0;--skew-y:0;--translate-x:0;--translate-y:0;--translate-z:0;--ring-offset-shadow:0 0 rgba(0,0,0,0);--ring-shadow:0 0 rgba(0,0,0,0);--shadow-inset: ;--shadow:0 0 rgba(0,0,0,0);--ring-inset: ;--ring-offset-width:0px;--ring-offset-color:#fff;--ring-width:0px;--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/__snapshots__/preset-mini.test.ts.snap

@@ -17,6 +17,13 @@ exports[`preset-mini > dark customizing selector 1`] = `
 [data-mode=\\"light\\"] .light\\\\:disabled\\\\:w-full:disabled{width:100%;}"
 `;
 
+exports[`preset-mini > empty prefix 1`] = `
+"/* layer: default */
+.text-red{--text-opacity:1;color:rgba(248,113,113,var(--text-opacity));}
+.text-opacity-50{--text-opacity:0.5;}
+.scale-100{--scale-x:1;--scale-y:1;transform:translateX(var(--translate-x)) translateY(var(--translate-y)) translateZ(var(--translate-z)) rotate(var(--rotate)) rotateX(var(--rotate-x)) rotateY(var(--rotate-y)) rotateZ(var(--rotate-z)) skewX(var(--skew-x)) skewY(var(--skew-y)) scaleX(var(--scale-x)) scaleY(var(--scale-y)) scaleZ(var(--scale-z));}"
+`;
+
 exports[`preset-mini > fontSize theme 1`] = `
 "/* layer: default */
 .text-lg{font-size:3rem;line-height:1.5em;}

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

@@ -7,6 +7,13 @@ exports[`custom var prefix 1`] = `
 .text-opacity-50{--hi-text-opacity:0.5;}"
 `;
 
+exports[`empty prefix 1`] = `
+"/* layer: default */
+.scale-100{--scale-x:1;--scale-y:1;transform:translateX(var(--translate-x)) translateY(var(--translate-y)) translateZ(var(--translate-z)) rotate(var(--rotate)) rotateX(var(--rotate-x)) rotateY(var(--rotate-y)) rotateZ(var(--rotate-z)) skewX(var(--skew-x)) skewY(var(--skew-y)) scaleX(var(--scale-x)) scaleY(var(--scale-y)) scaleZ(var(--scale-z));}
+.text-red{--text-opacity:1;color:rgba(248,113,113,var(--text-opacity));}
+.text-opacity-50{--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

@@ -1,5 +1,12 @@
 // Vitest Snapshot v1
 
+exports[`empty prefix 1`] = `
+"/* layer: default */
+.scale-100{--scale-x:1;--scale-y:1;transform:translateX(var(--translate-x)) translateY(var(--translate-y)) translateZ(var(--translate-z)) rotate(var(--rotate)) rotateX(var(--rotate-x)) rotateY(var(--rotate-y)) rotateZ(var(--rotate-z)) skewX(var(--skew-x)) skewY(var(--skew-y)) scaleX(var(--scale-x)) scaleY(var(--scale-y)) scaleZ(var(--scale-z));}
+.text-red{--text-opacity:1;color:rgba(248,113,113,var(--text-opacity));}
+.text-opacity-50{--text-opacity:0.5;}"
+`;
+
 exports[`preset-wind > centered containers 1`] = `
 "/* layer: shortcuts */
 .container{max-width:100%;margin-left:auto;margin-right:auto;}

test/preflights.test.ts

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

test/preset-mini.test.ts

@@ -97,6 +97,24 @@ describe('preset-mini', () => {
     expect(css).toMatchSnapshot()
   })
 
+  test('empty prefix', async () => {
+    const uno = createGenerator({
+      presets: [
+        presetMini({
+          variablePrefix: '',
+        }),
+      ],
+    })
+
+    const { css } = await uno.generate([
+      'text-opacity-50',
+      'text-red',
+      'scale-100',
+    ].join(' '), { preflights: false })
+
+    expect(css).toMatchSnapshot()
+  })
+
   test('nested theme colors', async () => {
     const { css, matched } = await uno.generate([
       'text-a-b-c',

test/preset-uno.test.ts

@@ -185,3 +185,21 @@ test('custom var prefix', async () => {
 
   expect(css).toMatchSnapshot()
 })
+
+test('empty prefix', async () => {
+  const uno = createGenerator({
+    presets: [
+      presetUno({
+        variablePrefix: '',
+      }),
+    ],
+  })
+
+  const { css } = await uno.generate([
+    'text-opacity-50',
+    'text-red',
+    'scale-100',
+  ].join(' '), { preflights: false })
+
+  expect(css).toMatchSnapshot()
+})

test/preset-wind.test.ts

@@ -111,3 +111,21 @@ describe('preset-wind', () => {
     expect(css).toMatchSnapshot()
   })
 })
+
+test('empty prefix', async () => {
+  const uno = createGenerator({
+    presets: [
+      presetWind({
+        variablePrefix: '',
+      }),
+    ],
+  })
+
+  const { css } = await uno.generate([
+    'text-opacity-50',
+    'text-red',
+    'scale-100',
+  ].join(' '), { preflights: false })
+
+  expect(css).toMatchSnapshot()
+})