diff --git a/index.js b/index.js index e2d6fd4..93fca5d 100644 --- a/index.js +++ b/index.js @@ -46,6 +46,16 @@ module.exports = { "declaration-no-important": true, "declaration-property-unit-allowed-list": { "font-size": ["px", "em"] - } + }, + + // bem + // https://github.com/postcss/postcss-bem-linter/issues/82#issuecomment-193851353 + "selector-class-pattern": [ + "^(?:(?:o|c|u|t|s|is|has|_|js|qa)-)?[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*(?:__[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*)?(?:--[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*){0,2}(?:\\[.+\\])?$", + { + "message": "Expected class selector to match BEM naming convention", + "resolveNestedSelectors": true + } + ] } }; \ No newline at end of file diff --git a/test/index.scss b/test/index.scss index 3c7c22c..8db1369 100644 --- a/test/index.scss +++ b/test/index.scss @@ -5,10 +5,10 @@ /* max-nesting-depth: 3 */ .parent { - &__nested1 { - &__nested2 { - &__nested3 { - &__nested4 { + &Nested1 { + &Nested2 { + &Nested3 { + &Nested4 { background: red; } } @@ -23,3 +23,62 @@ .unsuported { display: flex; } + +/* bem ok */ +.block { + color: test; + + &-header { + color: test; + } + + &__element { + color: test; + + &Suffix { + color: test; + } + + &-suffix { + color: test; + } + + &--modifier { + color: test; + + &--modifier2 { + color: test; + } + } + } +} + +/* bem error */ +.block__element2 { + color: test; + + // not '_' allowed + &_suffix { + color: test; + } + + // 2 nested elements + &__subElement { + color: test; + } + + &--modifier { + color: test; + + &--modifier2 { + color: test; + + // 3 modifiers + &--modifier3 { + color: test; + } + } + } +} + +/** end */ \ No newline at end of file