Stylelint Unknown word for interpolation syntax in SCSS

Question

I am getting an unknown word error for the follow SCSS:

$tags: p, hr, pre, blockquote, ol, ul, menu, li, dl, dt, dd, figure, figcaption, search, main;

@each $tag in $tags {
  #{$tag} {
    @include apply-strong-styles(#{$tag});
  }
}

The error displays as:

Unknown word (CssSyntaxError)Stylelint(CssSyntaxError)

<#{$tag}>
Selector Specificity: (0, 0, 1)

I am getting the same error for $property in:

@mixin important-styles($styles, $important: false) {
  @each $property, $value in $styles {
    #{$property}: $value #{if($important, "!important", "")};
  }
}

I have researched the Stylelint documentation but not found a way to fix this issue. There was a bug in post-css that I am using, however this is marked as fixed.

Please help with a solution.

References:

• Unknown word" error in SCSS syntax and interpolated value with function #36
• "Unknown word" error for interpolated value with function #1640
• Stylelint Unknown word Errors & warnings

Answer 1

The "Unknown word (CssSyntaxError)" error is likely thrown by the default parser in Stylelint, which can't parse SCSS interpolation like #{$tag}.

When linting something other than vanilla CSS, you should use the customSyntax option or extend a community config that does that for you:

{
  "extends": [
    "stylelint-config-standard-scss"
  ]
}