stylelint-selector-bem-pattern
stylelint-selector-bem-pattern copied to clipboard
Not working with `bem` preset
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.
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
implicitComponentsplugin option - with a comment as shown:
/** @define header **/
.header {
...
}
.header__title {
...
}