Proposed solution for issue less#1554. Adds supporto to the & sel…

…ector in extend function arguments.
pedrocorreia · Sep 20, 2013 · 1e2a7f5 · 1e2a7f5
1 parent ee11dfb
commit 1e2a7f5
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 1 deletion.
diff --git a/lib/less/extend-visitor.js b/lib/less/extend-visitor.js
@@ -298,6 +298,9 @@
             return matches;
         },
         isElementValuesEqual: function(elementValue1, elementValue2) {
+            if ( elementValue1 === '&' ) {
+                return true;
+            }
             if (typeof elementValue1 === "string" || typeof elementValue2 === "string") {
                 return elementValue1 === elementValue2;
             }

diff --git a/test/css/extend-nest.css b/test/css/extend-nest.css
@@ -55,3 +55,43 @@
 .amp-test-f.amp-test-c .amp-test-b.amp-test-d.amp-test-b.amp-test-e + .amp-test-c .amp-test-b.amp-test-d.amp-test-b.amp-test-e.amp-test-g {
   test: extended by masses of selectors;
 }
+.amp-test-i.amp-test-j,
+.amp-test-i.amp-test-k {
+  color: black;
+  background: white;
+}
+.amp-test-i.amp-test-k {
+  background: red;
+}
+.amp-test-all.all-a,
+.amp-test-all.all-b {
+  color: black;
+  background: white;
+}
+.amp-test-all.all-a:hover,
+.amp-test-all.all-b:hover {
+  color: green;
+}
+.amp-test-all.all-b {
+  background: red;
+}
+.deeper-amp-test {
+  background: black;
+}
+.deeper-amp-test.level-1,
+.deeper-amp-test.level-2 {
+  background: magenta;
+  color: black;
+}
+.deeper-amp-test.level-1 .sub-level-1,
+.deeper-amp-test.level-2 .sub-level-1 {
+  background: red;
+  color: white;
+}
+.deeper-amp-test.level-1 .sub-level-2,
+.deeper-amp-test.level-2 .sub-level-2 {
+  background: green;
+}
+.deeper-amp-test.level-2 {
+  color: blue;
+}
diff --git a/test/less/extend-nest.less b/test/less/extend-nest.less
@@ -62,4 +62,46 @@
 }
 .amp-test-h {
   test: extended by masses of selectors;
-}
+}
+
+.amp-test-i {
+  &.amp-test-j {
+    color: black;
+    background: white;
+  }
+  &.amp-test-k {
+    &:extend(&.amp-test-j);
+    background: red;
+  }
+}
+
+.amp-test-all {
+  &.all-a {
+    color: black;
+    background: white;
+    &:hover {
+      color: green;
+    }
+  }
+  &.all-b {
+    &:extend(&.all-a all);
+    background: red;
+  }
+}
+.deeper-amp-test {
+  background: black;
+  &.level-1 {
+    background: magenta;
+    color: black;
+    .sub-level-1 {
+      background: red;
+      color: white;
+    }
+    .sub-level-2:extend(.sub-level-1) {      
+      background: green;
+    }
+  }
+  &.level-2:extend(&.level-1) {
+    color: blue;
+  }
+}