add the any and deep keywords for extending, see issue less#2101

lib/less/parser/parser.js

@@ -571,7 +571,7 @@ var Parser = function Parser(context, imports, fileInfo) {
                 do {
                     option = null;
                     elements = null;
-                    while (! (option = parserInput.$re(/^(all)(?=\s*(\)|,))/))) {
+                    while (! (option = parserInput.$re(/^(all|any|deep)(?=\s*(\)|,))/))) {
                         e = this.element();
                         if (!e) {
                             break;

lib/less/tree/extend.js

@@ -12,6 +12,14 @@ var Extend = function Extend(selector, option, index) {
             this.allowBefore = true;
             this.allowAfter = true;
             break;
+        case "any":
+            this.allowBefore = true;
+            this.allowAfter = false;
+            break;
+        case "deep":
+            this.allowBefore = false;
+            this.allowAfter = true;
+            break;
         default:
             this.allowBefore = false;
             this.allowAfter = false;

test/css/extend-all.css

@@ -0,0 +1,13 @@
+.grand {
+  grand: rules;
+}
+.grand .mother,
+.grand .father,
+.father2 {
+  parent: rules;
+}
+.grand .mother .child,
+.grand .father .child,
+.father2 .child {
+  child: rules;
+}

test/css/extend-any.css

@@ -0,0 +1,11 @@
+.grand {
+  grand: rules;
+}
+.grand .mother,
+.grand .father,
+.father2 {
+  parent: rules;
+}
+.grand .mother .child {
+  child: rules;
+}

test/css/extend-chaining.css

@@ -17,6 +17,12 @@
 .k.j {
   color: white;
 }
+.g2.h2 {
+  color: black;
+}
+.i2.j2 {
+  color: white;
+}
 .l,
 .m,
 .n,

test/css/extend-deep.css

@@ -0,0 +1,11 @@
+.grand {
+  grand: rules;
+}
+.grand .mother,
+.father2 {
+  parent: rules;
+}
+.grand .mother .child,
+.father2 .child {
+  child: rules;
+}

test/css/extend-media.css

@@ -1,11 +1,13 @@
 .ext1 .ext2,
-.all .ext2 {
+.all .ext2,
+.deep .ext2 {
   background: black;
 }
 @media tv {
   .ext1 .ext3,
   .tv-lowres .ext3,
-  .all .ext3 {
+  .all .ext3,
+  .deep .ext3 {
     color: white;
   }
   .tv-lowres {
@@ -15,7 +17,8 @@
 @media tv and hires {
   .ext1 .ext4,
   .tv-hires .ext4,
-  .all .ext4 {
+  .all .ext4,
+  .deep .ext4 {
     color: green;
   }
   .tv-hires {

test/css/extend-nest.css

@@ -1,27 +1,54 @@
 .sidebar,
 .sidebar2,
+.sidebar2any,
+.sidebar2deep,
 .type1 .sidebar3,
-.type2.sidebar4 {
+.type2.sidebar4,
+.type3 .sidebar5,
+.type4.sidebar6,
+.type5 .sidebar7,
+.type6.sidebar8 {
   width: 300px;
   background: red;
 }
 .sidebar .box,
 .sidebar2 .box,
+.sidebar2deep .box,
 .type1 .sidebar3 .box,
-.type2.sidebar4 .box {
+.type2.sidebar4 .box,
+.type5 .sidebar7 .box,
+.type6.sidebar8 .box {
   background: #FFF;
   border: 1px solid #000;
   margin: 10px 0;
 }
 .sidebar2 {
   background: blue;
 }
+.sidebar2any {
+  background: blue;
+}
+.sidebar2deep {
+  background: blue;
+}
 .type1 .sidebar3 {
   background: green;
 }
 .type2.sidebar4 {
   background: red;
 }
+.type3 .sidebar5 {
+  background: green;
+}
+.type4.sidebar6 {
+  background: red;
+}
+.type5 .sidebar7 {
+  background: green;
+}
+.type6.sidebar8 {
+  background: red;
+}
 .button,
 .submit {
   color: black;

test/css/extend-selector.css

@@ -19,10 +19,16 @@
 .foo .baz,
 .ext1 .ext2 .bar,
 .ext1 .ext2 .baz,
+.ext1 .ext2.deep .bar,
+.ext1 .ext2.deep .baz,
 .ext3 .bar,
 .ext3 .baz,
 .ext4 .bar,
-.ext4 .baz {
+.ext4 .baz,
+.ext3deep .bar,
+.ext3deep .baz,
+.ext4deep .bar,
+.ext4deep .baz {
   display: none;
 }
 div.ext5,

test/css/extend.css

@@ -30,30 +30,44 @@
 div.ext5,
 .ext6 > .ext5,
 div.ext7,
-.ext6 > .ext7 {
+.ext6 > .ext7,
+div.ext7.any,
+.ext6 > .ext7.any {
   width: 100px;
 }
 .ext8.ext9,
-.fuu {
+.fuu,
+.fuu.any,
+.fuu.deep {
   result: add-foo;
 }
 .ext8 .ext9,
 .ext8 + .ext9,
 .ext8 > .ext9,
 .buu,
+.buu.any,
+.buu.deep,
 .zap,
-.zoo {
+.zap.any,
+.zap.deep,
+.zoo,
+.zoo.any,
+.zoo.deep {
   result: bar-matched;
 }
 .ext8.nomatch {
   result: none;
 }
 .ext8 .ext9,
-.buu {
+.buu,
+.buu.any,
+.buu.deep {
   result: match-nested-bar;
 }
 .ext8.ext9,
-.fuu {
+.fuu,
+.fuu.any,
+.fuu.deep {
   result: match-nested-foo;
 }
 .aa,

test/less/extend-all.less

@@ -0,0 +1,15 @@
+.grand {
+grand: rules;
+
+.mother {
+  parent: rules;
+
+  .child {
+    child: rules;
+  }
+}
+}
+
+.father:extend(.mother all){};
+.father2:extend(.grand .mother all){};
+

test/less/extend-any.less

@@ -0,0 +1,15 @@
+.grand {
+grand: rules;
+
+.mother {
+  parent: rules;
+
+  .child {
+    child: rules;
+  }
+}
+}
+
+.father:extend(.mother any){};
+.father2:extend(.grand .mother any){};
+

test/less/extend-chaining.less

@@ -23,6 +23,16 @@
 }
 .k:extend(.i all) {}
 
+//extend with any
+
+.g2.h2 {
+  color: black;
+}
+.i2.j2:extend(.g2 any) {
+  color: white;
+}
+.k2:extend(.i2 any) {}
+
 //extend multi-chaining
 
 .l {
@@ -88,4 +98,4 @@
   }
 }
 .mb:extend(.ma) {};
-.mc:extend(.mb) {};
+.mc:extend(.mb) {};

test/less/extend-clearfix.less

@@ -9,7 +9,7 @@
 }
 
 .foo {
-  &:extend(.clearfix all);
+  &:extend(.clearfix deep);
   color: red;
 }
 

test/less/extend-deep.less

@@ -0,0 +1,15 @@
+.grand {
+grand: rules;
+
+.mother {
+  parent: rules;
+
+  .child {
+    child: rules;
+  }
+}
+}
+
+.father:extend(.mother deep){};
+.father2:extend(.grand .mother deep){};
+

test/less/extend-media.less

@@ -13,12 +13,18 @@
     .ext1 .ext4 {
       color: green;
     }
-    .tv-hires :extend(.ext1 all) {
+    .tv-hires :extend(.ext1 deep) {
       background: red;
     }
   }
 }
 
 .all:extend(.ext1 all) {
 
-}
+}
+.any:extend(.ext1 any) {
+
+}
+.deep:extend(.ext1 deep) {
+
+}

test/less/extend-nest.less

@@ -14,6 +14,16 @@
   background: blue;
 }
 
+.sidebar2any {
+  &:extend(.sidebar any);
+  background: blue;
+}
+
+.sidebar2deep {
+  &:extend(.sidebar deep);
+  background: blue;
+}
+
 .type1 {
     .sidebar3 {
       &:extend(.sidebar all);
@@ -28,6 +38,34 @@
   }
 }
 
+.type3 {
+    .sidebar5 {
+      &:extend(.sidebar any);
+      background: green;
+    }
+}
+
+.type4 {
+  &.sidebar6 {
+    &:extend(.sidebar any);
+    background: red;
+  }
+}
+
+.type5 {
+    .sidebar7 {
+      &:extend(.sidebar deep);
+      background: green;
+    }
+}
+
+.type6 {
+  &.sidebar8 {
+    &:extend(.sidebar deep);
+    background: red;
+  }
+}
+
 .button {
   color: black;
   &:hover {
@@ -62,4 +100,4 @@
 }
 .amp-test-h {
   test: extended by masses of selectors;
-}
+}