First part of extend chaining

Author: lukeapage

lib/less/extend-visitor.js

@@ -41,8 +41,10 @@
                     return allSelectorsExtend.clone();
                 });
                 for(j = 0; j < extendList.length; j++) {
+                    this.foundExtends = true;
                     extend = extendList[j];
                     extend.findSelfSelectors(selectorPath);
+                    extend.ruleset = rulesetNode;
                     this.allExtendsStack[this.allExtendsStack.length-1].push(extend);
                 }
             }
@@ -72,16 +74,69 @@
 
     tree.processExtendsVisitor = function() {
         this._visitor = new tree.visitor(this);
-        this._searches
     };
 
     tree.processExtendsVisitor.prototype = {
         run: function(root) {
             var extendFinder = new tree.extendFinderVisitor();
             extendFinder.run(root);
+            if (!extendFinder.foundExtends) { return root; }
+            root.allExtends = root.allExtends.concat(this.doExtendChaining(root.allExtends, root.allExtends));
             this.allExtendsStack = [root.allExtends];
             return this._visitor.visit(root);
         },
+        doExtendChaining: function (extendsList, extendsListTarget, iterationCount) {
+            var extendIndex, targetExtendIndex, matches, extendsToAdd = [], newSelector, extendVisitor = this, selectorPath;
+
+            iterationCount = iterationCount || 0;
+
+            for(extendIndex = 0; extendIndex < extendsList.length; extendIndex++){
+                for(targetExtendIndex = 0; targetExtendIndex < extendsListTarget.length; targetExtendIndex++){
+
+                    var extend = extendsList[extendIndex];
+                    var targetExtend = extendsListTarget[targetExtendIndex];
+                    if (this.inInheritanceChain(targetExtend, extend)) { continue; }
+
+                    selectorPath = [targetExtend.selfSelectors[0]];
+                    matches = extendVisitor.findMatch(extend, selectorPath);
+
+                    if (matches.length) {
+
+                        extend.selfSelectors.forEach(function(selfSelector) {
+                            newSelector = extendVisitor.extendSelector(matches, selectorPath, selfSelector);
+                            newExtend = new(tree.Extend)(targetExtend.selector, targetExtend.option, 0);
+                            newExtend.selfSelectors = newSelector;
+                            newSelector[newSelector.length-1].extendList = [newExtend];
+                            extendsToAdd.push(newExtend);
+                            newExtend.ruleset = targetExtend.ruleset;
+                            newExtend.parent = targetExtend;
+                            targetExtend.ruleset.paths.push(newSelector);
+                        });
+                    }
+                }
+            }
+
+            if (extendsToAdd.length) {
+                this.extendChainCount++;
+                if (iterationCount > 100) {
+                    var selectorOne = "{unable to calculate}";
+                    var selectorTwo = "{unable to calculate}";
+                    try
+                    {
+                        selectorOne = extendsToAdd[0].selfSelectors[0].toCSS();
+                        selectorTwo = extendsToAdd[0].selector.toCSS();
+                    }
+                    catch(e) {}
+                    throw {message: "extend circular reference detected. One of the circular extends is currently:"+selectorOne+":extend(" + selectorTwo+")"};
+                }
+                return extendsToAdd.concat(extendVisitor.doExtendChaining(extendsToAdd, extendsListTarget, iterationCount+1));
+            } else {
+                return extendsToAdd;
+            }
+        },
+        inInheritanceChain: function (possibleParent, possibleChild) {
+            return possibleParent === possibleChild || (possibleChild.parent ? this.inInheritanceChain(possibleParent, possibleChild.parent) : false);
+        },
         visitRule: function (ruleNode, visitArgs) {
             visitArgs.visitDeeper = false;
         },
@@ -103,12 +158,16 @@
                 for(pathIndex = 0; pathIndex < rulesetNode.paths.length; pathIndex++) {
 
                     selectorPath = rulesetNode.paths[pathIndex];
+
+                    // extending extends happens initially, before the main pass
+                    if (selectorPath[selectorPath.length-1].extendList.length) { continue; }
+
                     matches = this.findMatch(allExtends[extendIndex], selectorPath);
 
                     if (matches.length) {
 
                         allExtends[extendIndex].selfSelectors.forEach(function(selfSelector) {
-                            selectorsToAdd.push(extendVisitor.extendSelector(matches, selfSelector));
+                            selectorsToAdd.push(extendVisitor.extendSelector(matches, selectorPath, selfSelector));
                         });
                     }
                 }
@@ -183,7 +242,7 @@
             }
             return matches;
         },
