ParseError when using camelCase names in CSS container queries

jaydeep987 commented 7 months ago

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

dominikg commented 7 months ago

This error happens in svelte directly, vite-plugin-svelte is only the messenger here.

repl: https://svelte.dev/repl/02c32cc5eb66466f8581d9d7c6ec39e6?version=4.2.12

dominikg commented 7 months ago

moving it to the svelte repo, support for container queries was added here https://github.com/sveltejs/svelte/pull/8275

sveltejs / svelte