feat: Add support for peer and group variants on aria-* variants

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'),
+]

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'
@@ -46,6 +46,7 @@ export function variants(options: PresetWeappOptions): Variant<Theme>[] {
     variantContainerQuery,
     variantVariables,
     ...variantTaggedDataAttributes,
+    ...variantTaggedAriaAttributes,
 
     variantTheme,
   ]

src/variants/pseudo.ts

@@ -294,6 +294,10 @@ export function variantTaggedPseudoClasses(options: PresetWeappOptions = {}): Va
     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

@@ -184,6 +184,7 @@ page,root-portal-content,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rot
 .hover\:p-5:hover{padding:40rpx;}
 .p-xy,
 .pxy,
+.group-aria:focus .group-aria-focus\:p-4,
 .group:focus .group-focus\:p-4{padding:32rpx;}
 .first\:p-2:first-child{padding:16rpx;}
 .p-x,
@@ -315,7 +316,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{--licl-bg-opacity:1;background-color:rgb(74 222 128 / var(--licl-bg-opacity));}
 .first-line\:bg-green-400::first-line{--licl-bg-opacity:1;background-color:rgb(74 222 128 / var(--licl-bg-opacity));}
+.peer-aria:checked~.peer-aria-checked\:bg-blue-500,
 .peer:checked~.peer-checked\:bg-blue-500{--licl-bg-opacity:1;background-color:rgb(59 130 246 / var(--licl-bg-opacity));}
+.previous-aria\/label:checked+.previous-aria-checked\/label\:bg-red-500,
 .previous\/label:checked+.previous-checked\/label\:bg-red-500{--licl-bg-opacity:1;background-color:rgb(239 68 68 / var(--licl-bg-opacity));}
 .bg-\[--css-bg\,theme\(spacing\.sm\)\]{background-color:var(--css-bg,28rpx);}
 .focus-within\:has-first\:checked\:bg-gray\/20:checked:has(:first-child):focus-within{background-color:rgb(156 163 175 / 0.2);}
@@ -596,23 +599,33 @@ unocss .scope-\[unocss\]\:block{display:block;}
 .text-opacity-\[13\.3333333\%\]{--licl-text-opacity:13.3333333%;}
 .text-opacity-\$opacity-variable{--licl-text-opacity:var(--opacity-variable);}
 .placeholder-color-opacity-60::placeholder{--licl-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,
 .fw-50{font-weight:50;}
 .font-900,
 .fw-900{font-weight:900;}
 .font-thin{font-weight:100;}
+.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:16rpx;}
@@ -695,6 +708,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/output/preset-weapp/targets-custom-rules.css

@@ -184,6 +184,7 @@ page,root-portal-content,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rot
 .hover_cl11_p-5:hover{padding:40rpx;}
 .p-xy,
 .pxy,
+.group-aria:focus .group-aria-focus_cl11_p-4,
 .group:focus .group-focus_cl11_p-4{padding:32rpx;}
 .first_cl11_p-2:first-child{padding:16rpx;}
 .p-x,
@@ -313,8 +314,10 @@ unocss .scope-_lfl11_unocss_lfr11__cl11_block{display:block;}
 .bg-teal-500_sl11__lfl11_55_pes11__lfr11_{background-color:rgb(20 184 166 / 55%);}
 .first-letter_cl11_bg-green-400::first-letter{--un-bg-opacity:1;background-color:rgb(74 222 128 / var(--un-bg-opacity));}
 .first-line_cl11_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_cl11_bg-blue-500,
 .peer:checked~.peer-checked_cl11_bg-blue-500{--un-bg-opacity:1;background-color:rgb(59 130 246 / var(--un-bg-opacity));}
