sveltejs / svelte

Cybernetically enhanced web apps
https://svelte.dev
MIT License
78.58k stars 4.12k forks source link

`:has(...)` contents are not scoped #13395

Open Rich-Harris opened 6 days ago

Rich-Harris commented 6 days ago

Describe the bug

This...

.x:has(hr) {
  background: palegoldenrod;
}

:global(.y):has(hr) {
  background: palegoldenrod;
}

...becomes this:

.x.svelte-1bfks0l:has(hr) {
  background: palegoldenrod;
}

.y:has(hr) {
  background: palegoldenrod;
}

That's consistent with Svelte 4, but it's not consistent with how Svelte 5 handles :is(...) and :where(...). If we scoped the selector list, then either those styles would be removed as unused, or transformed into this:

.x.svelte-1bfks0l:has(hr:where(.svelte-1bfks0l)) {
  background: palegoldenrod;
}

.y:has([hr](hr:where(.svelte-1bfks0l))) {
  background: palegoldenrod;
}

The fourth functional pseudo-class is :not(...).

Options:

I don't know off the top of my head what the right answer is, but it would be good to have consistency.

Reproduction

link

7nik commented 6 days ago

I'd expect it to follow a very simple rule: if the selector is not inside :global(...) or :global {...}, then it gets scoped.