SugarSS throwing unecessary `CssSyntaxError`

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.

Solution

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