-.previous_sl11_label:checked+.previous-checked_sl11_label_cl11_bg-red-500{--un-bg-opacity:1;background-color:rgb(239 68 68 / var(--un-bg-opacity));}
+.previous_sl11_label:checked+.previous-checked_sl11_label_cl11_bg-red-500,
+.previous-aria_sl11_label:checked+.previous-aria-checked_sl11_label_cl11_bg-red-500{--un-bg-opacity:1;background-color:rgb(239 68 68 / var(--un-bg-opacity));}
 .bg-_lfl11_--css-bg_lco11_theme_lbl11_spacing_dl11_sm_lbr11__lfr11_{background-color:var(--css-bg,28rpx);}
 .focus-within_cl11_has-first_cl11_checked_cl11_bg-gray_sl11_20:checked:has(:first-child):focus-within{background-color:rgb(156 163 175 / 0.2);}
 .focus-within_cl11_where-first_cl11_checked_cl11_bg-gray_sl11_20:checked:where(:first-child):focus-within{background-color:rgb(156 163 175 / 0.2);}
@@ -597,13 +600,21 @@ unocss .scope-_lfl11_unocss_lfr11__cl11_block{display:block;}
 .text-opacity-_do11_opacity-variable{--un-text-opacity:var(--opacity-variable);}
 .text-opacity-_lfl11_13_dl11_3333333_pes11__lfr11_{--un-text-opacity:13.3333333%;}
 .placeholder-color-opacity-60::placeholder{--un-text-opacity:0.6;}
-.as-parent .group .group-_lfl11__dl11_as-parent_\&_lfr11__cl11_font-13{font-weight:13;}
-.as-parent .group_sl11_label .group-_lfl11__dl11_as-parent_\&_lfr11__sl11_label_cl11_font-18{font-weight:18;}
-.group_sl11_label:hover .group-_lfl11__cl11_hover_lfr11__sl11_label_cl11_font-16{font-weight:16;}
-.group_sl11_label.not-parent .group-_lfl11__dl11_not-parent_lfr11__sl11_label_cl11_font-19{font-weight:19;}
-.group_sl11_label[data-attr] .group-_lfl11__lfl11_data-attr_lfr11__lfr11__sl11_label_cl11_font-17{font-weight:17;}
+.as-parent .group .group-_lfl11__dl11_as-parent_\&_lfr11__cl11_font-13,
+.as-parent .group-aria .group-aria-_lfl11__dl11_as-parent_\&_lfr11__cl11_font-13{font-weight:13;}
+.as-parent .group_sl11_label .group-_lfl11__dl11_as-parent_\&_lfr11__sl11_label_cl11_font-18,
+.as-parent .group-aria_sl11_label .group-aria-_lfl11__dl11_as-parent_\&_lfr11__sl11_label_cl11_font-18{font-weight:18;}
+.group_sl11_label:hover .group-_lfl11__cl11_hover_lfr11__sl11_label_cl11_font-16,
+.group-aria_sl11_label:hover .group-aria-_lfl11__cl11_hover_lfr11__sl11_label_cl11_font-16{font-weight:16;}
+.group_sl11_label.not-parent .group-_lfl11__dl11_not-parent_lfr11__sl11_label_cl11_font-19,
+.group-aria_sl11_label.not-parent .group-aria-_lfl11__dl11_not-parent_lfr11__sl11_label_cl11_font-19{font-weight:19;}
+.group_sl11_label[data-attr] .group-_lfl11__lfl11_data-attr_lfr11__lfr11__sl11_label_cl11_font-17,
+.group-aria_sl11_label[data-attr] .group-aria-_lfl11__lfl11_data-attr_lfr11__lfr11__sl11_label_cl11_font-17{font-weight:17;}
+.group-aria:hover .group-aria-_lfl11__cl11_hover_lfr11__cl11_font-11,
 .group:hover .group-_lfl11__cl11_hover_lfr11__cl11_font-11{font-weight:11;}
+.group-aria.not-parent .group-aria-_lfl11__dl11_not-parent_lfr11__cl11_font-14,
 .group.not-parent .group-_lfl11__dl11_not-parent_lfr11__cl11_font-14{font-weight:14;}
+.group-aria[data-attr] .group-aria-_lfl11__lfl11_data-attr_lfr11__lfr11__cl11_font-12,
 .group[data-attr] .group-_lfl11__lfl11_data-attr_lfr11__lfr11__cl11_font-12{font-weight:12;}
 .group[data-state=open] .group-data-_lfl11_state_eqe11_open_lfr11__cl11_font-bold{font-weight:700;}
 .font-050,
@@ -613,7 +624,9 @@ unocss .scope-_lfl11_unocss_lfr11__cl11_block{display:block;}
 .font-900,
 .fw-900{font-weight:900;}
 .font-thin{font-weight:100;}
-.group_sl11_label:hover .group-hover_sl11_label_cl11_font-15{font-weight:15;}
+.group_sl11_label:hover .group-hover_sl11_label_cl11_font-15,
+.group-aria_sl11_label:hover .group-aria-hover_sl11_label_cl11_font-15{font-weight:15;}
+.group-aria:hover .group-aria-hover_cl11_font-10,
 .group:hover .group-hover_cl11_font-10{font-weight:10;}
 .font-leading-2,
 .leading-2{line-height:16rpx;}
@@ -696,6 +709,7 @@ unocss .scope-_lfl11_unocss_lfr11__cl11_block{display:block;}
 .case-normal{text-transform:none;}
 .case-inherit{text-transform:inherit;}
 .group:hover:focus .group-hover_cl11_group-focus_cl11_text-center,
+.parent-aria:hover>.parent-aria-hover_cl11_text-center,
 .parent:hover>.parent-hover_cl11_text-center{text-align:center;}
 .text-left,
 [dir="ltr"] .ltr_cl11_text-left{text-align:left;}

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

@@ -184,6 +184,7 @@ page,root-portal-content,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rot
 .hover_cl_p-5:hover{padding:40rpx;}
 .p-xy,
 .pxy,
+.group-aria:focus .group-aria-focus_cl_p-4,
 .group:focus .group-focus_cl_p-4{padding:32rpx;}
 .first_cl_p-2:first-child{padding:16rpx;}
 .p-x,
@@ -314,8 +315,10 @@ unocss .scope-_lfl_unocss_lfr__cl_block{display:block;}
 .dark .dark_cl_bg-white{--un-bg-opacity:1;background-color:rgb(255 255 255 / var(--un-bg-opacity));}
 .first-letter_cl_bg-green-400::first-letter{--un-bg-opacity:1;background-color:rgb(74 222 128 / var(--un-bg-opacity));}
 .first-line_cl_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_cl_bg-blue-500,
 .peer:checked~.peer-checked_cl_bg-blue-500{--un-bg-opacity:1;background-color:rgb(59 130 246 / var(--un-bg-opacity));}
-.previous_sl_label:checked+.previous-checked_sl_label_cl_bg-red-500{--un-bg-opacity:1;background-color:rgb(239 68 68 / var(--un-bg-opacity));}
+.previous_sl_label:checked+.previous-checked_sl_label_cl_bg-red-500,
+.previous-aria_sl_label:checked+.previous-aria-checked_sl_label_cl_bg-red-500{--un-bg-opacity:1;background-color:rgb(239 68 68 / var(--un-bg-opacity));}
 .bg-_lfl_--css-bg_lco_theme_lbl_spacing_dl_sm_lbr__lfr_{background-color:var(--css-bg,28rpx);}
 .focus-within_cl_has-first_cl_checked_cl_bg-gray_sl_20:checked:has(:first-child):focus-within{background-color:rgb(156 163 175 / 0.2);}
 .focus-within_cl_where-first_cl_checked_cl_bg-gray_sl_20:checked:where(:first-child):focus-within{background-color:rgb(156 163 175 / 0.2);}
@@ -599,13 +602,21 @@ unocss .scope-_lfl_unocss_lfr__cl_block{display:block;}
 .text-opacity-_do_opacity-variable{--un-text-opacity:var(--opacity-variable);}
 .text-opacity-_lfl_13_dl_3333333_pes__lfr_{--un-text-opacity:13.3333333%;}
 .placeholder-color-opacity-60::placeholder{--un-text-opacity:0.6;}
