Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

The contents of @layer in <style> are removed #7504

geoffrich opened this issue May 2, 2022 · 1 comment · Fixed by #7514

The contents of @layer in <style> are removed #7504

geoffrich opened this issue May 2, 2022 · 1 comment · Fixed by #7514


Copy link

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.




<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>

	@layer base, special;

	@layer special {
		.item {
			color: rebeccapurple;

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

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)


No response

System Info

Svelte REPL, v3.48



Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet
None yet

Successfully merging a pull request may close this issue.

2 participants