less 2.4.0 → 2.5.0

data/lib/less/js/test/less/extend-selector.less

@@ -81,4 +81,19 @@ div.ext5,
   .attribute-test {
     &:extend([data="test3"] all);
   }
+}
+
+.header {
+  .header-nav {
+    background: red;
+    &:before {
+      background: blue;
+    }
+  }
+}
+
+.footer {
+  .footer-nav {
+    &:extend( .header .header-nav all );
+  }
 }

data/lib/less/js/test/less/extract-and-length.less

@@ -0,0 +1,133 @@
+
+// simple array/list:
+
+.multiunit {
+  @v: abc "abc" 1 1px 1% #123;
+  length: length(@v);
+  extract: extract(@v, 1) extract(@v, 2) extract(@v, 3) extract(@v, 4) extract(@v, 5) extract(@v, 6);
+}
+
+.incorrect-index {
+    @v1: a  b  c;
+    @v2: a, b, c;
+    v1: extract(@v1,  5);
+    v2: extract(@v2, -2);
+}
+
+.scalar {
+    @var:          variable;
+    var-value:     extract(@var, 1);
+    var-length:    length(@var);
+    ill-index:     extract(@var, 2);
+
+    name-value:    extract(name, 1);
+    string-value:  extract("string", 1);
+    number-value:  extract(12345678, 1);
+    color-value:   extract(blue, 1);
+    rgba-value:    extract(rgba(80, 160, 240, 0.67), 1);
+    empty-value:   extract(~'', 1);
+    
+    name-length:   length(name);
+    string-length: length("string");
+    number-length: length(12345678);
+    color-length:  length(blue);
+    rgba-length:   length(rgba(80, 160, 240, 0.67));
+    empty-length:  length(~'');
+}
+
+.mixin-arguments {
+    .mixin-args(a b c d);
+    .mixin-args(a, b, c, d);
+    .mixin-args(1; 2; 3; 4);
+}
+
+.mixin-args(@value) {
+    &-1 {
+        length:  length(@value);
+        extract: extract(@value, 3) ~"|" extract(@value, 2) ~"|" extract(@value, 1);
+    }
+}
+
+.mixin-args(...) { 
+    &-2 {
+        length:  length(@arguments);
+        extract: extract(@arguments, 3) ~"|" extract(@arguments, 2) ~"|" extract(@arguments, 1);
+    }
+}
+
+.mixin-args(@values...) {
+    &-3 {
+        length:  length(@values);
+        extract: extract(@values, 3) ~"|" extract(@values, 2) ~"|" extract(@values, 1);
+    }
+}
+
+.mixin-args(@head, @tail...) {
+    &-4 {
+        length:  length(@tail);
+        extract: extract(@tail, 2) ~"|" extract(@tail, 1);
+    }
+}
+
+// "multidimensional" array/list
+
+.md-space-comma {
+    @v: a b c, 1 2 3, "x" "y" "z";
+    length-1:  length(@v);
+    extract-1: extract(@v, 2);
+    length-2:  length(extract(@v, 2));
+    extract-2: extract(extract(@v, 2), 2);
+
+    &-as-args {.mixin-args(a b c, 1 2 3, "x" "y" "z")}
+}
+
+.md-cat-space-comma {
+    @a: a b c;
+    @b: 1 2 3;
+    @c: "x" "y" "z";
+    @v: @a, @b, @c;
+    length-1:  length(@v);
+    extract-1: extract(@v, 2);
+    length-2:  length(extract(@v, 2));
+    extract-2: extract(extract(@v, 2), 2);
+    
+    &-as-args {.mixin-args(@a, @b, @c)}
+}
+
+.md-cat-comma-space {
+    @a: a, b, c;
+    @b: 1, 2, 3;
+    @c: "x", "y", "z";
+    @v: @a @b @c;
+    length-1:  length(@v);
+    extract-1: extract(@v, 2);
+    length-2:  length(extract(@v, 2));
+    extract-2: extract(extract(@v, 2), 2);
+
+    &-as-args {.mixin-args(@a @b @c)}
+}
+
+.md-3D {
+    @a: a b c d, 1 2 3 4;
+    @b: 5 6 7 8, e f g h;
+    .3D(@a, @b);
+    
+    .3D(...) {
+
+        @v1:       @arguments;
+        length-1:  length(@v1);
+        extract-1: extract(@v1, 1);
+        
+        @v2:       extract(@v1, 2);
+        length-2:  length(@v2);
+        extract-2: extract(@v2, 1);
+        
+        @v3:       extract(@v2, 1);
+        length-3:  length(@v3);
+        extract-3: extract(@v3, 3);
+
+        @v4:       extract(@v3, 4);
+        length-4:  length(@v4);
+        extract-4: extract(@v4, 1);
+    }
+}

