SugarSS throwing unecessary `CssSyntaxError`

Question

I have defined a mixin for adding styles to an element. This compiles perfectly but is throwing an error when I run stylelint over it. My stylelint configuration is as follows:

{
    "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"
    }
  }

EDIT

Getting this error without --custom-syntax sugarss.

jeddy3 · Accepted Answer · 2020-04-19T16:00:42.377

The CssSyntaxError is thrown because the SugarSS syntax does not support interpolation, i.e. #{element}.

You can either:

write in Sass
write in SugarSS and use Sass-like PostCSS plugins

It's not possible to do both.

stylelint supports Sass, SCSS and SugarSS out-of-the-box. You don't need to use the --custom-syntax flag.

If you want to continue to write in Sass, you should remove the --custom-syntax sugarss flag from your stylelint command (and quote your glob), like so:

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

If you want to write in SugarSS and use Sass-like PostCSS plugins, you should:

change your file extensions to .sss
remove the --custom-syntax sugarss flag from your stylelint command (and quote your glob): stylelint "**/*.sss" --fix
install the postcss-mixins plugin
change your code to match the compatible syntax:

@define-mixin set-link-style $element
    $(element)
        text-decoration: none
        ..

@mixin set-link-style a

Thank you for such an elaborate answer. I would want to go with the first option and I did try to remove `--custom-syntax sugarss` but now I have a different error. I will post the screenshot in the question. — AMAN SHARMA, Apr 20 '20 at 14:38
It looks like the Sass parser isn't compatible with the new `@use` module syntax. You should open an issue in the stylelint tracker (https://github.com/stylelint/stylelint/issues/new?template=REPORT_A_BUG.md). — jeddy3, Apr 20 '20 at 16:02

SugarSS throwing unecessary `CssSyntaxError`

1 Answers1