[scss] Error when parsing container queries with interpolation

[lauslim12]

Does this issue occur when all extensions are disabled?: Yes.

• VS Code Version: 1.84.1
• OS Version: MacOS Sonoma 14.1

Steps to Reproduce:

I think this is potentially an issue with Visual Studio Code's CSS Language Service. Please let me know if I'm supposed to make the issue there instead of here!

As described in #170589 (comment), it seems that the CSS Language Service is unable to parse container queries in SCSS files. It works very well with vanilla CSS and Less, but it's unable to do the same with SCSS files.

For additional context, I have provided a minimum reproducible example in this repository.

I hope the example helps to clear things up a bit more clearly! Thank you so much for your help!

[aeschli]

$minWidth: 400px;
@container (min-width: #{$minWidth}) {
  .scss-interpolation {
    background-color: deepskyblue;
    line-height: 10cqh;
  }
}

[ataylor32]

I tried out the example repository provided by @lauslim12 using VS Code 1.84.1 and it looks like the problem is always present, not just with interpolation. Have a look at this:

.scss-text {
  color: yellow;
  font-size: 3cqw;
}

The semicolon right after 3cqw has a squiggly red underline. Hovering over that semicolon shows the error message:

expression expected scss(css-expressionexpected)

[hnm938]

I tried out the example repository provided by @lauslim12 using VS Code 1.84.1 and it looks like the problem is always present, not just with interpolation. Have a look at this:

.scss-text {
  color: yellow;
  font-size: 3cqw;
}

The semicolon right after 3cqw has a squiggly red underline. Hovering over that semicolon shows the error message:

expression expected scss(css-expressionexpected)

I had this problem as well, I'm pretty sure it's a problem with either vscode or node sass. Either way I found a simple work-around to get rid of the errors since they are really annoying and prevent code collapsing.

Just add this to your vscode settings json (.vscode/settings.json) "scss.validate": false