feat(preset-mini): Add support for peer and group variants on aria-* variants to Preset-Mini

packages/preset-mini/src/_variants/aria.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,28 @@ export const variantAria: VariantObject = {
     }
   },
 }
+
+function taggedAria(tagName: string): Variant {
+  return {
+    name: `${tagName}-aria`,
+    match(matcher, ctx: VariantContext<Theme>) {
+      const variant = variantGetParameter(`${tagName}-aria-`, matcher, ctx.generator.config.separators)
+      if (variant) {
+        const [match, rest] = variant
+        const ariaAttribute = h.bracket(match) ?? ctx.theme.aria?.[match] ?? ''
+        if (ariaAttribute) {
+          return {
+            matcher: `${tagName}-[[aria-${ariaAttribute}]]:${rest}`,
+          }
+        }
+      }
+    },
+  }
+}
+
+export const variantTaggedAriaAttributes: Variant[] = [
+  taggedAria('group'),
+  taggedAria('peer'),
+  taggedAria('parent'),
+  taggedAria('previous'),
+]

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

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

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

@@ -302,6 +302,10 @@ export function variantTaggedPseudoClasses(options: PresetMiniOptions = {}): Var
     tagWithPrefix('peer', '~'),
     tagWithPrefix('parent', '>'),
     tagWithPrefix('previous', '+'),
+    tagWithPrefix('group-aria', ' '),
+    tagWithPrefix('peer-aria', '~'),
+    tagWithPrefix('parent-aria', '>'),
+    tagWithPrefix('previous-aria', '+'),
   ]
 }
 

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

@@ -47,6 +47,7 @@
 .hover\:p-5:hover{padding:1.25rem;}
 .p-xy,
 .pxy,
+.group-aria:focus .group-aria-focus\:p-4,
 .group:focus .group-focus\:p-4{padding:1rem;}
 .first\:p-2:first-child{padding:0.5rem;}
 .p-x,
@@ -178,7 +179,9 @@ unocss .scope-\[unocss\]\:block{display:block;}
 .bg-teal-500\/\[55\%\]{background-color:rgb(20 184 166 / 55%);}
 .first-letter\:bg-green-400::first-letter{--un-bg-opacity:1;background-color:rgb(74 222 128 / var(--un-bg-opacity));}
 .first-line\:bg-green-400::first-line{--un-bg-opacity:1;background-color:rgb(74 222 128 / var(--un-bg-opacity));}
+.peer-aria:checked~.peer-aria-checked\:bg-blue-500,
 .peer:checked~.peer-checked\:bg-blue-500{--un-bg-opacity:1;background-color:rgb(59 130 246 / var(--un-bg-opacity));}
+.previous-aria\/label:checked+.previous-aria-checked\/label\:bg-red-500,
 .previous\/label:checked+.previous-checked\/label\:bg-red-500{--un-bg-opacity:1;background-color:rgb(239 68 68 / var(--un-bg-opacity));}
 .focus-within\:has-first\:checked\:bg-gray\/20:checked:has(:first-child):focus-within{background-color:rgb(156 163 175 / 0.2);}
 .focus-within\:where-first\:checked\:bg-gray\/20:checked:where(:first-child):focus-within{background-color:rgb(156 163 175 / 0.2);}
@@ -462,15 +465,23 @@ unocss .scope-\[unocss\]\:block{display:block;}
 .text-opacity-\[13\.3333333\%\]{--un-text-opacity:13.3333333%;}
 .text-opacity-\$opacity-variable{--un-text-opacity:var(--opacity-variable);}
 .placeholder-color-opacity-60::placeholder{--un-text-opacity:0.6;}
-.as-parent .group .group-\[\.as-parent_\&\]\:font-13{font-weight:13;}
+.as-parent .group .group-\[\.as-parent_\&\]\:font-13,
+.as-parent .group-aria .group-aria-\[\.as-parent_\&\]\:font-13{font-weight:13;}
+.as-parent .group-aria\/label .group-aria-\[\.as-parent_\&\]\/label\:font-18,
 .as-parent .group\/label .group-\[\.as-parent_\&\]\/label\:font-18{font-weight:18;}
