Fix the lineBreak option keeping the selectors indent

Author: yisibl

index.js

@@ -6,6 +6,9 @@ var postcss = require("postcss")
  */
 var re_CUSTOM_SELECTOR = /([^,]*?)(:-{2,}[\w-]+)(.*)/g
 
+// 匹配换行符与空白
+var reBLANK_LINE       = /(\r\n|\n|\r)(\s*?\1)+/gi
+
 /**
  * 暴露插件
  */
@@ -50,11 +53,6 @@ module.exports = postcss.plugin("postcss-custom-selectors", function(options) {
       customSelectors[extension] = extensions[extension]
     })
 
-    //控制选择器是否换行
-    if (!options.lineBreak && options.lineBreak == false) {
-      line_break = ' '
-    }
-
     // 转换自定义的选择器别名
     styles.eachRule(function(rule) {
       for (var prop in customSelectors) {
@@ -64,9 +62,19 @@ module.exports = postcss.plugin("postcss-custom-selectors", function(options) {
           // $2 = <extension-name> （自定义的选择器名称）
           rule.selector = rule.selector.replace(re_CUSTOM_SELECTOR, function($0, $1, $2, $3) {
             if ($2 === prop) {
-              return customSelector.split(",").map(function(selector) {
+              var newSelector = customSelector.split(",").map(function(selector) {
                 return $1 + selector.trim() + $3
-              }).join("," + line_break)
+              })
+
+              // 选择器不换行
+              if (!options.lineBreak && options.lineBreak === false) {
+                line_break = " "
+                newSelector = newSelector.join("," + line_break)
+              } else {
+                // 选择器换行，同时替换多个换行为一个
+                newSelector = newSelector.join("," + line_break + rule.before).replace(reBLANK_LINE, line_break)
+              }
+              return newSelector
             } else if ($2 !== prop) {
               console.log("Warning: The selector '" + $2 + "' is undefined in CSS!")
               return $2

test/fixtures/comment/input.css

@@ -0,0 +1,11 @@
+/* comment */
+@custom-selector :--foo
+  /* comment */
+  .foo,
+  .bar > .baz;
+
+
+/* comment */
+      :--foo + p {
+    display: block;
+  }

test/fixtures/comment/output.css

@@ -0,0 +1,8 @@
+/* comment */
+
+
+/* comment */
+      .foo + p,
+      .bar > .baz + p {
+    display: block;
+  }

test/fixtures/line-break/input.css

@@ -0,0 +1,6 @@
+@custom-selector :--heading h1, h2, h3, h4, h5, h6;
+/* comment */
+
+  article :--heading + p {
+    margin-top: 0;
+  }

test/fixtures/line-break/output.css

@@ -0,0 +1,5 @@
+/* comment */
+
+  article h1 + p, article h2 + p, article h3 + p, article h4 + p, article h5 + p, article h6 + p {
+    margin-top: 0;
+  }

test/index.js

@@ -31,13 +31,17 @@ test("@custom-selector", function(t) {
   compareFixtures(t, "some-hyphen", "should transform some hyphen")
   compareFixtures(t, "matches", "should transform matches selector")
   compareFixtures(t, "similar-matches", "should transform matches selector")
-
-  compareFixtures(t, "extension", "should transform local extensions", {
-    extensions: {
-      ':--any' : 'section, article, aside, nav',
-      ':--foo': 'input[type="text"] > section, #nav .bar'
-    }
+  compareFixtures(t, "comment", "should transform comment")
+  compareFixtures(t, "line-break", "should transform line break", {
+      lineBreak: false
   })
 
+  // compareFixtures(t, "extension", "should transform local extensions", {
+  //   extensions: {
+  //     ':--any' : 'section, article, aside, nav',
+  //     ':--foo': 'input[type="text"] > section, #nav .bar'
+  //   }
+  // })
+
   t.end()
 })