ParseError when using camelCase names in CSS container queries #10845
Description
Describe the bug
Description:
When working with CSS container queries in a SvelteKit application, I've encountered a ParseError specifically when using camelCase names for container queries. According to the CSS specifications, camelCase names are legal and should be processed without errors. However, in a skeleton SvelteKit app with specific versions of Svelte, @sveltejs/kit, and @sveltejs/vite-plugin-svelte, using camelCase for the container name results in a parsing error, while lowercase container names work as expected.
Environment:
Svelte Version: ^4.2.7
@sveltejs/kit Version: ^2.0.0
@sveltejs/vite-plugin-svelte Version: ^3.0.0
Node Version: 20.x.x
Non-Working Code (with camelCase container name):
<style lang="css">
.main {
container-name: myContainer;
container-type: inline-size;
}
@container myContainer (min-width: 300px) {
h1 {
color: red;
}
}
</style>
Expected Behavior:
CSS container queries with camelCase names should be processed without errors, as per the official CSS specifications.
Actual Behavior:
A ParseError is thrown when using camelCase names for CSS container queries, preventing the application from compiling successfully.
{
name: 'ParseError',
id: '/tmp/myapp/src/routes/+page.svelte',
message: '/tmp/myapp/src/routes/+page.svelte:12:13 Identifier "myContainer" is expected',
frame: ' 10 | container-type: inline-size;\n' +
' 11 | }\n' +
' 12 | @container myContainer (min-width: 300px) {\n' +
' ^\n' +
' 13 | h1 {\n' +
' 14 | color:red;',
code: 'css-syntax-error',
stack: '',
loc: {
line: 12,
column: 13,
file: '/tmp/myapp/src/routes/+page.svelte'
},
plugin: 'vite-plugin-svelte',
pluginCode: '<div class="main">\n' +
' <h1>Welcome to SvelteKit</h1>\n' +
' <p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>\n' +
'</div>\n' +
'\n' +
'\n' +
'<style lang="css">\n' +
' .main {\n' +
' container-name: myContainer;\n' +
' container-type: inline-size;\n' +
' }\n' +
' @container myContainer (min-width: 300px) {\n' +
' h1 {\n' +
' color:red;\n' +
' }\n' +
' }\n' +
'</style>'
}
This issue seems to specifically affect the processing of CSS container queries within SvelteKit applications using @sveltejs/vite-plugin-svelte. It's unclear if this is a direct issue with vite-plugin-svelte, a dependency thereof, or a misconfiguration in SvelteKit's handling of CSS.
Reproduction URL
https://github.com/jaydeep987/sveltekit-container-query-problem
Reproduction
No response
Logs
No response
System Info
System:
OS: macOS 14.4
CPU: (10) arm64 Apple M1 Max
Memory: 214.00 MB / 32.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 20.10.0 - /usr/local/bin/node
Yarn: 1.22.21 - /usr/local/bin/yarn
npm: 10.2.3 - /usr/local/bin/npm
pnpm: 8.10.5 - /usr/local/bin/pnpm
Browsers:
Chrome: 122.0.6261.129
Safari: 17.4
npmPackages:
@sveltejs/adapter-auto: ^3.0.0 => 3.1.1
@sveltejs/kit: ^2.0.0 => 2.5.4
@sveltejs/vite-plugin-svelte: ^3.0.0 => 3.0.2
svelte: ^4.2.7 => 4.2.12
vite: ^5.0.3 => 5.1.6