fix: MadLittleMods#130 variables in nested comma-separated selectors

Author: Sergey Bondar

index.js

@@ -234,40 +234,38 @@ module.exports = (options = {}) => {
         });
 
         if (doesRuleUseVariables) {
-          rulesThatHaveDeclarationsWithVariablesList.push(rule);
+          if (rule.type === "rule" && rule.selectors.length > 1) {
+            // Split out the rule into each comma separated selector piece
+            // We only need to split if it's actually a Rule with multiple selectors (comma separated)
+            // duplicate rules would be probably merged with cssnano (cannot be sure about nested)
+            rule.selectors.reverse().forEach(function(selector) {
+              var ruleClone = rule.cloneAfter();
+              ruleClone.selector = selector;
+
+              return ruleClone;
+            });
+
+            // Rules will be added to list in the next traverse
+            rule.remove();
+          } else {
+            rulesThatHaveDeclarationsWithVariablesList.push(rule);
+          }
         }
       });
 
       rulesThatHaveDeclarationsWithVariablesList.forEach(function(rule) {
-        var rulesToWorkOn = [].concat(rule);
-        // Split out the rule into each comma separated selector piece
-        // We only need to split if it's actually a Rule with multiple selectors (comma separated)
-        if (rule.type === "rule" && rule.selectors.length > 1) {
-          // Reverse the selectors so that we can cloneAfter in the same comma separated order
-          rulesToWorkOn = rule.selectors.reverse().map(function(selector) {
-            var ruleClone = rule.cloneAfter();
-            ruleClone.selector = selector;
-
-            return ruleClone;
-          });
-
-          rule.remove();
-        }
-
         // Resolve the declarations
-        rulesToWorkOn.forEach(function(ruleToWorkOn) {
-          ruleToWorkOn.nodes.slice(0).forEach(function(node) {
-            if (node.type === "decl") {
-              var decl = node;
-              resolveDecl(
-                decl,
-                map,
-                opts.preserve,
-                opts.preserveAtRulesOrder,
-                logResolveValueResult
-              );
-            }
-          });
+        rule.nodes.slice(0).forEach(function(node) {
+          if (node.type === "decl") {
+            var decl = node;
+            resolveDecl(
+              decl,
+              map,
+              opts.preserve,
+              opts.preserveAtRulesOrder,
+              logResolveValueResult
+            );
+          }
         });
       });
 

test/fixtures/cascade-and-multiple-on-nested-rules.css

@@ -0,0 +1,29 @@
+:root {
+	--some-width: 150px;
+}
+:root {
+	--White1: #FFF;
+}
+
+.a {
+	width: var(--some-width);
+
+	a, label, &:after {
+		color: var(--White1);
+	}
+}
+
+/* postcss-nested double parent selector case */
+.a, .b {
+	/* here variable */
+	width: var(--some-width);
+
+	/* and here another */
+	a, label {
+		background: var(--White1);
+
+		li {
+			width: var(--some-width);
+		}
+	}
+}

test/fixtures/cascade-and-multiple-on-nested-rules.expected.css

@@ -0,0 +1,54 @@
+
+.a {
+    width: 150px;
+
+    a {
+        color: #FFF
+    }
+
+    label {
+        color: #FFF
+    }
+
+    &:after {
+        color: #FFF
+    }
+}
+
+.a {
+    width: 150px;
+
+    a {
+        background: #FFF;
+
+        li {
+            width: 150px;
+        }
+    }
+    label {
+        background: #FFF;
+
+        li {
+            width: 150px;
+        }
+    }
+}
+
+.b {
+    width: 150px;
+
+    a {
+        background: #FFF;
+
+        li {
+            width: 150px;
+        }
+    }
+    label {
+        background: #FFF;
+
+        li {
+            width: 150px;
+        }
+    }
+}

test/test.js

@@ -12,6 +12,8 @@ var cssvariables = require("../");
 var cssnano = require("cssnano");
 var normalizeWhitespace = require("postcss-normalize-whitespace");
 var discardComments = require("postcss-discard-comments");
+var nestedCss = require("postcss-nested");
+var importCss = require("postcss-import");
 
 var MOCK_JS_VARIABLES = {
   "--js-defined1": "75px",
@@ -186,6 +188,8 @@ describe("postcss-css-variables", function() {
 
     test("should cascade to nested rules", "cascade-on-nested-rules");
 
+    test("should cascade to nested multiple rules", "cascade-and-multiple-on-nested-rules");
+
     test(
       "should cascade with calc-expression to nested rules",
       "cascade-with-calc-expression-on-nested-rules"