fix: handle leading combinators within `:has(...)` (#13606)

We need to ignore the leading combinator within a `:has(...)`, else it would not stop matching, assuming there are more parent selectors (which there aren't) and always fail.

https://github.com/sveltejs/svelte/pull/13567#issuecomment-2412405131
pull/13608/head
Simon H 11 months ago committed by GitHub
parent eb6488cd90
commit 81f28ccf5d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

@ -371,6 +371,16 @@ function relative_selector_might_apply_to_node(
for (const complex_selector of complex_selectors) {
const selectors = truncate(complex_selector);
const left_most_combinator = selectors[0]?.combinator ?? descendant_combinator;
// In .x:has(> y), we want to search for y, ignoring the left-most combinator
// (else it would try to walk further up and fail because there are no selectors left)
if (selectors.length > 0) {
selectors[0] = {
...selectors[0],
combinator: null
};
}
if (
selectors.length === 0 /* is :global(...) */ ||
apply_selector(selectors, rule, element, stylesheet, check_has)
@ -379,7 +389,7 @@ function relative_selector_might_apply_to_node(
// and now looking upwards for the .x part.
if (
apply_combinator(
selectors[0]?.combinator ?? descendant_combinator,
left_most_combinator,
selectors[0] ?? [],
[relative_selector],
rule,

@ -85,6 +85,20 @@ export default test({
column: 17,
line: 81
}
},
{
code: 'css_unused_selector',
message: 'Unused CSS selector "x:has(> z)"',
start: {
line: 88,
column: 1,
character: 968
},
end: {
line: 88,
column: 11,
character: 978
}
}
]
});

@ -75,3 +75,10 @@
/* (unused) .unused x:has(y) {
color: red;
}*/
x.svelte-xyz:has(> y:where(.svelte-xyz)) {
color: green;
}
/* (unused) x:has(> z) {
color: red;
}*/

@ -81,4 +81,11 @@
.unused x:has(y) {
color: red;
}
x:has(> y) {
color: green;
}
x:has(> z) {
color: red;
}
</style>

Loading…
Cancel
Save