diff --git a/packages/preset-mini/src/_variants/pseudo.ts b/packages/preset-mini/src/_variants/pseudo.ts index dbd24984f..4e292d41a 100644 --- a/packages/preset-mini/src/_variants/pseudo.ts +++ b/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', '+'), ] } diff --git a/test/assets/output/preset-mini-targets.css b/test/assets/output/preset-mini-targets.css index 487914807..1ef437f4b 100644 --- a/test/assets/output/preset-mini-targets.css +++ b/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;} diff --git a/test/assets/preset-mini-targets.ts b/test/assets/preset-mini-targets.ts index 4800cfa65..3f0b9035a 100644 --- a/test/assets/preset-mini-targets.ts +++ b/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',