Enforce "hyphenated BEM" for classes and "hyphenated lowercase" for mixins. Fix #1 (#5)

Author: thibaudcolas

CHANGELOG.md

@@ -10,6 +10,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 
 - Enforce accessibility-related rules with [stylelint-a11y](https://github.com/YozhikM/stylelint-a11y) ([#2](https://github.com/torchbox/stylelint-config-torchbox/issues/2), [#3](https://github.com/torchbox/stylelint-config-torchbox/pull/3)).
 - Enforce usage of variables for colors with [stylelint-declaration-strict-value](https://github.com/AndyOGo/stylelint-declaration-strict-value) ([#2](https://github.com/torchbox/stylelint-config-torchbox/issues/2), [#4](https://github.com/torchbox/stylelint-config-torchbox/pull/4)).
+- Enforce "hyphenated BEM" nomenclature for class names with `selector-class-pattern` ([#1](https://github.com/torchbox/stylelint-config-torchbox/issues/1), [#5](https://github.com/torchbox/stylelint-config-torchbox/pull/5)).
+- Enforce "hyphenated lowercase" nomenclature for mixins with `scss/at-mixin-pattern` ([#1](https://github.com/torchbox/stylelint-config-torchbox/issues/1), [#5](https://github.com/torchbox/stylelint-config-torchbox/pull/5)).
 
 ### BREAKING CHANGES
 

README.md

@@ -56,6 +56,7 @@ To get the most out of this config, it is assumed that projects have the followi
 - [`declaration-no-important`](https://stylelint.io/user-guide/rules/declaration-no-important/)
 - [`selector-max-id`](https://stylelint.io/user-guide/rules/selector-max-id/): `0`
 - [`selector-max-type`](https://stylelint.io/user-guide/rules/selector-max-type/): `2, ignore: child, compounded, next-sibling`
+- [`selector-class-pattern`](https://stylelint.io/user-guide/rules/selector-class-pattern/): `, resolveNestedSelectors: true`
 - [`max-nesting-depth`](https://stylelint.io/user-guide/rules/max-nesting-depth/): `4`
 - [`selector-max-specificity`](https://stylelint.io/user-guide/rules/selector-max-specificity/): `0,4,0`
 - [`value-no-vendor-prefix`](https://stylelint.io/user-guide/rules/value-no-vendor-prefix/)
@@ -70,6 +71,7 @@ To get the most out of this config, it is assumed that projects have the followi
 - [`scss/percent-placeholder-pattern`](https://github.com/kristerkari/stylelint-scss#readme): `^do-not-use-placeholders$`
 - [`scss/dollar-variable-no-missing-interpolation`](https://github.com/kristerkari/stylelint-scss#readme)
 - [`scss/at-mixin-argumentless-call-parentheses`](https://github.com/kristerkari/stylelint-scss#readme): `always`
+- [`scss/at-mixin-pattern`](https://github.com/kristerkari/stylelint-scss#readme): ``
 - [`order/order`](https://github.com/hudochenkov/stylelint-order): `dollar-variables, custom-properties, type: at-rule, hasBlock: false, declarations`
 - [`a11y/content-property-no-static-value`](https://github.com/YozhikM/stylelint-a11y#readme)
 - [`a11y/no-obsolete-attribute`](https://github.com/YozhikM/stylelint-a11y#readme)
@@ -233,7 +235,6 @@ To get the most out of this config, it is assumed that projects have the followi
 - [`scss/selector-nest-combinators`](https://github.com/kristerkari/stylelint-scss#readme)
 - [`selector-attribute-operator-blacklist`](https://stylelint.io/user-guide/rules/selector-attribute-operator-blacklist/)
 - [`selector-attribute-operator-whitelist`](https://stylelint.io/user-guide/rules/selector-attribute-operator-whitelist/)
-- [`selector-class-pattern`](https://stylelint.io/user-guide/rules/selector-class-pattern/)
 - [`selector-combinator-blacklist`](https://stylelint.io/user-guide/rules/selector-combinator-blacklist/)
 - [`selector-combinator-whitelist`](https://stylelint.io/user-guide/rules/selector-combinator-whitelist/)
 - [`selector-max-attribute`](https://stylelint.io/user-guide/rules/selector-max-attribute/)
@@ -280,7 +281,6 @@ To get the most out of this config, it is assumed that projects have the followi
 - [`scss/at-if-closing-brace-space-after`](https://github.com/kristerkari/stylelint-scss#readme)
 - [`scss/at-import-no-partial-leading-underscore`](https://github.com/kristerkari/stylelint-scss#readme)
 - [`scss/at-mixin-parentheses-space-before`](https://github.com/kristerkari/stylelint-scss#readme)
-- [`scss/at-mixin-pattern`](https://github.com/kristerkari/stylelint-scss#readme)
 - [`scss/declaration-nested-properties-no-divided-groups`](https://github.com/kristerkari/stylelint-scss#readme)
 - [`scss/dollar-variable-colon-newline-after`](https://github.com/kristerkari/stylelint-scss#readme)
 - [`scss/dollar-variable-colon-space-after`](https://github.com/kristerkari/stylelint-scss#readme)

config.js

@@ -19,6 +19,16 @@ module.exports = {
             2,
             { ignore: ['child', 'compounded', 'next-sibling'] },
         ],
+        'selector-class-pattern': [
+            // Loose pattern for hyphenated BEM. This also allows simple words to be used as class names, .e.g. `.active`, `.button`.
+            // Based on:
+            // - https://github.com/postcss/postcss-bem-linter/issues/89#issuecomment-255482072
+            // - https://gist.github.com/Potherca/f2a65491e63338659c3a0d2b07eee382
+            // See also: https://github.com/simonsmith/stylelint-selector-bem-pattern.
+            // Proceed with caution if reviewing this – and use https://regexper.com.
+            /^[a-z]+(-[a-z0-9]+)*(__[a-z0-9]+(-[a-z0-9]+)*)?(--[a-z0-9]+(-[a-z0-9]+)*)?$/,
+            { resolveNestedSelectors: true },
+        ],
         'max-nesting-depth': 4,
         'selector-max-specificity': '0,4,0',
         'value-no-vendor-prefix': true,
@@ -36,6 +46,7 @@ module.exports = {
         'scss/percent-placeholder-pattern': '^do-not-use-placeholders$',
         'scss/dollar-variable-no-missing-interpolation': true,
         'scss/at-mixin-argumentless-call-parentheses': 'always',
+        'scss/at-mixin-pattern': /^[a-z0-9-]+$/,
         'order/order': [
             'dollar-variables',
             'custom-properties',

src/__snapshots__/semver.test.js.snap

@@ -240,6 +240,9 @@ Object {
   "scss/at-mixin-argumentless-call-parentheses": Array [
     "always",
   ],
+  "scss/at-mixin-pattern": Array [
+    /\\^\\[a-z0-9-\\]\\+\\$/,
+  ],
   "scss/at-rule-no-unknown": Array [
     true,
   ],
@@ -267,6 +270,12 @@ Object {
   "selector-attribute-quotes": Array [
     "always",
   ],
+  "selector-class-pattern": Array [
+    /\\^\\[a-z\\]\\+\\(-\\[a-z0-9\\]\\+\\)\\*\\(__\\[a-z0-9\\]\\+\\(-\\[a-z0-9\\]\\+\\)\\*\\)\\?\\(--\\[a-z0-9\\]\\+\\(-\\[a-z0-9\\]\\+\\)\\*\\)\\?\\$/,
+    Object {
+      "resolveNestedSelectors": true,
+    },
+  ],
   "selector-combinator-space-after": null,
   "selector-combinator-space-before": null,
   "selector-descendant-combinator-no-non-space": null,

src/unused.js

@@ -37,7 +37,6 @@ const tooOpinionated = [
     'scss/selector-nest-combinators',
     'selector-attribute-operator-blacklist',
     'selector-attribute-operator-whitelist',
-    'selector-class-pattern',
     'selector-combinator-blacklist',
     'selector-combinator-whitelist',
     'selector-max-attribute',
@@ -90,7 +89,6 @@ const formattingByPrettier = [
     'scss/at-if-closing-brace-space-after',
     'scss/at-import-no-partial-leading-underscore',
     'scss/at-mixin-parentheses-space-before',
-    'scss/at-mixin-pattern',
     'scss/declaration-nested-properties-no-divided-groups',
     'scss/dollar-variable-colon-newline-after',
     'scss/dollar-variable-colon-space-after',