stylelint-selector-bem-pattern icon indicating copy to clipboard operation
stylelint-selector-bem-pattern copied to clipboard

Not working with `bem` preset

Open SeanFree opened this issue 1 year ago • 1 comments

Example repo: https://github.com/SeanFree/bem-stylelint-example Node Version: 20.11.1 Stylelint Version: 16.2.1 Plugin Version: 4.0.0

Stylelint Config

{
  "plugins": ["stylelint-selector-bem-pattern"],
  "rules": {
    "plugin/selector-bem-pattern": {
      "preset": "bem"
    }
  }
}

Example invalid classes (not being caught by lint rules)

.ThisClassShouldNotBeAllowed {}

.this_class-should_not-be_allowed {}

.This-Class_should__not_______be_______---------------------allowed {}

Am I missing something in my setup? I initially set this up with stylelint-config-standard which enforces selector-class-pattern seemingly in conflict with what should be enforced by the plugin, so I removed the standard config and only have the bem plugin applied. Still no stylelint errors in VSCode or terminal.

image

SeanFree avatar Mar 17 '24 16:03 SeanFree

For anyone having issues with linting, be sure to define a component https://github.com/postcss/postcss-bem-linter?tab=readme-ov-file#defining-a-component-and-utilities

You can either have components defined:

  • implicitly based on filename by using the implicitComponents plugin option
  • with a comment as shown:
/** @define header **/
.header {
  ...
}
.header__title {
  ...
}

mmichilot avatar May 01 '24 23:05 mmichilot