-        extendSelector:function (matches, replacementSelector) {
+        extendSelector:function (matches, selectorPath, replacementSelector) {
 
             //for a set of matches, replace each match with the replacement selector
 

test/css/extend-chaining.css

@@ -0,0 +1,38 @@
+.a,
+.b,
+.c {
+  color: black;
+}
+.f,
+.e,
+.d {
+  color: black;
+}
+.g.h,
+.i.j.h,
+.k.j.h {
+  color: black;
+}
+.i.j,
+.k.j {
+  color: white;
+}
+.l,
+.m,
+.n,
+.o,
+.p,
+.q,
+.r,
+.s,
+.t {
+  color: black;
+}
+.u,
+.v.u.v {
+  color: black;
+}
+.w,
+.v.w.v {
+  color: black;
+}

test/css/extend-nest.css

@@ -1,12 +1,14 @@
 .sidebar,
 .sidebar2,
-.type1 .sidebar3 {
+.type1 .sidebar3,
+.type2.sidebar4 {
   width: 300px;
   background: red;
 }
 .sidebar .box,
 .sidebar2 .box,
-.type1 .sidebar3 .box {
+.type1 .sidebar3 .box,
+.type2.sidebar4 .box {
   background: #FFF;
   border: 1px solid #000;
   margin: 10px 0;
@@ -17,3 +19,6 @@
 .type1 .sidebar3 {
   background: green;
 }
+.type2.sidebar4 {
+  background: red;
+}

test/css/extend.css

@@ -34,13 +34,13 @@ div.ext7,
   width: 100px;
 }
 .ext8.ext9,
-.foo {
+.fuu {
   result: add-foo;
 }
 .ext8 .ext9,
 .ext8 + .ext9,
 .ext8 > .ext9,
-.bar,
+.buu,
 .zap,
 .zoo {
   result: bar-matched;
@@ -49,15 +49,14 @@ div.ext7,
   result: none;
 }
 .ext8 .ext9,
-.bar {
+.buu {
   result: match-nested-bar;
 }
 .ext8.ext9,
-.foo {
+.fuu {
   result: match-nested-foo;
 }
 .aa,
-.bb,
 .cc {
   color: black;
 }

test/less/errors/extend-circular.less

@@ -0,0 +1,26 @@
+// classic circular reference
+
+.x:extend(.z) {}
+.y:extend(.x) {}
+.z:extend(.y) {}
+
+//.x:extend(.z) {}
+//.y:extend(.x) {}
+//.z:extend(.y) {}
+//
+//.x:extend(.z),    <-- target 1
+///y:extend(.z) {}  <-- new 1
+//.y:extend(.x),
+//.z:extend(.x) {}  <-- new
+//.z:extend(.y),
+//.x:extend(.y) {}  <-- new
+//
+//.x:extend(.z),
+//.z:extend(.z),  <--- last iteration 1 - .parent = target 1 - .parent =
+///y:extend(.z) {}
+//.y:extend(.x),
+//.x:extend(.x),  <-- last  iteration
+//.z:extend(.x) {}
+//.z:extend(.y),  <-- potential match with 1 -> result in .z:extend(.y)
+//.y:extend(.y),    <-- last  iteration
+//.x:extend(.y) {}

test/less/errors/extend-circular.txt

@@ -0,0 +1,2 @@
+SyntaxError: extend circular reference detected. One of the circular extends is currently: .x:extend( .z) in {path}extend-circular.less on line null, column 0:
+1 

test/less/extend-chaining.less

@@ -0,0 +1,48 @@
+//very simple chaining
+.a {
+  color: black;
+}
+.b:extend(.a) {}
+.c:extend(.b) {}
+
+//very simple chaining, ordering not important
+
+.d:extend(.e) {}
+.e:extend(.f) {}
+.f {
+  color: black;
+}
+
+//extend with all
+
+.g.h {
+  color: black;
+}
+.i.j:extend(.g all) {
+  color: white;
+}
+.k:extend(.i all) {}
+
+//extend multi-chaining
+
+.l {
+  color: black;
+}
+.m:extend(.l){}
+.n:extend(.m){}
+.o:extend(.n){}
+.p:extend(.o){}
+.q:extend(.p){}
+.r:extend(.q){}
+.s:extend(.r){}
+.t:extend(.s){}
+
+// self referencing is ignored
+
+.u {color: black;}
+.v.u.v:extend(.u all){}
+
+// circular reference because the new extend product will match the existing extend
+
+.w:extend(.w) {color: black;}
+.v.w.v:extend(.w all){}

test/less/extend-nest.less

@@ -20,3 +20,10 @@
       background: green;
     }
 }
+
+.type2 {
+  &.sidebar4 {
+    &:extend(.sidebar all);
+    background: red;
+  }
+}

test/less/extend.less

@@ -59,8 +59,8 @@ div.ext5,
   }
 }
 
-.foo:extend(.ext8.ext9 all) {}
-.bar:extend(.ext8 .ext9 all) {}
+.fuu:extend(.ext8.ext9 all) {}
+.buu:extend(.ext8 .ext9 all) {}
 .zap:extend(.ext8 + .ext9 all) {}
 .zoo:extend(.ext8 > .ext9 all) {}
 
@@ -70,7 +70,7 @@ div.ext5,
     background: red;
   }
 }
-.bb:extend(.aa) {
+.bb {
   background: red;
   .bb {
     color: black;