[BUG] SCSS with & class modifier is stripped from compiled styles

[dualjack]

Describe the bug

One of our clients insisted on using single class selectors.
I will not debate if it's reasonable or not, but this is actually a bug.

<div class="root">
	<p class="root__child">1</p>
	<p class="root__child">2</p>
	<p class="root__child">3</p>
	<p class="root__child">4</p>
</div>

<style lang="scss">

	.root {

		/** This is marked as unused -- cut off from compiled CSS */
		&__child {
			color: red;
		}
	}
	
</style>

The result of compiled SCSS should be:

https://sass-lang.com/playground/#eJwzNNQrys8vUajmUgACtfj45IzMnBQoFwSS83Pyi6wUilJTrMFitVy1AGyCDYQ=

Reproduction

Svelte playground:
https://svelte.dev/playground/6143b525639143f5ab2044e18961e8d3?version=5.44.1

Sass playground:
https://sass-lang.com/playground/#eJwzNNQrys8vUajmUgACtfj45IzMnBQoFwSS83Pyi6wUilJTrMFitVy1AGyCDYQ=

Logs

System Info

Svelte 5.44.1

Severity

blocking all usage of svelte

[Conduitry]

You'll need to compile the SCSS to CSS before the Svelte compiler gets it. .root { &__child { ... } } in CSS means the selector .root __child, not .root__child, and .root __child doesn't match anything in the component.

[paator]

So - if I understand correctly - will Svelte compiler cut off anything that isn't matched with regular CSS even if style block is using SCSS? I thought that SCSS is fully supported.

Not that this particular syntax is super important, it's just weird to have only a partial support.

[Conduitry]

You need to configure a preprocessor to translate SCSS to CSS before the Svelte compiler gets it. How you do that depends on your project setup. The Svelte compiler itself doesn't know anything about SCSS.