From 41eb8daab29ff274fb7669389c7201ae92b04b45 Mon Sep 17 00:00:00 2001
From: Tan Li Hau <tanhauhau@users.noreply.github.com>
Date: Fri, 12 Apr 2024 22:36:32 +0800
Subject: [PATCH] feat: support parsing camel case in container queries
 (#11131)

---
 .changeset/witty-adults-fold.md                     |  5 +++++
 .../parse/read/css-tree-cq/node/container_query.js  |  2 +-
 .../samples/container-query-camel-case/expected.css |  1 +
 .../samples/container-query-camel-case/input.svelte | 13 +++++++++++++
 4 files changed, 20 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/witty-adults-fold.md
 create mode 100644 packages/svelte/test/css/samples/container-query-camel-case/expected.css
 create mode 100644 packages/svelte/test/css/samples/container-query-camel-case/input.svelte

diff --git a/.changeset/witty-adults-fold.md b/.changeset/witty-adults-fold.md
new file mode 100644
index 0000000000..624d3dd19e
--- /dev/null
+++ b/.changeset/witty-adults-fold.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix parsing camelcase container query name
diff --git a/packages/svelte/src/compiler/parse/read/css-tree-cq/node/container_query.js b/packages/svelte/src/compiler/parse/read/css-tree-cq/node/container_query.js
index 607778f214..3242a0b0bc 100644
--- a/packages/svelte/src/compiler/parse/read/css-tree-cq/node/container_query.js
+++ b/packages/svelte/src/compiler/parse/read/css-tree-cq/node/container_query.js
@@ -26,7 +26,7 @@ export function parse() {
 		// Container name doesn't match a query keyword, so assign it as container name.
 		if (!CONTAINER_QUERY_KEYWORDS.has(container_name.toLowerCase())) {
 			name = container_name;
-			this.eatIdent(container_name);
+			this.eat(Ident);
 		}
 	}
 
diff --git a/packages/svelte/test/css/samples/container-query-camel-case/expected.css b/packages/svelte/test/css/samples/container-query-camel-case/expected.css
new file mode 100644
index 0000000000..1bbcbe84b3
--- /dev/null
+++ b/packages/svelte/test/css/samples/container-query-camel-case/expected.css
@@ -0,0 +1 @@
+.main.svelte-xyz{container-name:myContainer;container-type:inline-size}@container myContainer (min-width: 300px){h1.svelte-xyz{color:red}}
\ No newline at end of file
diff --git a/packages/svelte/test/css/samples/container-query-camel-case/input.svelte b/packages/svelte/test/css/samples/container-query-camel-case/input.svelte
new file mode 100644
index 0000000000..085f54e5b9
--- /dev/null
+++ b/packages/svelte/test/css/samples/container-query-camel-case/input.svelte
@@ -0,0 +1,13 @@
+<h1 class="main">hello</h1>
+
+<style lang="css">
+  .main {
+    container-name: myContainer;
+    container-type: inline-size;
+  }
+  @container myContainer (min-width: 300px) {
+    h1 {
+      color: red;
+    }
+  }
+</style>
\ No newline at end of file