Skip to content

Commit 41eb8da

Browse files
authored
feat: support parsing camel case in container queries (#11131)
1 parent 11b8e94 commit 41eb8da

File tree

4 files changed

+20
-1
lines changed

4 files changed

+20
-1
lines changed

.changeset/witty-adults-fold.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'svelte': patch
3+
---
4+
5+
fix parsing camelcase container query name

packages/svelte/src/compiler/parse/read/css-tree-cq/node/container_query.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export function parse() {
2626
// Container name doesn't match a query keyword, so assign it as container name.
2727
if (!CONTAINER_QUERY_KEYWORDS.has(container_name.toLowerCase())) {
2828
name = container_name;
29-
this.eatIdent(container_name);
29+
this.eat(Ident);
3030
}
3131
}
3232

packages/svelte/test/css/samples/container-query-camel-case/expected.css

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<h1 class="main">hello</h1>
2+
3+
<style lang="css">
4+
.main {
5+
container-name: myContainer;
6+
container-type: inline-size;
7+
}
8+
@container myContainer (min-width: 300px) {
9+
h1 {
10+
color: red;
11+
}
12+
}
13+
</style>

0 commit comments

Comments
 (0)