data/lib/less/js/test/less/functions.less

@@ -30,6 +30,7 @@
   luma-cyan: luma(#00ffff);
   luma-white-alpha: luma(rgba(255,255,255,0.5));
   contrast-filter: contrast(30%);
+  saturate-filter: saturate(5%);
   contrast-white: contrast(#fff);
   contrast-black: contrast(#000);
   contrast-red: contrast(#ff0000);
@@ -86,14 +87,21 @@
   pow: pow(8px, 2);
   pow: pow(4, 3);
   pow: pow(3, 3em);
+  min: min(0);
+  min: min("junk", 6, 5);
+  min: min(1pc, 3pt);
+  max: max(1, 3);
+  max: max(3%, 1cm, 8%, 2mm);
   percentage: percentage((10px / 50));
   color: color("#ff0011");
   tint: tint(#777777, 13);
   tint-full: tint(#777777, 100);
   tint-percent: tint(#777777, 13%);
+  tint-negative: tint(#777777, -13%);
   shade: shade(#777777, 13);
   shade-full: shade(#777777, 100);
   shade-percent: shade(#777777, 13%);
+  shade-negative: shade(#777777, -13%);
 
   fade-out: fadeOut(red, 5%); // support fadeOut and fadeout
   fade-in: fadein(fadeout(red, 10%), 5%);
@@ -105,11 +113,13 @@
   mix-0: mix(#ff0000, #ffff00, 0);
   mix-100: mix(#ff0000, #ffff00, 100);
   mix-weightless: mix(#ff0000, #ffff00);
+  mixt: mix(#ff0000, transparent);
 
   .is-a {
     color: iscolor(#ddd);
     color1: iscolor(red);
     color2: iscolor(rgb(0, 0, 0));
+    color3: iscolor(transparent);
     keyword: iskeyword(hello);
     number: isnumber(32);
     string: isstring("hello");
@@ -122,6 +132,8 @@
 
 #alpha {
   alpha: darken(hsla(25, 50%, 50%, 0.6), 10%);
+  alpha2: alpha(rgba(3, 4, 5, 0.5));
+  alpha3: alpha(transparent);
 }
 
 #blendmodes {
@@ -136,7 +148,8 @@
   negation: negation(#f60000, #313131);
 }
 
-#extract {
+#extract-and-length {
   @anon: A B C 1 2 3;
-  result: extract(@anon, 6) extract(@anon, 5) extract(@anon, 4) extract(@anon, 3) extract(@anon, 2) extract(@anon, 1);
+  extract: extract(@anon, 6) extract(@anon, 5) extract(@anon, 4) extract(@anon, 3) extract(@anon, 2) extract(@anon, 1);
+  length: length(@anon);
 }

data/lib/less/js/test/less/globalVars/extended.json

@@ -0,0 +1,5 @@
+{
+    "the-border": "1px",
+    "base-color": "#111",
+    "red": "#842210"
+}

data/lib/less/js/test/less/globalVars/extended.less

@@ -0,0 +1,10 @@
+#header {
+  color: (@base-color * 3);
+  border-left: @the-border;
+  border-right: (@the-border * 2);
+}
+#footer {
+  color: (@base-color + #003300);
+  border-color: @red;
+}
+@red: desaturate(red, 10%); // less file overrides passed in color <- note line comment on last line to check it is okay

data/lib/less/js/test/less/globalVars/simple.json

@@ -0,0 +1,3 @@
+{
+	"my-color": "red"
+}

data/lib/less/js/test/less/globalVars/simple.less

@@ -0,0 +1,3 @@
+.class {
+  color: @my-color;
+}

data/lib/less/js/test/less/import-inline.less

@@ -0,0 +1,2 @@
+@import (inline) url("import/import-test-d.css") (min-width:600px);
+@import (inline, css) url("import/invalid-css.less");

data/lib/less/js/test/less/import-once.less

@@ -2,3 +2,5 @@
 @import "import/import-once-test-c";
 @import "import/import-once-test-c.less";
 @import "import/deeper/import-once-test-a";
+@import (multiple) "import/import-test-f.less";
+@import (multiple) "import/import-test-f.less";

data/lib/less/js/test/less/import-reference.less

@@ -0,0 +1,18 @@
+@import (reference) url("import-once.less");
+@import (reference) url("css-3.less");
+@import (reference) url("media.less");
+/*
+  The media statement above is invalid (no selector)
+  We should ban invalid media queries with properties and no selector?
+*/
+@import (reference) url("import/import-reference.less");
+
+.b {
+  .z();
+}
+
+.zz();
+
+.visible:extend(.z all) {
+  extend: test;
+}

data/lib/less/js/test/less/import/import-and-relative-paths-test.less

@@ -4,3 +4,14 @@
 @import "imports/logo";
 @import "imports/font";
 
+.unquoted-relative-path-bg() {
+    background-image: url(../../data/image.jpg);
+}
+.quoted-relative-path-border-image() {
+    border-image: url('../../data/image.jpg');
+}
+
+#imported-relative-path {
+    .unquoted-relative-path-bg;
+    .quoted-relative-path-border-image;
+}

data/lib/less/js/test/less/import/import-reference.less

@@ -0,0 +1,43 @@
+.z {
+  color: red;
+  .c {
+    color: green;
+  }
+}
+.only-with-visible,
+.z {
+  color: green;
+  &:hover {
+    color: green;
+  }
+  & {
+    color: green;
+  }
+  & + & {
+    color: green;
+    .sub {
+      color: green;
+    }
+  }
+}
+
+& {
+  .hidden {
+    hidden: true;
+  }
+}
+
+@media tv {
+  .hidden {
+    hidden: true;
+  }
+}
+
+/* comment is not output */
+
+.zz {
+  .y {
+    pulled-in: yes;
+  }
+  /* comment pulled in */
+}

data/lib/less/js/test/less/import/import-test-f.less

@@ -0,0 +1,5 @@
+@import "import-test-e";
+
+.test-f {
+  height: 10px;
+}

data/lib/less/js/test/less/import/invalid-css.less

@@ -0,0 +1 @@
+this isn't very valid CSS.

data/lib/less/js/test/less/media.less

@@ -109,7 +109,9 @@ body {
 }
 @smartphone: ~"only screen and (max-width: 200px)";
 @media @smartphone {
-  width: 480px;
+  body {
+    width: 480px;
+  }
 }
 
 @media print {
@@ -208,3 +210,25 @@ body {
     body { font-size: 11px; }
   }
 }
+
+.nav-justified {
+  @media (min-width: 480px) {
+    > li {
+      display: table-cell;
+    }
+  }
+}
+
+.menu
+{
+  @media (min-width: 768px) {
+    .nav-justified();
+  }
+}
+@all: ~"all";
+@tv: ~"tv";
+@media @all and @tv {
+  .all-and-tv-variables {
+    var: all-and-tv;
+  }
+}

data/lib/less/js/test/less/merge.less

@@ -0,0 +1,59 @@
+.first-transform() {
+  transform+: rotate(90deg), skew(30deg);
+}
+.second-transform() {
+  transform+: scale(2,4);
+}
+.third-transform() {
+  transform: scaleX(45deg);
+}
+.fourth-transform() {
+  transform+: scaleX(45deg);
+}
+.fifth-transform() {
+  transform+: scale(2,4) !important;
+}
+.first-background() {
+  background+: url(data://img1.png);
+}
+.second-background() {
+  background+: url(data://img2.png);
+}
+
+.test1 {
+  // Can merge values
+  .first-transform();
+  .second-transform();
+}
+.test2 {
+  // Wont merge values without +: merge directive, for backwards compatibility with css
+  .first-transform();
+  .third-transform();
+}
+.test3 {
+  // Wont merge values from two sources with different properties
+  .fourth-transform();
+  .first-background();
+}
+.test4 {
+  // Wont merge values from sources that merked as !important, for backwards compatibility with css
+  .first-transform();
+  .fifth-transform();
+}
+.test5 {
+  // Wont merge values from mixins that merked as !important, for backwards compatibility with css 
+  .first-transform();
+  .second-transform() !important;
+}
+.test6 {
+  // Ignores !merge if no peers found
+  .second-transform();
+}
+
+.test-interleaved {
+    transform+:  t1;
+    background+: b1;
+    transform+:  t2;
+    background+: b2, b3;
+    transform+:  t3;
+}

data/lib/less/js/test/less/mixins-args.less

@@ -202,4 +202,14 @@ body {
 }
 .selector3 {
   .mixin-comma-default3(4,2,2,2);
+}
+
+.test-calling-one-arg-mixin(@a) {
+}
+
+.test-calling-one-arg-mixin(@a, @b, @rest...) {
+}
+
+div {
+  .test-calling-one-arg-mixin(1);
 }