[fix]: support @layer

[kindoflew]

Before submitting the PR, please make sure you do the following

• It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs
• Prefix your PR title with [feat], [fix], [chore], or [docs].
• This message body should clearly illustrate what problems it solves.
• Ideally, include a test that fails without this PR but passes with it.

Tests

• Run the tests with npm test and lint the project with npm run lint

This should resolve #7504. I added a check for this.node.name === 'layer' inside the apply method of AtRule.

Let me know if there's anything else I should do. Thanks!

[baseballyama]

If there is useless css inside @layer, should we purge it?

<div>hello</div>

<style>
	@layer base, special;
	@layer special {
		div {
			color: rebeccapurple;
		}
+              p {
+                      color: red;
+              }
	}
	@layer base {
		div {
			color: green;
		}
	}
</style>

[kindoflew]

interesting! i wasn't even aware that svelte purges unused CSS! 😂 i guess scoped styles make it easier for me to notice CSS i'm not using anymore.

my first thought is I don't know enough yet about @layer's use cases to know if there would be reasons to keep rules that the compiler might think are unused.

my second thought is that, since @layer is part of the natural hierarchy of the cascade, it should be treated like any other CSS -- so if svelte is purging other "normal" rules, we should purge here too.

[baseballyama]

AFAIK @layer is just one of how to specify specificity.
So I thought we should do same way as normal CSS (It means we should purge it.)

@geoffrich Do you have opinion/thought?

[geoffrich]

Yeah, I would expect unused CSS inside @layer to be purged, similar to how we purge unused styles inside @media. I was hoping we'd get that for free -- is it not happening?

Thanks for the quick PR @kindoflew!

<script>
	let name = 'world';
</script>

<h1>Hello {name}!</h1>
<style>
/* Warning: Unused CSS selector "h2" (8:2) */
	@media (min-width: 300) {
		h2 {
			color: red;
		}
	}
</style>

[kindoflew]

@geoffrich As far as I can tell, it is happening for free!

I just added an unused CSS rule to my test example locally and ran it and it still passed. Should I push that as well, just to cover the case?

[geoffrich]

Perfect! I don't think we need to include it in the test case. Looking at the other @rule tests, they don't seem to be testing style removal specifically.

[baseballyama]

Oh is it! Awesome!
Thank you for your fast PR and correspondence @kindoflew !