+.group-aria:hover .group-aria-\[\:hover\]\:font-11,
 .group:hover .group-\[\:hover\]\:font-11{font-weight:11;}
+.group-aria.not-parent .group-aria-\[\.not-parent\]\:font-14,
 .group.not-parent .group-\[\.not-parent\]\:font-14{font-weight:14;}
+.group-aria[data-attr] .group-aria-\[\[data-attr\]\]\:font-12,
 .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-aria\/label:hover .group-aria-\[\:hover\]\/label\:font-16,
 .group\/label:hover .group-\[\:hover\]\/label\:font-16{font-weight:16;}
+.group-aria\/label.not-parent .group-aria-\[\.not-parent\]\/label\:font-19,
 .group\/label.not-parent .group-\[\.not-parent\]\/label\:font-19{font-weight:19;}
+.group-aria\/label[data-attr] .group-aria-\[\[data-attr\]\]\/label\:font-17,
 .group\/label[data-attr] .group-\[\[data-attr\]\]\/label\:font-17{font-weight:17;}
+.group[data-state=open] .group-data-\[state\=open\]\:font-bold{font-weight:700;}
 .font-050,
 .font-50,
 .fw-050,
@@ -480,7 +491,9 @@ unocss .scope-\[unocss\]\:block{display:block;}
 .fw-900{font-weight:900;}
 .font-thin{font-weight:100;}
 .fw-inherit{font-weight:inherit;}
+.group-aria:hover .group-aria-hover\:font-10,
 .group:hover .group-hover\:font-10{font-weight:10;}
+.group-aria\/label:hover .group-aria-hover\/label\:font-15,
 .group\/label:hover .group-hover\/label\:font-15{font-weight:15;}
 .font-leading-2,
 .leading-2{line-height:0.5rem;}
@@ -563,6 +576,7 @@ unocss .scope-\[unocss\]\:block{display:block;}
 .case-normal{text-transform:none;}
 .case-inherit{text-transform:inherit;}
 .group:hover:focus .group-hover\:group-focus\:text-center,
+.parent-aria:hover>.parent-aria-hover\:text-center,
 .parent:hover>.parent-hover\:text-center{text-align:center;}
 .text-left,
 [dir="ltr"] .ltr\:text-left{text-align:left;}

test/assets/preset-mini-targets.ts

@@ -1143,7 +1143,7 @@ export const presetMiniTargets: string[] = [
   'scope-[unocss]:block',
   'scope-[[data-any]]:inline',
 
-  // variants - tagged
+  // variants - taggedData
   'group-focus:p-4',
   'peer-checked:bg-blue-500',
   'parent-hover:text-center',
@@ -1159,6 +1159,22 @@ export const presetMiniTargets: string[] = [
   'group-[.as-parent_&]/label:font-18',
   'group-[.not-parent]/label:font-19',
 
+  // variants - taggedAria
+  'group-aria-focus:p-4',
+  'peer-aria-checked:bg-blue-500',
+  'parent-aria-hover:text-center',
+  'previous-aria-checked/label:bg-red-500',
+  'group-aria-hover:font-10',
+  'group-aria-[:hover]:font-11',
+  'group-aria-[[data-attr]]:font-12',
+  'group-aria-[.as-parent_&]:font-13',
+  'group-aria-[.not-parent]:font-14',
+  'group-aria-hover/label:font-15',
+  'group-aria-[:hover]/label:font-16',
+  'group-aria-[[data-attr]]/label:font-17',
+  'group-aria-[.as-parent_&]/label:font-18',
+  'group-aria-[.not-parent]/label:font-19',
+
   // variants - variables
   '[&:nth-child(2)]:m-10',
   '[&>*]:m-11',