[SCSS] Syntax Error when `!important` as arguments of Method

[liuderchi]

VSCode underlines error at !important syntax when it's argument of method if:

@function get-mixin-important-var($important) {
  @return if($important, !important, null);
//                      ~~~ Error: expression expected
}
@mixin heading($important: false) {
  $i: get-mixin-important-var($important);
  font-family: "arial" $i;
}

.heading {
  @include heading(true);
}

However this snippet is valid when pasted to SASS Online Editor (https://www.sassmeister.com/) with option

• Sass compiler: v3.3.14
• Syntax: SCSS

And it's compiled to valid CSS:

.heading {
  font-family: "arial" !important;
}

[octref]

@aeschli !important is not an expression according to CSS spec. Wondering what would be the correct way to support it? I'm thinking about special casing for the if() function to allow more than just expression in its args.

[aeschli]

@octref Looks like the SCSS parser accept it as a term, even if it results in invalid CSS.
https://github.com/Microsoft/vscode-css-languageservice/blob/0825c4593166ca6aa2b01f9a8817c142d845ca61/src/parser/scssParser.ts#L155 is the place it needs to go.
Hope that doesn't cause issues with the regular usages of !important. We should make sure the SCSS parser tests also contain some of these.