Add stylelint-selector-bem-pattern plugin and its initial configuration

akikoo · Jun 17, 2016 · 7459143 · 7459143
1 parent 342413e
commit 7459143
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 3 deletions.
diff --git a/.stylelintrc b/.stylelintrc
@@ -1,5 +1,13 @@
 {
+  "plugins": [
+    "stylelint-selector-bem-pattern"
+  ],
   "rules": {
+    "plugin/selector-bem-pattern": {
+      "preset": "bem",
+      "utilitySelectors": "^\\.(u|l)-[a-z]+$",
+      "ignoreSelectors": []
+    },
     "at-rule-blacklist": null,
     "at-rule-empty-line-before": ["always", {
       except: ["blockless-group", "first-nested"],

diff --git a/package.json b/package.json
@@ -24,6 +24,7 @@
     "postcss-loader": "^0.7.0",
     "sass-loader": "^3.0.0",
     "style-loader": "^0.13.0",
+    "stylelint-selector-bem-pattern": "^1.0.0",
     "stylelint-webpack-plugin": "^0.2.0",
     "webpack": "^1.12.2",
     "webpack-dev-server": "^1.12.1"

diff --git a/src/main.js b/src/main.js
@@ -4,4 +4,4 @@ require('./main.scss');
 
 var appContainer = document.querySelector('#app');
 
-appContainer.innerHTML = '<h1>Welcome!</h1>';
+appContainer.innerHTML = '<div class="main-component"><h1 class="main-component__title">Welcome!</h1></div>';
diff --git a/src/main.scss b/src/main.scss
@@ -1,5 +1,13 @@
+/** postcss-bem-linter: define main-component; weak */
 $color: #555;
 
-h1 {
+.main-component {
+  &__title {
+    color: $color;
+  }
+}
+
+/** postcss-bem-linter: define utilities */
+.u-ellipsis {
   color: $color;
-}
+}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -4,4 +4,4 @@ require('./main.scss');

		var appContainer = document.querySelector('#app');

		appContainer.innerHTML = '<h1>Welcome!</h1>';
		appContainer.innerHTML = '<div class="main-component"><h1 class="main-component__title">Welcome!</h1></div>';