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

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

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

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

Comments

@geoffrich
Copy link
Member

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

@Shigetorum635
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
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants