feat(preset-mini): update group data variant (#3403)

Co-authored-by: Chris <1633711653@qq.com>

packages/preset-mini/src/_variants/data.ts

@@ -19,18 +19,27 @@ export const variantDataAttribute: VariantObject = {
   },
 }
 
-export const variantGroupDataAttribute: Variant = {
-  name: 'group-data',
-  match(matcher, ctx: VariantContext<Theme>) {
-    const variant = variantGetParameter('group-data-', matcher, ctx.generator.config.separators)
-    if (variant) {
-      const [match, rest] = variant
-      const dataAttribute = h.bracket(match) ?? ctx.theme.data?.[match] ?? ''
-      if (dataAttribute) {
-        return {
-          matcher: `group-[[data-${dataAttribute}]]:${rest}`,
+function taggedData(tagName: string): Variant {
+  return {
+    name: `${tagName}-data`,
+    match(matcher, ctx: VariantContext<Theme>) {
+      const variant = variantGetParameter(`${tagName}-data-`, matcher, ctx.generator.config.separators)
+      if (variant) {
+        const [match, rest] = variant
+        const dataAttribute = h.bracket(match) ?? ctx.theme.data?.[match] ?? ''
+        if (dataAttribute) {
+          return {
+            matcher: `${tagName}-[[data-${dataAttribute}]]:${rest}`,
+          }
         }
       }
-    }
-  },
+    },
+  }
 }
+
+export const variantTaggedDataAttributes: Variant[] = [
+  taggedData('group'),
+  taggedData('peer'),
+  taggedData('parent'),
+  taggedData('previous'),
+]

packages/preset-mini/src/_variants/default.ts

@@ -12,7 +12,7 @@ import { variantCustomMedia, variantPrint } from './media'
 import { variantSupports } from './supports'
 import { variantPartClasses, variantPseudoClassFunctions, variantPseudoClassesAndElements, variantTaggedPseudoClasses } from './pseudo'
 import { variantAria } from './aria'
-import { variantDataAttribute, variantGroupDataAttribute } from './data'
+import { variantDataAttribute, variantTaggedDataAttributes } from './data'
 import { variantContainerQuery } from './container'
 
 export function variants(options: PresetMiniOptions): Variant<Theme>[] {
@@ -42,6 +42,6 @@ export function variants(options: PresetMiniOptions): Variant<Theme>[] {
 
     variantContainerQuery,
     variantVariables,
-    variantGroupDataAttribute,
+    ...variantTaggedDataAttributes,
   ]
 }

test/__snapshots__/prefix.test.ts.snap

@@ -2,6 +2,7 @@
 
 exports[`prefix > generate tagged attributify 1`] = `
 "/* layer: default */
+[h-group=""][data-enabled] .group-data-\\[enabled\\]\\:h-bg-green{--un-bg-opacity:1;background-color:rgb(74 222 128 / var(--un-bg-opacity));}
 [h-group=""]:hover .group-hover\\:h-bg-red{--un-bg-opacity:1;background-color:rgb(248 113 113 / var(--un-bg-opacity));}"
 `;
 
@@ -57,6 +58,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[data-enabled] .group-data-\\[enabled\\]\\:h-bg-green{--un-bg-opacity:1;background-color:rgb(74 222 128 / var(--un-bg-opacity));}
 .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));}
@@ -97,5 +99,6 @@ exports[`prefix > preset prefix 1`] = `
 
 exports[`prefix > uses first truthy prefix 1`] = `
 "/* layer: default */
