diff --git a/.changeset/witty-adults-fold.md b/.changeset/witty-adults-fold.md new file mode 100644 index 000000000000..624d3dd19eb7 --- /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 607778f214fe..3242a0b0bc59 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 000000000000..1bbcbe84b3a9 --- /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 000000000000..085f54e5b92a --- /dev/null +++ b/packages/svelte/test/css/samples/container-query-camel-case/input.svelte @@ -0,0 +1,13 @@ +