Svelte 5: :where is inconsequently applied across multiple selectors when using SCSS placeholder

[pooledge]

Describe the bug

Creating a SCSS placeholder and applying it to multiple class selectors within scoped style block leads to every selector but the last to inherit the placeholder's property not directly but through the :where pseudo, see reproduction below.

Reproduction

1. Create new SvelteKit Project using Svelte 5
2. npm install -D sass as required
3. Paste the following into ./src/routes/+page.svelte:

<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>

<style lang="scss">
	%is-test {
		color: red;
	}
	.a {
		@extend %is-test;
	}
	.b {
		@extend %is-test;
	}
	.c {
		@extend %is-test;
	}
</style>

Expected outcome:

.a:where(.svelte-hswmqs),
.b:where(.svelte-hswmqs),
.c:where(.svelte-hswmqs) {
	color: red;
}

or

.a.svelte-hswmqs,
.b.svelte-hswmqs,
.c.svelte-hswmqs {
	color: red;
}

Actual outcome:

.c.svelte-hswmqs,
.b:where(.svelte-hswmqs),
.a:where(.svelte-hswmqs) {
	color: red;
}

Logs

No response

System Info

System:
    OS: macOS 12.7.3
    CPU: (10) arm64 Apple M1 Max
    Memory: 8.97 GB / 64.00 GB
    Shell: 5.8.1 - /bin/zsh
Binaries:
    Node: 18.16.0 - ~/.nvm/versions/node/v18.16.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v18.16.0/bin/yarn
    npm: 9.6.5 - ~/.nvm/versions/node/v18.16.0/bin/npm
    pnpm: 8.15.3 - ~/.nvm/versions/node/v18.16.0/bin/pnpm
    bun: 1.0.23 - ~/.bun/bin/bun
Browsers:
    Chrome: 122.0.6261.94
    Edge: 122.0.2365.63
    Safari: 17.3.1
npmPackages:
    @sveltejs/adapter-auto: ^3.0.0 => 3.1.1 
    @sveltejs/kit: ^2.0.0 => 2.5.2 
    @sveltejs/vite-plugin-svelte: ^3.0.0 => 3.0.2 
    svelte: ^5.0.0-next.1 => 5.0.0-next.71 
    vite: ^5.0.3 => 5.1.5

Severity

Blocking an upgrade

[bluwy]

I think this should be reported to https://github.com/sveltejs/svelte. If I manually preprocess the SCSS to CSS and paste that to the Svelte REPL, I can see that Svelte isn't correctly adding the scoped classes. I'll transfer this issue there.

[dummdidumm]

Fixed by #10730

[pooledge]

It looks like we are ditching :where().

<div>
	<span class="a">A</span>
	<span class="b">B</span>
	<span class="c">C</span>
</div>

<style lang="scss">
	%is-test {
		color: red;
	}
	div {
		.a {
			@extend %is-test;
		}
	}
	.b {
		@extend %is-test;
	}
	.c {
		@extend %is-test;
	}
</style>

The outcome here is:

.c.svelte-2znujd, .b.svelte-2znujd, div.svelte-2znujd .a:where(.svelte-2znujd) {
  color: red;
}

Is the redundancy for nesting selectors intended?

[dummdidumm]

The :where is needed, else any a child would get matched, which would be wrong (imagine having a child component also having an a tag, which then would get matched when it shouldn't). The other .svelte-.. selectors aren't redundant.