Allow lists to be re-evaluated as selectors (Fixes less#1694)

matthew-dean · Jun 3, 2018 · 9cec20e · 9cec20e
1 parent 94e7c50
commit 9cec20e
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 18 deletions.
diff --git a/lib/less/tree/ruleset.js b/lib/less/tree/ruleset.js
@@ -55,25 +55,45 @@ Ruleset.prototype.eval = function (context) {
             for (var j = 0; j < selector.elements.length; j++) {
                 var el = selector.elements[j];
                 // If selector elements were variables, re-parse to see if they are actually selectors
-                if (el.isVariable && typeof el.value.value === 'string') {
-                    this.parse.parseNode(
-                        el.value.value, 
-                        ["selectors"], 
-                        el.getIndex(), 
-                        el.fileInfo(), 
-                        function(err, result) {
-                            el.isVariable = false;
-                            if (result) {
-                                result = utils.flattenArray(result);
-                                // If the parsed element matches itself, it's still an element
-                                if (result.length !== 1 || el.value.value !== result[0].elements[0].value) {
-                                    that.selectors = that.selectors.slice(0, i + 1)
-                                        .concat(result, that.selectors.slice(i + 1));
-                                    selCnt += result.length;
-                                    removeSelector = true;
+                if (el.isVariable) {
+                    var selectorsToInsert;
+                    if (Array.isArray(el.value.value)) {
+                        // Convert var evaluated to list as list of selectors
+                        selectorsToInsert = new Array(el.value.value.length);
+                        el.value.value.forEach(function(val, k) {
+                            selectorsToInsert[k] = new Selector(
+                                [new Element(
+                                    null,
+                                    val.value,
+                                    false,
+                                    el.getIndex(),
+                                    el.fileInfo()
+                                )]
+                            );
+                        })
+                    } else if (typeof el.value.value === 'string') {
+                        this.parse.parseNode(
+                            el.value.value, 
+                            ["selectors"], 
+                            el.getIndex(), 
+                            el.fileInfo(), 
+                            function(err, result) {
+                                el.isVariable = false;
+                                if (result) {
+                                    result = utils.flattenArray(result);
+                                    // If the parsed element matches itself, it's still an element
+                                    if (result.length !== 1 || el.value.value !== result[0].elements[0].value) {
+                                        selectorsToInsert = result;
+                                    }
                                 }
-                            }
-                        });
+                            });
+                    }
+                    if (selectorsToInsert) {
+                        this.selectors = this.selectors.slice(0, i + 1)
+                            .concat(selectorsToInsert, this.selectors.slice(i + 1));
+                        selCnt += selectorsToInsert.length;
+                        removeSelector = true;
+                    }
                 }
             }
             if (removeSelector) {

diff --git a/test/css/parse-interpolation.css b/test/css/parse-interpolation.css
@@ -13,3 +13,9 @@ textarea:focus {
 .master-page-1 .selector-2 {
   background-color: red;
 }
+.fruit-apple,
+.fruit-satsuma,
+.fruit-banana,
+.fruit-pear {
+  content: "Just a test.";
+}
diff --git a/test/less/parse-interpolation.less b/test/less/parse-interpolation.less
@@ -19,4 +19,11 @@
     @{my-selector} {
         background-color: red;
     }
+}
+
+@list: apple, satsuma, banana, pear;
+@{list} {
+  .fruit-& {
+    content: "Just a test.";
+  }
 }