fix(preset-mini): support group-data variant (#2849)

Co-authored-by: Chris <1633711653@qq.com>
Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>

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

@@ -1,4 +1,4 @@
-import type { VariantContext, VariantObject } from '@unocss/core'
+import type { Variant, VariantContext, VariantObject } from '@unocss/core'
 import type { Theme } from '../theme'
 import { h, variantGetParameter } from '../utils'
 
@@ -18,3 +18,19 @@ 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}`,
+        }
+      }
+    }
+  },
+}

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 } from './data'
+import { variantDataAttribute, variantGroupDataAttribute } from './data'
 import { variantContainerQuery } from './container'
 
 export function variants(options: PresetMiniOptions): Variant<Theme>[] {
@@ -42,5 +42,6 @@ export function variants(options: PresetMiniOptions): Variant<Theme>[] {
 
     variantContainerQuery,
     variantVariables,
+    variantGroupDataAttribute,
   ]
 }

test/preset-mini.test.ts

@@ -249,4 +249,23 @@ describe('preset-mini', () => {
 
     expect(css).toBe('')
   })
+
+  test('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')
+  })
 })