Skip to content

Commit 7b76a07

Browse files
JungzlJungzl
authored
feat(preset-wind4): add support for nested $pseudo-aria-* and $pseudo-data-*variants (#4775)
1 parent 2fa0dfe commit 7b76a07

10 files changed

Lines changed: 169 additions & 74 deletions

File tree

‎packages-presets/preset-mini/src/_variants/aria.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,11 @@ function taggedAria(tagName: string): Variant {
2626
match(matcher, ctx: VariantContext<Theme>) {
2727
const variant = variantGetParameter(`${tagName}-aria-`, matcher, ctx.generator.config.separators)
2828
if (variant) {
29-
const [match, rest] = variant
29+
const [match, rest, label] = variant
3030
const ariaAttribute = h.bracket(match) ?? ctx.theme.aria?.[match] ?? ''
3131
if (ariaAttribute) {
3232
return {
33-
matcher: `${tagName}-[[aria-${ariaAttribute}]]:${rest}`,
33+
matcher: `${tagName}-[[aria-${ariaAttribute}]]${label ? `/${label}` : ''}:${rest}`,
3434
}
3535
}
3636
}

‎packages-presets/preset-wind4/src/variants/aria.ts‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,15 +27,30 @@ function taggedAria(tagName: string): Variant<Theme> {
2727
match(matcher, ctx) {
2828
const variant = variantGetParameter(`${tagName}-aria-`, matcher, ctx.generator.config.separators)
2929
if (variant) {
30-
const [match, rest] = variant
30+
const [match, rest, label] = variant
3131
const ariaAttribute = h.bracket(match) ?? ctx.theme.aria?.[match] ?? ''
3232
if (ariaAttribute) {
33+
const tagSelectorMap: Record<string, string> = {
34+
group: `&:is(:where(.group${label ? `\\/${label}` : ''})[aria-${ariaAttribute}] *)`,
35+
peer: `&:is(:where(.peer${label ? `\\/${label}` : ''})[aria-${ariaAttribute}] ~ *)`,
36+
previous: `:where(*[aria-${ariaAttribute}] + &)`,
37+
parent: `:where(*[aria-${ariaAttribute}] > &)`,
38+
has: `&:has(*[aria-${ariaAttribute}])`,
39+
in: `:where(*[aria-${ariaAttribute}]) &`,
40+
}
41+
3342
return {
34-
matcher: `${tagName}-[[aria-${ariaAttribute}]]:${rest}`,
43+
matcher: rest,
44+
handle: (input, next) => next({
45+
...input,
46+
parent: `${input.parent ? `${input.parent} $$ ` : ''}${input.selector}`,
47+
selector: tagSelectorMap[tagName],
48+
}),
3549
}
3650
}
3751
}
3852
},
53+
multiPass: true,
3954
}
4055
}
4156

‎packages-presets/preset-wind4/src/variants/data.ts‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,12 +29,27 @@ function taggedData(tagName: string): Variant<Theme> {
2929
const [match, rest, label] = variant
3030
const dataAttribute = h.bracket(match) ?? ctx.theme.data?.[match] ?? ''
3131
if (dataAttribute) {
32+
const tagSelectorMap: Record<string, string> = {
33+
group: `&:is(:where(.group${label ? `\\/${label}` : ''})[data-${dataAttribute}] *)`,
34+
peer: `&:is(:where(.peer${label ? `\\/${label}` : ''})[data-${dataAttribute}] ~ *)`,
35+
previous: `:where(*[data-${dataAttribute}] + &)`,
36+
parent: `:where(*[data-${dataAttribute}] > &)`,
37+
has: `&:has(*[data-${dataAttribute}])`,
38+
in: `:where(*[data-${dataAttribute}]) &`,
39+
}
40+
3241
return {
33-
matcher: `${tagName}-[[data-${dataAttribute}]]${label ? `/${label}` : ''}:${rest}`,
42+
matcher: rest,
43+
handle: (input, next) => next({
44+
...input,
45+
parent: `${input.parent ? `${input.parent} $$ ` : ''}${input.selector}`,
46+
selector: tagSelectorMap[tagName],
47+
}),
3448
}
3549
}
3650
}
3751
},
52+
multiPass: true,
3853
}
3954
}
4055

‎packages-presets/rule-utils/src/pseudo.ts‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -381,10 +381,6 @@ export function createTaggedPseudoClasses<T extends object = object>(
381381
tagWithPrefix('peer', '~'),
382382
tagWithPrefix('parent', '>'),
383383
tagWithPrefix('previous', '+'),
384-
tagWithPrefix('group-aria', ' '),
385-
tagWithPrefix('peer-aria', '~'),
386-
tagWithPrefix('parent-aria', '>'),
387-
tagWithPrefix('previous-aria', '+'),
388384
]
389385
}
390386

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

