From ea273c35353d6e5802ff7d0a33e952b3448b207b Mon Sep 17 00:00:00 2001 From: Juan Hernando Date: Tue, 21 Jun 2022 12:41:00 +0200 Subject: [PATCH 1/3] feat: add bem selector-class-pattern stylelint rule --- index.js | 11 ++++++++++- package.json | 2 +- test/index.scss | 10 ++++++++++ 3 files changed, 21 insertions(+), 2 deletions(-) diff --git a/index.js b/index.js index e2d6fd4..aea0431 100644 --- a/index.js +++ b/index.js @@ -46,6 +46,15 @@ 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]+)*)?(?:\\[.+\\])?$", + { + "message": "Expected class selector to match BEM naming convention" + } + ] } }; \ No newline at end of file diff --git a/package.json b/package.json index 2252693..b478c6b 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@netcentric/stylelint-config", "description": "Netcentric's coding and style rules for Stylelint", - "version": "1.2.1", + "version": "1.3.0", "license": "Apache-2.0", "private": false, "publishConfig": { diff --git a/test/index.scss b/test/index.scss index 3c7c22c..e93170a 100644 --- a/test/index.scss +++ b/test/index.scss @@ -23,3 +23,13 @@ .unsuported { display: flex; } + +/* bem ok */ +.block__element { + color: red; +} + +/* bem error */ +.block_element { + color: red; +} \ No newline at end of file From 81d6ee677a847fc666bbe2bd0e0e7f6fa1e1ba91 Mon Sep 17 00:00:00 2001 From: Juan Hernando Date: Wed, 22 Jun 2022 10:43:58 +0200 Subject: [PATCH 2/3] Activate resolveNestedSelectors and add new test cases --- index.js | 5 ++-- test/index.scss | 67 ++++++++++++++++++++++++++++++++++++++++++------- 2 files changed, 61 insertions(+), 11 deletions(-) diff --git a/index.js b/index.js index aea0431..93fca5d 100644 --- a/index.js +++ b/index.js @@ -51,9 +51,10 @@ module.exports = { // 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]+)*)?(?:\\[.+\\])?$", + "^(?:(?: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" + "message": "Expected class selector to match BEM naming convention", + "resolveNestedSelectors": true } ] } diff --git a/test/index.scss b/test/index.scss index e93170a..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; } } @@ -25,11 +25,60 @@ } /* bem ok */ -.block__element { - color: red; +.block { + color: test; + + &-header { + color: test; + } + + &__element { + color: test; + + &Suffix { + color: test; + } + + &-suffix { + color: test; + } + + &--modifier { + color: test; + + &--modifier2 { + color: test; + } + } + } } /* bem error */ -.block_element { - color: red; -} \ No newline at end of file +.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 From 4634926c2cc088c4fe74356458be095ffeecf7bf Mon Sep 17 00:00:00 2001 From: Juan Hernando Date: Wed, 22 Jun 2022 10:45:57 +0200 Subject: [PATCH 3/3] Revert app version update --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index b478c6b..2252693 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@netcentric/stylelint-config", "description": "Netcentric's coding and style rules for Stylelint", - "version": "1.3.0", + "version": "1.2.1", "license": "Apache-2.0", "private": false, "publishConfig": {