New CSS `if()` not yet supported

[lukehutch]

The new CSS if() is not supported by VS Code's CSS language mode:

It actually trips up the parser -- see the red underline on the closing curly brace.

Source:

@layer base {
  :root {
    --page-scroll-bg-on: linear-gradient(var(--root-bg), var(--root-bg))
    var(--root-bg);
    @supports (color: color-mix(in lab, red, red)) {
      --page-scroll-bg-on: linear-gradient(var(--root-bg), var(--root-bg))
    color-mix(in srgb, var(--root-bg), oklch(0% 0 0) calc(var(--page-has-backdrop, 0) * 40%));
    }
    --page-scroll-transition-on: background-color 0.3s ease-out;
    transition: var(--page-scroll-transition);
    scrollbar-gutter: var(--page-scroll-gutter, unset);
    scrollbar-gutter: if(style(--page-has-scroll: 1): var(--page-scroll-gutter, unset) ; else: unset);
  }
  :root:root {
    background: var(--page-scroll-bg, var(--root-bg, var(--color-base-100)));
  }
  @keyframes set-page-has-scroll {
    0%, to {
      --page-has-scroll: 1;
    }
  }
}

[controversial]

The SCSS if() syntax has been deprecated in 1.95.0 and Sass requires users to migrate to CSS if() syntax in order to avoid deprecation warnings.

However, running the migrator breaks vscode parsing the file.

[lukehutch]

So the example I gave does not confirm to the CSS standard syntax?

[controversial]

no, i think the example you gave is great! i was giving a second example of how many users will encounter this bug

[omidantilong]

We've just run into this issue as well. Using the "suggested fix" from Sass's deprecation warnings yields warnings in VSCode. It seems like the language server understands the old Sass if but not the new css if.

Example, using sample code from Sass docs:

$hungry: true;

@debug if(sass($hungry): breakfast burrito; else: cereal);

) expected scss(css-rparentexpected) [Col 24] (the first colon)
{ expected scss(css-lcurlyexpected) [Col 43] (the first semi-colon)
{ expected scss(css-lcurlyexpected) [Col 49] (the second colon)

But just doing the following also yields errors:

body {
  background: if(supports(color: green): red;);
}

) expected css(css-rparentexpected) [Ln 2, Col 32] (first colon)
at-rule or selector expected css(css-ruleorselectorexpected) [Ln 2, Col 46] (first semi-colon)
at-rule or selector expected css(css-ruleorselectorexpected) [Ln 3, Col 1]

Thread in the sass repo which may be of interest: sass/sass#3886