From c8741b00b5ef1cba00918ec6f438bcf20c6177c7 Mon Sep 17 00:00:00 2001
From: Lewis <lewis@ombulabs.com>
Date: Thu, 5 May 2022 18:02:58 -0400
Subject: [PATCH 1/2] add test

---
 test/css/samples/at-layer/expected.css |  1 +
 test/css/samples/at-layer/input.svelte | 17 +++++++++++++++++
 2 files changed, 18 insertions(+)
 create mode 100644 test/css/samples/at-layer/expected.css
 create mode 100644 test/css/samples/at-layer/input.svelte

diff --git a/test/css/samples/at-layer/expected.css b/test/css/samples/at-layer/expected.css
new file mode 100644
index 000000000000..e5f3de80c951
--- /dev/null
+++ b/test/css/samples/at-layer/expected.css
@@ -0,0 +1 @@
+@layer base, special;@layer special{div.svelte-xyz{color:rebeccapurple}}@layer base{div.svelte-xyz{color:green}}
\ No newline at end of file
diff --git a/test/css/samples/at-layer/input.svelte b/test/css/samples/at-layer/input.svelte
new file mode 100644
index 000000000000..60289e1e5f9e
--- /dev/null
+++ b/test/css/samples/at-layer/input.svelte
@@ -0,0 +1,17 @@
+<div>hello</div>
+
+<style>
+	@layer base, special;
+
+	@layer special {
+		div {
+			color: rebeccapurple;
+		}
+	}
+
+	@layer base {
+		div {
+			color: green;
+		}
+	}
+</style>

From 3a1276177305f16aabc4236c594494583abcee92 Mon Sep 17 00:00:00 2001
From: Lewis <lewis@ombulabs.com>
Date: Thu, 5 May 2022 18:03:11 -0400
Subject: [PATCH 2/2] add layer to apply check

---
 src/compiler/compile/css/Stylesheet.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/compiler/compile/css/Stylesheet.ts b/src/compiler/compile/css/Stylesheet.ts
index 0a3098db6d63..1a9ea7feeb51 100644
--- a/src/compiler/compile/css/Stylesheet.ts
+++ b/src/compiler/compile/css/Stylesheet.ts
@@ -170,7 +170,7 @@ class Atrule {
 	}
 
 	apply(node: Element) {
-		if (this.node.name === 'media' || this.node.name === 'supports') {
+		if (this.node.name === 'media' || this.node.name === 'supports' || this.node.name === 'layer') {
 			this.children.forEach(child => {
 				child.apply(node);
 			});