fix(preset-mini)!: Use prefix option to prefix tagged pseudo parent (…

…#3366)
unocss · Nov 29, 2023 · 6e1796c · 6e1796c
1 parent 3eeac2b
commit 6e1796c
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 6 deletions.
diff --git a/packages/preset-mini/src/_variants/pseudo.ts b/packages/preset-mini/src/_variants/pseudo.ts
@@ -292,12 +292,15 @@ export function variantPseudoClassFunctions(): VariantObject {
 
 export function variantTaggedPseudoClasses(options: PresetMiniOptions = {}): VariantObject[] {
   const attributify = !!options?.attributifyPseudo
+  let firstPrefix = options?.prefix ?? ''
+  firstPrefix = (Array.isArray(firstPrefix) ? firstPrefix : [firstPrefix]).filter(Boolean)[0] ?? ''
+  const tagWithPrefix = (tag: string, combinator: string) => taggedPseudoClassMatcher(tag, attributify ? `[${firstPrefix}${tag}=""]` : `.${firstPrefix}${tag}`, combinator)
 
   return [
-    taggedPseudoClassMatcher('group', attributify ? '[group=""]' : '.group', ' '),
-    taggedPseudoClassMatcher('peer', attributify ? '[peer=""]' : '.peer', '~'),
-    taggedPseudoClassMatcher('parent', attributify ? '[parent=""]' : '.parent', '>'),
-    taggedPseudoClassMatcher('previous', attributify ? '[previous=""]' : '.previous', '+'),
+    tagWithPrefix('group', ' '),
+    tagWithPrefix('peer', '~'),
+    tagWithPrefix('parent', '>'),
+    tagWithPrefix('previous', '+'),
   ]
 }
 

diff --git a/packages/preset-mini/src/index.ts b/packages/preset-mini/src/index.ts
@@ -38,7 +38,7 @@ export interface PresetMiniOptions extends PresetOptions {
    */
   dark?: 'class' | 'media' | DarkModeSelectors
   /**
-   * Generate pseudo selector as `[group=""]` instead of `.group`
+   * Generate tagged pseudo selector as `[group=""]` instead of `.group`
    *
    * @default false
    */
@@ -50,7 +50,7 @@ export interface PresetMiniOptions extends PresetOptions {
    */
   variablePrefix?: string
   /**
-   * Utils prefix
+   * Utils prefix. When using tagged pseudo selector, only the first truthy prefix will be used.
    *
    * @default undefined
    */

diff --git a/test/__snapshots__/prefix.test.ts.snap b/test/__snapshots__/prefix.test.ts.snap
@@ -1,5 +1,10 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`prefix > generate tagged attributify 1`] = `
+"/* layer: default */
+[h-group=""]:hover .group-hover\\:h-bg-red{--un-bg-opacity:1;background-color:rgb(248 113 113 / var(--un-bg-opacity));}"
+`;
+
 exports[`prefix > multiple preset prefix 1`] = `
 "/* layer: default */
 .h-container{width:100%;}
@@ -52,6 +57,7 @@ exports[`prefix > preset prefix 1`] = `
 .dark .dark\\:children\\:hover\\:h-space-x-4:hover>*>:not([hidden])~:not([hidden]){--un-space-x-reverse:0;margin-left:calc(1rem * calc(1 - var(--un-space-x-reverse)));margin-right:calc(1rem * var(--un-space-x-reverse));}
 .dark .dark\\:hover\\:children\\:h-space-x-4>*:hover>:not([hidden])~:not([hidden]){--un-space-x-reverse:0;margin-left:calc(1rem * calc(1 - var(--un-space-x-reverse)));margin-right:calc(1rem * var(--un-space-x-reverse));}
 .dark .dark\\:hover\\:children\\:h-divide-x>*:hover>:not([hidden])~:not([hidden]){--un-divide-x-reverse:0;border-left-width:calc(1px * calc(1 - var(--un-divide-x-reverse)));border-right-width:calc(1px * var(--un-divide-x-reverse));}
+.h-group:hover .group-hover\\:h-bg-red{--un-bg-opacity:1;background-color:rgb(248 113 113 / var(--un-bg-opacity));}
 .hover\\:h-p4:hover{padding:1rem;}
 .h-text-red{--un-text-opacity:1;color:rgb(248 113 113 / var(--un-text-opacity));}
 .bar-bar,
@@ -88,3 +94,8 @@ exports[`prefix > preset prefix 1`] = `
 .\\32 xl\\:h-container{max-width:768px;}
 }}"
 `;
+
+exports[`prefix > uses first truthy prefix 1`] = `
+"/* layer: default */
+.h-group:hover .group-hover\\:h-bg-red{--un-bg-opacity:1;background-color:rgb(248 113 113 / var(--un-bg-opacity));}"
+`;
diff --git a/test/prefix.test.ts b/test/prefix.test.ts
@@ -33,6 +33,7 @@ describe('prefix', () => {
       'dark:children:hover:h-space-x-4',
       'dark:hover:children:h-space-x-4',
       'dark:hover:children:h-divide-x',
+      'group-hover:h-bg-red',
     ]
 
     const { css, matched } = await uno.generate(new Set([
@@ -44,6 +45,31 @@ describe('prefix', () => {
     expect(css).toMatchSnapshot()
   })
 
+  it('uses first truthy prefix', async () => {
+    const uno = createGenerator({
+      presets: [
+        presetUno({
+          prefix: ['', 'h-'],
+        }),
+      ],
+    })
+
+    expect((await uno.generate('group-hover:h-bg-red', { preflights: false })).css).toMatchSnapshot()
+  })
+
+  it('generate tagged attributify', async () => {
+    const uno = createGenerator({
+      presets: [
+        presetUno({
+          prefix: 'h-',
+          attributifyPseudo: true,
+        }),
+      ],
+    })
+
+    expect((await uno.generate('group-hover:h-bg-red', { preflights: false })).css).toMatchSnapshot()
+  })
+
   it('multiple preset prefix', async () => {
     const uno = createGenerator({
       presets: [