Error When Using CSS Container Scroll-State Queries in `style` element

[abdelfattahradwan]

Describe the bug

When using CSS container scroll-state queries in the style element inside a Svelte component, an error is reported saying ( expected css(css-lparentexpected). The same error is also reported when running svelte-check. This causes some CI/CD pipelines to fail because they execute svelte-check.

Reproduction

• Clone the reproduction repository.
• Open the project in the terminal.
• Run svelte-check using npm, bun, or pnpm (e.g. npm run check).

Logs

Warn: Unused CSS selector "#my-container"
https://svelte.dev/e/css_unused_selector (svelte)
<style>
  #my-container {
    container-type: scroll-state;

[REDACTED]\svelte-css-bug-1bc81c014546\src\routes\+page.svelte:12:7
Warn: Unused CSS selector "#my-list"
https://svelte.dev/e/css_unused_selector (svelte)
    @container my-container scroll-state(scrollable: y) {
      #my-list {
        padding-inline-end: calc(var(--spacing) * 2);

[REDACTED]\svelte-css-bug-1bc81c014546\src\routes\+page.svelte:11:29
Error: ( expected (css)
  @media (pointer: fine) and (hover: hover) {
    @container my-container scroll-state(scrollable: y) {
      #my-list {

====================================
svelte-check found 1 error and 2 warnings in 1 file
error: script "check" exited with code 1

System Info

System:
    OS: Windows 11 10.0.26100
    CPU: (28) x64 Intel(R) Core(TM) i7-14700K
    Memory: 33.60 GB / 63.70 GB
  Binaries:
    Node: 22.18.0 - C:\Program Files\nodejs\node.EXE
    npm: 11.5.2 - ~\AppData\Roaming\npm\npm.CMD
    bun: 1.2.20 - ~\.bun\bin\bun.EXE
  Browsers:
    Edge: Chromium (139.0.3405.86)
    Internet Explorer: 11.0.26100.1882
  npmPackages:
    @sveltejs/adapter-auto: ^6.0.0 => 6.1.0
    @sveltejs/kit: ^2.22.0 => 2.31.0
    @sveltejs/vite-plugin-svelte: ^6.0.0 => 6.1.2
    svelte: ^5.0.0 => 5.38.1
    vite: ^7.0.4 => 7.1.2

Severity

annoyance

[PatrickG]

~~In your repo (I guess you mean the code in src/routes/+page.svelte), the warnings are correct. You don't have elements with a my-container or my-list id.~~ Missed the ( expected css(css-lparentexpected) error. But why does it work in the REPL? Copy/pasting the first example on mdn into the playground seems to work correctly.

In vscode the same error is reported in a plain .html file.

[abdelfattahradwan]

~In your repo (I guess you mean the code in src/routes/+page.svelte), the warnings are correct. You don't have elements with a my-container or my-list id.~ Missed the ( expected css(css-lparentexpected) error. But why does it work in the REPL? Copy/pasting the first example on mdn into the playground seems to work correctly.

In vscode the same error is reported in a plain .html file.

Yes, the same error is reported in plain HTML files in VS Code, but what I am saying is: errors emitted by VS Code can be ignored, but ones emitted by svelte-check can't.

It causes npm run check to throw an error, which causes CI/CD to fail when it really shouldn't 😕

[PatrickG]

Related: https://github.com/sveltejs/language-tools/issues/2275

[abdelfattahradwan]

Related: sveltejs/language-tools#2275

I didn't know they used that VS Code package. Thanks! I will open an issue there as well. This is such an annoying bug!