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>

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.

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?

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>

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

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.

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