Fix Sass parser incompatibility with at-use

[algomaster99]

Clearly describe the bug

Getting Please check validity of the block starting from line when I ran stylelint over a .sass file containing Sass modules. [edit by jeddy3]

Which rule, if any, is the bug related to?

CssSyntaxError

What code is needed to reproduce the bug?

.cover-button
  display: flex
  justify-content: center
  margin-top: 2.5em
  width: 100%

What stylelint configuration is needed to reproduce the bug?

{
    "plugins": [
      "stylelint-scss"
    ],
    "extends": "stylelint-config-sass-guidelines",
    "rules": {
      "block-opening-brace-space-before": "never",
      "color-hex-length": "long",
      "declaration-block-trailing-semicolon": "never",
      "indentation": 2,
      "max-nesting-depth": 2,
      "scss/dollar-variable-pattern": "[a-zA-Z0-9]+",
      "selector-combinator-space-after": "always",
      "selector-combinator-space-before": "always",
      "selector-list-comma-newline-after": "never-multi-line"
    }
  }

Which version of stylelint are you using?

13.3.0

How are you running stylelint: CLI, PostCSS plugin, Node.js API?

"CLI with stylelint **/*.{sass,scss} --fix"

Does the bug relate to non-standard syntax (e.g. SCSS, Less etc.)?

Yes, it is related to SASS.

What did you expect to happen?

No errors to be flagged.

What actually happened (e.g. what warnings or errors did you get)?

Please check validity of the block starting from line

src/components/cover/index.sass
 68:1  ✖  Please check validity of the block starting from line #68   CssSyntaxError

Further reference: https://stackoverflow.com/questions/61293176/sugarss-throwing-unecessary-csssyntaxerror/61305305#61305305

[jeddy3]

@algomaster99 Thanks for the report and for using the template.

I can reproduce this using the demo with:

@use "namespace" as alias

selector
  prop: alias.$var

The postcss-sass parser that stylelint uses to support Sass doesn't appear to understand the new modules syntax yet. Incidentally, the SCSS parser does. The Sass parser uses the Gonzales-PE parser under the hood and its playground can't parse the example above.

Please consider contributing to the parser if you have time. You can raise an issue in their tracker.

As an aside, the Sass syntax isn't as popular as the SCSS one. So support for it in tooling can lag behind that of SCSS.

[algomaster99]

@jeddy3 Thanks for replying!
I have opened the ticket for this issue - AleshaOleg/postcss-sass#145. I will try to contribute once this issue is accepted there as well :)

[JJ810]

@algomaster99, I am getting same issue in using @import. Is this related to this issue? And Is there any way I can solve this problem?

[algomaster99]

@algomaster99 @import should work in my opinion. This issue is raised because the parser doesn't support new module syntax. @import is an older syntax.

[jeddy3]

The syntax option was removed for the 14.0.0 release. (See the migration guide.)

Closing in favour of the upstream issue as the syntax is no longer bundled by Stylelint.