+.h-group[data-enabled] .group-data-\\[enabled\\]\\:h-bg-green{--un-bg-opacity:1;background-color:rgb(74 222 128 / var(--un-bg-opacity));}
 .h-group:hover .group-hover\\:h-bg-red{--un-bg-opacity:1;background-color:rgb(248 113 113 / var(--un-bg-opacity));}"
 `;

test/assets/output/preset-mini-targets.css

@@ -215,6 +215,8 @@ unocss .scope-\[unocss\]\:block{display:block;}
 .stroke-join-clip{stroke-linejoin:miter-clip;}
 .stroke-join-auto{stroke-linejoin:miter;}
 .stroke-none{stroke:none;}
+.peer[data-state=closed]~.peer-data-\[state\=closed\]\:border-3,
+.border-width-3{border-width:3px;}
 .b-2,
 .border-size-2{border-width:2px;}
 .border{border-width:1px;}
@@ -234,7 +236,6 @@ unocss .scope-\[unocss\]\:block{display:block;}
 .border-size-unset{border-width:unset;}
 .border-width-\[2em\]{border-width:2em;}
 .border-width-\[calc\(1em-1px\)\]{border-width:calc(1em - 1px);}
-.border-width-3{border-width:3px;}
 .border-x-size-2{border-left-width:2px;border-right-width:2px;}
 .border-x-width-3{border-left-width:3px;border-right-width:3px;}
 .border-s-width-\$variable{border-inline-start-width:var(--variable);}
@@ -449,6 +450,7 @@ unocss .scope-\[unocss\]\:block{display:block;}
 .group:hover .group-\[\:hover\]\:font-11{font-weight:11;}
 .group.not-parent .group-\[\.not-parent\]\:font-14{font-weight:14;}
 .group[data-attr] .group-\[\[data-attr\]\]\:font-12{font-weight:12;}
+.group[data-state=open] .group-data-\[state\=open\]\:font-bold{font-weight:700;}
 .group\/label:hover .group-\[\:hover\]\/label\:font-16{font-weight:16;}
 .group\/label.not-parent .group-\[\.not-parent\]\/label\:font-19{font-weight:19;}
 .group\/label[data-attr] .group-\[\[data-attr\]\]\/label\:font-17{font-weight:17;}

test/assets/preset-mini-targets.ts

@@ -1146,6 +1146,10 @@ export const presetMiniTargets: string[] = [
   'data-[inline]:inline',
   'data-[invalid~=grammar]:underline-green-600',
 
+  // variants - tagged-data
+  'group-data-[state=open]:font-bold',
+  'peer-data-[state=closed]:border-3',
+
   // variants - container parent
   '@container',
   '@container/label',

test/prefix.test.ts

@@ -34,6 +34,7 @@ describe('prefix', () => {
       'dark:hover:children:h-space-x-4',
       'dark:hover:children:h-divide-x',
       'group-hover:h-bg-red',
+      'group-data-[enabled]:h-bg-green',
     ]
 
     const { css, matched } = await uno.generate(new Set([
@@ -54,7 +55,7 @@ describe('prefix', () => {
       ],
     })
 
-    expect((await uno.generate('group-hover:h-bg-red', { preflights: false })).css).toMatchSnapshot()
+    expect((await uno.generate('group-hover:h-bg-red group-data-[enabled]:h-bg-green', { preflights: false })).css).toMatchSnapshot()
   })
 
   it('generate tagged attributify', async () => {
@@ -67,7 +68,7 @@ describe('prefix', () => {
       ],
     })
 
-    expect((await uno.generate('group-hover:h-bg-red', { preflights: false })).css).toMatchSnapshot()
+    expect((await uno.generate('group-hover:h-bg-red group-data-[enabled]:h-bg-green', { preflights: false })).css).toMatchSnapshot()
   })
 
   it('multiple preset prefix', async () => {

test/preset-mini.test.ts

@@ -250,25 +250,6 @@ describe('preset-mini', () => {
     expect(css).toBe('')
   })
 
-  it('group data variant', async () => {
-    const uno = createGenerator({
-      presets: [
-        presetMini(),
-      ],
-    })
-
-    const { css } = await uno.generate([
-      'group-data-[state=open]:rotate-180',
-      'group-data-[state=open]:text-black',
-      'data-[state=open]:text-red',
-      'group-hover:font-bold',
-    ].join(' '), {
-      preflights: false,
-    })
-
-    await expect(css).toMatchFileSnapshot('./assets/output/preset-mini-group-data.css')
-  })
-
   it('define breakpoints with other unit', async () => {
     const uno = createGenerator({
       presets: [