!important rules in scss logic are showing as errors.

[Zoë]

Atom: 1.23.0
ide-css: 0.2.0

My code is compiling and working as expected but is being marked with errors.

I have the following SCSS code:

/**
 * This file contains mixins that are only applicable to the styleguide.
 */

@function get-mixin-important-var($important) {
	//If important is true it will add an important tag to everything.
	@return if($important, !important, null);
}

The error underlines directly underneath the !.

IDE-CSS is reporting

Example Usage:

@mixin heading($important: false) {
	$i: get-mixin-important-var($important);

	font-family: 'arial' $i;
	font-weight: 600 $i;
        color: #000 $i;

	font-size: 16px $i;
}

.heading {
      @include heading(true);
}

<div class="heading">My Heading</div>

Output CSS from example:

Pin for example

[TC Liu]

@pixilz Thanks for your report.

IMO this issue is related to the css language server (or its service).
I am under a survey/experiment and will report it to correct repo.

---

Update (Dec. 24): issue created at microsoft/vscode-css-languageservice#57

Update (Jan. 24): PR fixing this is merged

Update (Mar. 20): merged PR is released in v3.0.5.

• Update to current latest vscode-css-languageserver-bin that
  • depending vscode-css-languageserver@5a856cd7
  • depending vscode-css-languageservice@3.0.5

[TC Liu]

@pixilz latest PR has been released at v0.3.0.
Please upgrade ide-css and hopefully this issue will be solved.