Svelte 5: Non-top-level :has() selector is considered unused

[hyunbinseo]

Describe the bug

The <legend> element appears as

• [email protected] - Yellow (Broken)
• [email protected] - Red (Expected)

<form action="">
  <fieldset>
    <legend></legend>
  </fieldset>
</form>

<style lang="postcss">
  fieldset:has(> legend) {
    background-color: yellow;
  }
  /* Unused CSS selector "form > fieldset:has(> legend)" */
  form > fieldset:has(> legend) {
    background-color: red;
  }
</style>

I don't think this is an intended change of the following PR, because <legend> clearly appears in the markup.

• breaking: scope :has(...) selectors #13567

Reproduction

pnpm i [email protected]                                                       
pnpm check

# ====================================
# Loading svelte-check in workspace:
# Getting Svelte diagnostics...
# 
# /src/routes/+page.svelte:12:2
# Warn: Unused CSS selector "form > fieldset:has(> legend)" (svelte)
#         /* Unused CSS selector "form > fieldset:has(> legend)" */
#         form > fieldset:has(> legend) {
#                 background-color: red;
# 
# 
# ====================================
# svelte-check found 0 errors and 1 warning in 1 file

pnpm i [email protected]
pnpm check

# ====================================
# Loading svelte-check in workspace:
# Getting Svelte diagnostics...
# 
# ====================================
# svelte-check found 0 errors and 0 warnings

Logs

No response

System Info

System:
  OS: macOS 15.0.1
  CPU: (10) arm64 Apple M1 Pro
  Memory: 116.39 MB / 16.00 GB
  Shell: 5.9 - /bin/zsh
Binaries:
  Node: 22.10.0 - ~/.local/state/fnm_multishells/16744_1729417203997/bin/node
  npm: 10.9.0 - ~/.local/state/fnm_multishells/16744_1729417203997/bin/npm
  pnpm: 9.12.2 - ~/.local/state/fnm_multishells/16744_1729417203997/bin/pnpm
Browsers:
  Chrome: 129.0.6668.101
  Edge: 130.0.2849.46
  Safari: 18.0.1
npmPackages:
  svelte: 5.0.0-next.266 => 5.0.0-next.266

Severity

blocking an upgrade

[hyunbinseo]

This is a huge deal-breaker for me.

Above workaround does not work in this example:

<!-- Unused CSS selector "fieldset:has(legend) > legend" -->
<style lang="postcss">
  fieldset:has(legend) {
    @apply border-2 p-4;
  }
  fieldset:has(legend) > legend {
    @apply -ml-3 px-3 font-bold;
  }
</style>

Considering this case, the issue title should be updated as well.

[vnphanquang]

@dummdidumm thank you for the fix. Unfortunately, as of 5.0.5 any :has followed by another combinator-ed selector is still incorrectly marked as unused. For example:

<label>
	<input type="checkbox" />
	<span>I am red when checked</span>
</label>

<style>
	label:has(input:checked) span {
		color: red;
	}
</style>

main:has(input:checked) p is pruned. Test it in this Svelte 5 REPL.

Happy to open a separate issue, just let me know if needed. Thanks!

---

UPDATE: not any sorry. I looked into the test cases for :has. The equivalence of the above issue is:

Input:

<x>
	<y></y>
	<w></w>
</x>

<style>
	x:has(y) w {
		color: green;
	}
</style>

Expected:

	x.svelte-xyz:has(y:where(.svelte-xyz)) w:where(.svelte-xyz) {
		color: green;
	}

which wasn't covered yet as of 5.0.5