feat: support parsing camel case in container queries

sveltejs · Apr 11, 2024 · 06e7180 · 06e7180
1 parent 11b8e94
commit 06e7180
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 1 deletion.
diff --git a/.changeset/witty-adults-fold.md 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
@@ -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
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
@@ -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>