Does not work with Sass interpolation

This plugin does not seem to support Sass interpolation.

input.scss:

/** @define ComponentName */
.ComponentName {
  $ComponentName: &;

  &--modifierName {
    color: blue;

    #{$ComponentName} {  // <- Sass interpolation
      &-decendantName {
        color: red;
      }
    }
  }
}

postcss-bem-linter result:

input.scss
 9:7  ✖  Invalid component selector                   plugin/selector-bem-pattern
         ".ComponentName--modifierName
         #{$ComponentName}-decendantName"

output.css

/** @define ComponentName */
.ComponentName--modifierName {
  color: blue;
}
.ComponentName--modifierName .ComponentName-decendantName {
  color: red;
}

postcss-bem-linter result:

No errors

[simonsmith]

Is it this plugin’s responsibility to process Sass string interpolation and ensure that the resulting selector is in the correct format? (And is that even possible?)

A good question and I think it would be outside of the scope of this plugin to compile the Sass and understand how to apply the linting rules to the source file.

The solution I’d be tempted to go with would be to apply the postcss-bem-linter after the Sass transformation has happened. You will get less accurate line numbers in the error console (and no editor support on the source files) but that feels like an acceptable tradeoff for these complex Sass examples.

We support nesting but mainly because that isn’t unique to Sass and also exists as an official proposal

[almogk012]

@guilhermetod if i use json format, how can i do it? or you can show your js file?