ParseError when using camelCase names in CSS container queries (original) (raw)

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