svelte-check reports false positive for Container Query Length Units

[vekunz]

Describe the bug

We use CSS containers in our code, but svelte-check breaks if we use Container Query Length Units (cqw, cqh, ...) in our SCSS code.

We have this SCSS rule (the var has nothing to with the error):

width: calc(100cqw + 2 * var(--some-var));

svelte-check reports a syntax error at the last ) (I've added the '^' because I cannot use colors here):

Error: } expected (scss)
        width: calc(100cqw + 2 * var(--some-var));
                                                ^

If I replace the cqw with for example vw, svelte-check reports no problems.

Edit: You don't even need calc(), just use these units anywhere.

Reproduction

See above.

Expected behaviour

svelte-check should not report any problems, because this is valid code.

System Info

• OS: macOS Sonoma
• IDE: WebStorm

Which package is the issue about?

svelte-check

Additional Information, eg. Screenshots

This is completely blocking us currently, because we cannot deploy a feature while svelte-check is 'red'.

[dummdidumm]

The code in question is not enough to reproduce this for me, please provide a complete Svelte file code that reproduces this.

[vekunz]

Here is a svelte-file that reproduces the issue.

<div class="container">
  <div class="child1"></div>
  <div class="child2"></div>
  <div class="child3"></div>
</div>

<style lang="scss">
  .container {
    container-type: inline-size;
  }

  .child1 {
    width: 50cqw;
    height: 50cqh;
  }

  .child2 {
    width: 50cqi;
    height: 50cqb;
  }

  .child3 {
    width: 50cqmin;
    height: 50cqmax;
  }
</style>

[dummdidumm]

This error comes from the css checker, for which we use vscode-css-languageservice. This is an upstream issue we can't do anything about, related issue here: microsoft/vscode-css-languageservice#375

Until this is fixed, you can configure the diagnostics sources and exclude css from the list (this removes all css syntax checks, but at least your build is green)