Lines changed: 11 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -629,9 +629,7 @@ unocss .scope-\[unocss\]\:block{display:block;}
629629
.marker\:bg-violet-200 *::marker,
630630
.marker\:bg-violet-200::marker{--un-bg-opacity:1;background-color:rgb(221 214 254 / var(--un-bg-opacity));}
631631
.first-line\:bg-green-400::first-line{--un-bg-opacity:1;background-color:rgb(74 222 128 / var(--un-bg-opacity));}
632-
.peer-aria:checked~.peer-aria-checked\:bg-blue-500,
633632
.peer:checked~.peer-checked\:bg-blue-500{--un-bg-opacity:1;background-color:rgb(59 130 246 / var(--un-bg-opacity));}
634-
.previous-aria\/label:checked+.previous-aria-checked\/label\:bg-red-500,
635633
.previous\/label:checked+.previous-checked\/label\:bg-red-500{--un-bg-opacity:1;background-color:rgb(239 68 68 / var(--un-bg-opacity));}
636634
.focus-within\:has-first\:checked\:bg-gray\/20:checked:has(:first-child):focus-within{background-color:rgb(156 163 175 / 0.2);}
637635
.focus-within\:where-first\:checked\:bg-gray\/20:checked:where(:first-child):focus-within{background-color:rgb(156 163 175 / 0.2);}
@@ -702,7 +700,6 @@ unocss .scope-\[unocss\]\:block{display:block;}
702700
.hover\:p-5:hover{padding:1.25rem;}
703701
.p-xy,
704702
.pxy,
705-
.group-aria:focus .group-aria-focus\:p-4,
706703
.group:focus .group-focus\:p-4{padding:1rem;}
707704
.first\:p-2:first-child{padding:0.5rem;}
708705
.p-x,
@@ -729,7 +726,6 @@ unocss .scope-\[unocss\]\:block{display:block;}
729726
.pbs-\$title2{padding-block-start:var(--title2);}
730727
.pis-10px{padding-inline-start:10px;}
731728
.group:hover:focus .group-hover\:group-focus\:text-center,
732-
.parent-aria:hover>.parent-aria-hover\:text-center,
733729
.parent:hover>.parent-hover\:text-center{text-align:center;}
734730
.text-left,
735731
[dir="ltr"] .ltr\:text-left{text-align:left;}
@@ -868,24 +864,24 @@ unocss .scope-\[unocss\]\:block{display:block;}
868864
.text-opacity-\[13\.3333333\%\]{--un-text-opacity:13.3333333%;}
869865
.text-opacity-\$opacity-variable{--un-text-opacity:var(--opacity-variable);}
870866
.placeholder-color-opacity-60::placeholder{--un-text-opacity:0.6;}
871-
.as-parent .group .group-\[\.as-parent_\&\]\:font-13,
872-
.as-parent .group-aria .group-aria-\[\.as-parent_\&\]\:font-13{font-weight:13;}
873-
.as-parent .group-aria\/label .group-aria-\[\.as-parent_\&\]\/label\:font-18,
867+
.as-parent .group .group-\[\.as-parent_\&\]\:font-13{font-weight:13;}
874868
.as-parent .group\/label .group-\[\.as-parent_\&\]\/label\:font-18{font-weight:18;}
875-
.group-aria:hover .group-aria-\[\:hover\]\:font-11,
876869
.group:hover .group-\[\:hover\]\:font-11{font-weight:11;}
877-
.group-aria.not-parent .group-aria-\[\.not-parent\]\:font-14,
878870
.group.not-parent .group-\[\.not-parent\]\:font-14{font-weight:14;}
879-
.group-aria[data-attr] .group-aria-\[\[data-attr\]\]\:font-12,
880871
.group[data-attr] .group-\[\[data-attr\]\]\:font-12{font-weight:12;}
881-
.group-aria\/label:hover .group-aria-\[\:hover\]\/label\:font-16,
872+
.group[data-state=open] .group-data-\[state\=open\]\:font-bold{font-weight:700;}
882873
.group\/label:hover .group-\[\:hover\]\/label\:font-16{font-weight:16;}
883-
.group-aria\/label.not-parent .group-aria-\[\.not-parent\]\/label\:font-19,
884874
.group\/label.not-parent .group-\[\.not-parent\]\/label\:font-19{font-weight:19;}
885-
.group-aria\/label[data-attr] .group-aria-\[\[data-attr\]\]\/label\:font-17,
886-
.group\/label[data-attr] .group-\[\[data-attr\]\]\/label\:font-17{font-weight:17;}
887-
.group[data-state=open] .group-data-\[state\=open\]\:font-bold{font-weight:700;}
875+
.group\/label[data-attr] .group-\[\[data-attr\]\]\/label\:font-17,
876+
.group\/named[data-x=y] .group-data-\[x\=y\]\/named\:font-17,
877+
.parent\/named[data-x=y]>.parent-data-\[x\=y\]\/named\:font-17,
878+
.peer\/named[data-x=y]~.peer-data-\[x\=y\]\/named\:font-17,
879+
.previous\/named[data-x=y]+.previous-data-\[x\=y\]\/named\:font-17{font-weight:17;}
880+
.group\/named[aria-level="1"] .group-aria-\[level\=\"1\"\]\/named\:font-21,
881+
.parent\/named[aria-level="3"]>.parent-aria-\[level\=\"3\"\]\/named\:font-21,
882+
.peer\/named[aria-level="2"]~.peer-aria-\[level\=\"2\"\]\/named\:font-21{font-weight:21;}
888883
.group\/named[data-state=open] .group-data-\[state\=open\]\/named\:font-medium{font-weight:500;}
884+
.previous\/named[aria-level="4"]+.previous-aria-\[level\=\"4\"\]\/named\:hover\:font-21:hover{font-weight:21;}
889885
.font-050,
890886
.font-50,
891887
.fw-050,
@@ -896,9 +892,7 @@ unocss .scope-\[unocss\]\:block{display:block;}
896892
.font-thin{font-weight:100;}
897893
.fw-inherit{font-weight:inherit;}
898894
.has-aria-\[hidden\=false\]\:font-20:has([aria-hidden=false]){font-weight:20;}
899-
.group-aria:hover .group-aria-hover\:font-10,
900895
.group:hover .group-hover\:font-10{font-weight:10;}
901-
.group-aria\/label:hover .group-aria-hover\/label\:font-15,
902896
.group\/label:hover .group-hover\/label\:font-15{font-weight:15;}
903897
.font-leading-2,
904898
.leading-2{line-height:0.5rem;}

0 commit comments

Comments
 (0)