The contents of `@layer` in `<style>` are removed

[geoffrich]

Describe the bug

Using CSS cascade layers in a Svelte component results in the styles inside the layer being stripped from the final output without warning.

Reproduction

REPL

Component:

<div class="item">I am displayed in <code>color: rebeccapurple</code>
because the <code>special</code> layer comes after the <code>base</code> layer.
My green border, font-size, and padding come from the <code>base</code> layer.</div>

<style>
	@layer base, special;

	@layer special {
		.item {
			color: rebeccapurple;
		}
	}

	@layer base {
		.item {
			color: green;
			border: 5px solid green;
			font-size: 1.3em;
			padding: .5em;
		}
	}
</style>

Compiled style:

@layer base, special;@layer special{}@layer base{}

Wrapping the selectors in :global includes them in the final output, but then the styles are not scoped.

(Code taken from an example on MDN)

Logs

No response

System Info

Svelte REPL, v3.48

Severity

annoyance

[bluefield-creator]

Just checked the REPL, I also find it annoying to have to use :global and similar when I want scoped styles!

Hope it gets fixed real quick.