-.as-parent .group .group-_lfl__dl_as-parent_\&_lfr__cl_font-13{font-weight:13;}
-.as-parent .group_sl_label .group-_lfl__dl_as-parent_\&_lfr__sl_label_cl_font-18{font-weight:18;}
-.group_sl_label:hover .group-_lfl__cl_hover_lfr__sl_label_cl_font-16{font-weight:16;}
-.group_sl_label.not-parent .group-_lfl__dl_not-parent_lfr__sl_label_cl_font-19{font-weight:19;}
-.group_sl_label[data-attr] .group-_lfl__lfl_data-attr_lfr__lfr__sl_label_cl_font-17{font-weight:17;}
+.as-parent .group .group-_lfl__dl_as-parent_\&_lfr__cl_font-13,
+.as-parent .group-aria .group-aria-_lfl__dl_as-parent_\&_lfr__cl_font-13{font-weight:13;}
+.as-parent .group_sl_label .group-_lfl__dl_as-parent_\&_lfr__sl_label_cl_font-18,
+.as-parent .group-aria_sl_label .group-aria-_lfl__dl_as-parent_\&_lfr__sl_label_cl_font-18{font-weight:18;}
+.group_sl_label:hover .group-_lfl__cl_hover_lfr__sl_label_cl_font-16,
+.group-aria_sl_label:hover .group-aria-_lfl__cl_hover_lfr__sl_label_cl_font-16{font-weight:16;}
+.group_sl_label.not-parent .group-_lfl__dl_not-parent_lfr__sl_label_cl_font-19,
+.group-aria_sl_label.not-parent .group-aria-_lfl__dl_not-parent_lfr__sl_label_cl_font-19{font-weight:19;}
+.group_sl_label[data-attr] .group-_lfl__lfl_data-attr_lfr__lfr__sl_label_cl_font-17,
+.group-aria_sl_label[data-attr] .group-aria-_lfl__lfl_data-attr_lfr__lfr__sl_label_cl_font-17{font-weight:17;}
+.group-aria:hover .group-aria-_lfl__cl_hover_lfr__cl_font-11,
 .group:hover .group-_lfl__cl_hover_lfr__cl_font-11{font-weight:11;}
+.group-aria.not-parent .group-aria-_lfl__dl_not-parent_lfr__cl_font-14,
 .group.not-parent .group-_lfl__dl_not-parent_lfr__cl_font-14{font-weight:14;}
+.group-aria[data-attr] .group-aria-_lfl__lfl_data-attr_lfr__lfr__cl_font-12,
 .group[data-attr] .group-_lfl__lfl_data-attr_lfr__lfr__cl_font-12{font-weight:12;}
 .group[data-state=open] .group-data-_lfl_state_eqe_open_lfr__cl_font-bold{font-weight:700;}
 .font-050,
@@ -615,7 +626,9 @@ unocss .scope-_lfl_unocss_lfr__cl_block{display:block;}
 .font-900,
 .fw-900{font-weight:900;}
 .font-thin{font-weight:100;}
-.group_sl_label:hover .group-hover_sl_label_cl_font-15{font-weight:15;}
+.group_sl_label:hover .group-hover_sl_label_cl_font-15,
+.group-aria_sl_label:hover .group-aria-hover_sl_label_cl_font-15{font-weight:15;}
+.group-aria:hover .group-aria-hover_cl_font-10,
 .group:hover .group-hover_cl_font-10{font-weight:10;}
 .font-leading-2,
 .leading-2{line-height:16rpx;}
@@ -698,6 +711,7 @@ unocss .scope-_lfl_unocss_lfr__cl_block{display:block;}
 .case-normal{text-transform:none;}
 .case-inherit{text-transform:inherit;}
 .group:hover:focus .group-hover_cl_group-focus_cl_text-center,
+.parent-aria:hover>.parent-aria-hover_cl_text-center,
 .parent:hover>.parent-hover_cl_text-center{text-align:center;}
 .text-left,
 [dir="ltr"] .ltr_cl_text-left{text-align:left;}

test/assets/preset-mini-targets.ts

@@ -1321,6 +1321,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',