Svelte 5: some CSS selectors written in non-runes mode gets stripped #13881
Description
Describe the bug
A component I have that works in Svelte 4 doesn't work the same in Svelte 5 because my CSS selectors are being stripped by the compiler.
Reproduction
Svelte 4 (working): https://www.sveltelab.dev/tzdq3ikwltf6tm0
Svelte 5 (not working): https://www.sveltelab.dev/t5h5s288ag3a1wv
See NavAction.svelte for source. For me, this is the critical CSS:
<span class="action-container" id={wrapperId}>
{#if $$slots.menu}
<div>
<label for={labelId}>
<slot name="action" />
<input
id={labelId}
type="checkbox"
bind:checked={open}
class="visually-hidden"
role="button"
data-type="nav-action"
aria-haspopup="true"
aria-expanded={open}
/>
<span class="visually-hidden">{label}</span>
</label>
<div class="menu-container">
<slot name="menu" />
</div>
</div>
{:else}
<div class="action-container">
<slot name="action" />
</div>
{/if}
</span>
<style>
/* these get stripped */
.action-container:has(input[type='checkbox']:checked) .menu-container {
display: flex;
}
.action-container:has(input[type='checkbox']):focus-within {
outline: 1px solid #fff;
outline-offset: 1px;
}
.action-container:has(input[type='checkbox']:checked):has(
.menu-container:focus-within
) {
outline: none;
}
</style>Logs
2:23:23 PM [vite-plugin-svelte] src/routes/NavAction.svelte:122:4 Unused CSS selector ".action-container:not(:has(input[type='checkbox']:checked))"
2:23:23 PM [vite-plugin-svelte] src/routes/NavAction.svelte:125:4 Unused CSS selector ".action-container:not(:has(input[type='checkbox']:checked))
.menu-container"(among others, see reproduction)
System Info
Svelte 4 demo:
System:
OS: Linux 5.0 undefined
CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
Memory: 0 Bytes / 0 Bytes
Shell: 1.0 - /bin/jsh
Binaries:
Node: 18.20.3 - /usr/local/bin/node
Yarn: 1.22.19 - /usr/local/bin/yarn
npm: 10.2.3 - /usr/local/bin/npm
pnpm: 8.15.6 - /usr/local/bin/pnpm
npmPackages:
svelte: ^4.2.19 => 4.2.19 Svelte 5 demo:
System:
OS: Linux 5.0 undefined
CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
Memory: 0 Bytes / 0 Bytes
Shell: 1.0 - /bin/jsh
Binaries:
Node: 18.20.3 - /usr/local/bin/node
Yarn: 1.22.19 - /usr/local/bin/yarn
npm: 10.2.3 - /usr/local/bin/npm
pnpm: 8.15.6 - /usr/local/bin/pnpm
npmPackages:
svelte: ^4.0.5 => 5.1.0
Severity
blocking an upgrade