less 2.2.2 → 2.6.0

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

@@ -0,0 +1,99 @@
+.error {
+  border: 1px #f00;
+  background: #fdd;
+}
+.error.intrusion {
+  font-size: 1.3em;
+  font-weight: bold;
+}
+.intrusion .error {
+  display: none;
+}
+.badError:extend(.error all) {
+  border-width: 3px;
+}
+
+.foo .bar, .foo .baz {
+    display: none;
+}
+
+.ext1 .ext2
+    :extend(.foo all) {
+}
+
+.ext3:extend(.foo all),
+.ext4:extend(.foo all) {
+}
+
+div.ext5,
+.ext6 > .ext5 {
+    width: 100px;
+}
+
+.should-not-exist-in-output,
+.ext7:extend(.ext5 all) {
+}
+
+.ext {
+  test: 1;
+}
+// same as 
+// .a .c:extend(.ext all)
+// .b .c:extend(.ext all)
+// .a .c .d
+// .b .c .d
+.a, .b {
+  test: 2;
+  .c:extend(.ext all) {
+    test: 3;
+    .d {
+      test: 4;
+    }
+  }
+}
+
+.replace.replace,
+.c.replace + .replace {
+  .replace,
+  .c {
+    prop: copy-paste-replace;
+  }
+}
+.rep_ace:extend(.replace all) {}
+
+.attributes {
+  [data="test"] {
+    extend: attributes;
+  }
+  .attribute-test {
+    &:extend([data="test"] all);
+  }
+  [data] {
+    extend: attributes2;
+  }
+  .attribute-test2 {
+    &:extend([data] all); //you could argue it should match [data="test"]... not for now though...
+  }
+  @attr-data: "test3";
+  [data=@{attr-data}] {
+    extend: attributes2;
+  }
+  .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/extend.less

@@ -0,0 +1,81 @@
+.error {
+  border: 1px #f00;
+  background: #fdd;
+}
+.error.intrusion {
+  font-size: 1.3em;
+  font-weight: bold;
+}
+.intrusion .error {
+  display: none;
+}
+.badError {
+  &:extend(.error all);
+  border-width: 3px;
+}
+
+.foo .bar, .foo .baz {
+    display: none;
+}
+
+.ext1 .ext2 {
+    &:extend(.foo all);
+}
+
+.ext3,
+.ext4 {
+  &:extend(.foo all);
+  &:extend(.bar all);
+}
+
+div.ext5,
+.ext6 > .ext5 {
+    width: 100px;
+}
+
+.ext7 {
+    &:extend(.ext5 all);
+}
+
+.ext8.ext9 {
+  result: add-foo;
+}
+.ext8 .ext9,
+.ext8 + .ext9,
+.ext8 > .ext9 {
+  result: bar-matched;
+}
+.ext8.nomatch {
+  result: none;
+}
+.ext8 {
+  .ext9 {
+    result: match-nested-bar;
+  }
+}
+.ext8 {
+  &.ext9 {
+    result: match-nested-foo;
+  }
+}
+
+.fuu:extend(.ext8.ext9 all) {}
+.buu:extend(.ext8 .ext9 all) {}
+.zap:extend(.ext8 + .ext9 all) {}
+.zoo:extend(.ext8 > .ext9 all) {}
+
+.aa {
+  color: black;
+  .dd {
+    background: red;
+  }
+}
+.bb {
+  background: red;
+  .bb {
+    color: black;
+  }
+}
+.cc:extend(.aa,.bb) {}
+.ee:extend(.dd all,.bb) {}
+.ff:extend(.dd,.bb 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

@@ -1,10 +1,12 @@
 #functions {
   @var: 10;
+  @colors: #000, #fff;
   color: _color("evil red"); // #660000
   width: increment(15);
   height: undefined("self");
   border-width: add(2, 3);
   variable: increment(@var);
+  background: linear-gradient(@colors);
 }
 
 #built-in {
@@ -15,35 +17,157 @@
   saturate: saturate(#29332f, 20%);
   desaturate: desaturate(#203c31, 20%);
   greyscale: greyscale(#203c31);
+  hsl-clamp: hsl(380, 150%, 150%);
   spin-p: spin(hsl(340, 50%, 50%), 40);
   spin-n: spin(hsl(30, 50%, 50%), -40);
+  luma-white: luma(#fff);
+  luma-black: luma(#000);
+  luma-black-alpha: luma(rgba(0,0,0,0.5));
+  luma-red: luma(#ff0000);
+  luma-green: luma(#00ff00);
+  luma-blue: luma(#0000ff);
+  luma-yellow: luma(#ffff00);
+  luma-cyan: luma(#00ffff);
+  luma-differs-from-luminance: luma(#ff3600);
+  luminance-white: luma(#fff);
+  luminance-black: luma(#000);
+  luminance-black-alpha: luma(rgba(0,0,0,0.5));
+  luminance-red: luma(#ff0000);
+  luminance-differs-from-luma: luminance(#ff3600);
+  contrast-filter: contrast(30%);
+  saturate-filter: saturate(5%);
+  contrast-white: contrast(#fff);
+  contrast-black: contrast(#000);
+  contrast-red: contrast(#ff0000);
+  contrast-green: contrast(#00ff00);
+  contrast-blue: contrast(#0000ff);
+  contrast-yellow: contrast(#ffff00);
+  contrast-cyan: contrast(#00ffff);
+  contrast-light: contrast(#fff, #111111, #eeeeee);
+  contrast-dark: contrast(#000, #111111, #eeeeee);
+  contrast-wrongorder: contrast(#fff, #eeeeee, #111111, 0.5);
+  contrast-light-thresh: contrast(#fff, #111111, #eeeeee, 0.5);
+  contrast-dark-thresh: contrast(#000, #111111, #eeeeee, 0.5);
+  contrast-high-thresh: contrast(#555, #111111, #eeeeee, 0.6);
+  contrast-low-thresh: contrast(#555, #111111, #eeeeee, 0.09);
+  contrast-light-thresh-per: contrast(#fff, #111111, #eeeeee, 50%);
+  contrast-dark-thresh-per: contrast(#000, #111111, #eeeeee, 50%);
+  contrast-high-thresh-per: contrast(#555, #111111, #eeeeee, 60%);
+  contrast-low-thresh-per: contrast(#555, #111111, #eeeeee, 9%);
+  replace: replace("Hello, Mars.", "Mars\.", "World!");
+  replace-captured: replace("This is a string.", "(string)\.$", "new $1.");
+  replace-with-flags: replace("One + one = 4", "one", "2", "gi");
+  replace-single-quoted: replace('foo-1', "1", "2");
+  replace-escaped-string: replace(~"bar-1", "1", "2");
+  replace-keyword: replace(baz-1, "1", "2");
   format: %("rgb(%d, %d, %d)", @r, 128, 64);
   format-string: %("hello %s", "world");
   format-multiple: %("hello %s %d", "earth", 2);
-  format-url-encode: %('red is %A', #ff0000);
+  format-url-encode: %("red is %A", #ff0000);
+  format-single-quoted: %('hello %s', "single world");
+  format-escaped-string: %(~"hello %s", "escaped world");
   eformat: e(%("rgb(%d, %d, %d)", @r, 128, 64));
+  
+  unitless: unit(12px);
+  unit: unit((13px + 1px), em);
+  unitpercentage: unit(100, %);
+  
+  get-unit: get-unit(10px);
+  get-unit-empty: get-unit(10);
 
   hue: hue(hsl(98, 12%, 95%));
   saturation: saturation(hsl(98, 12%, 95%));
   lightness: lightness(hsl(98, 12%, 95%));
-  rounded: round(@r/3);
-  roundedpx: round(10px / 3);
-  percentage: percentage(10px / 50);
+  hsvhue: hsvhue(hsv(98, 12%, 95%));
+  hsvsaturation: hsvsaturation(hsv(98, 12%, 95%));
+  hsvvalue: hsvvalue(hsv(98, 12%, 95%));
+  red: red(#f00);
+  green: green(#0f0);
+  blue: blue(#00f);
+  rounded: round((@r/3));
+  rounded-two: round((@r/3), 2);
+  roundedpx: round((10px / 3));
+  roundedpx-three: round((10px / 3), 3);
+  rounded-percentage: round(10.2%);
+  ceil: ceil(10.1px);
+  floor: floor(12.9px);
+  sqrt: sqrt(25px);
+  pi: pi();
+  mod: mod(13m, 11cm); // could take into account units, doesn't at the moment
+  abs: abs(-4%);
+  tan: tan(42deg);
+  sin: sin(10deg);
+  cos: cos(12);
+  atan: atan(tan(0.1rad));
+  atan: convert(acos(cos(34deg)), deg);
+  atan: convert(acos(cos(50grad)), deg);
+  pow: pow(8px, 2);
+  pow: pow(4, 3);
+  pow: pow(3, 3em);
+  min: min(0);
+  min: min(6, 5);
+  min: min(1pt, 3pt);
+  min: min(1cm, 3mm);
+  max: max(1, 3);
+  max: max(3em, 1em, 2em, 5em);
+  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%);
+  
+  hsv: hsv(5, 50%, 30%);
+  hsva: hsva(3, 50%, 30%, 0.2);
+
+  mix: mix(#ff0000, #ffff00, 80);
+  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);
-    color: iscolor(red);
-    color: iscolor(rgb(0, 0, 0));
+    color1: iscolor(red);
+    color2: iscolor(rgb(0, 0, 0));
+    color3: iscolor(transparent);
     keyword: iskeyword(hello);
     number: isnumber(32);
     string: isstring("hello");
     pixel: ispixel(32px);
     percent: ispercentage(32%);
     em: isem(32em);
+    cat: isunit(32cat, cat);
   }
 }
 
 #alpha {
   alpha: darken(hsla(25, 50%, 50%, 0.6), 10%);
+  alpha2: alpha(rgba(3, 4, 5, 0.5));
+  alpha3: alpha(transparent);
+}
+
+#blendmodes {
+  multiply: multiply(#f60000, #f60000);
+  screen: screen(#f60000, #0000f6);
+  overlay: overlay(#f60000, #0000f6);
+  softlight: softlight(#f60000, #ffffff);
+  hardlight: hardlight(#f60000, #0000f6);
+  difference: difference(#f60000, #0000f6);
+  exclusion: exclusion(#f60000, #0000f6);
+  average: average(#f60000, #0000f6);
+  negation: negation(#f60000, #313131);
+}
+
+#extract-and-length {
+  @anon: A B C 1 2 3;
+  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/ie-filters.less

@@ -5,4 +5,11 @@
   filter: progid:DXImageTransform.Microsoft.Alpha(opacity = 20);
   filter: progid:DXImageTransform.Microsoft.Alpha(opacity=@fat);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#333333", endColorstr=@cloudhead, GradientType=@fat);
+}
+.evalTest(@arg) {
+  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=@arg);
+}
+.evalTest1 {
+  .evalTest(30);
+  .evalTest(5);
 }

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

@@ -0,0 +1 @@
+@import "../import-once-test-c";

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

@@ -0,0 +1,17 @@
+@import "../css/background.css";
+@import "import-test-d.css";
+
+@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-charset-test.less

@@ -0,0 +1 @@
+@charset "ISO-8859-1";

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

@@ -0,0 +1 @@
+@import "import-@{in}@{terpolation}2.less";

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

@@ -0,0 +1,5 @@
+.a {
+  var: test;
+}
+
+@in: "redefined-does-nothing";

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

@@ -0,0 +1,6 @@
+
+@c: red;
+
+#import {
+  color: @c;
+}

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

@@ -0,0 +1,51 @@
+.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 */
+}
+@max-size: 450px;
+.mixin-with-mediaq(@num) {
+  color: green;
+  test: @num;
+  @media (max-size: @max-size) {
+    color: red;
+  }
+}

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

@@ -1,2 +1,3 @@
 @import "import-test-b.less";
 @a: 20%;
+@import "urls.less";

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

@@ -1,5 +1,4 @@
 
-@import "import-test-d.css";
 @c: red;
 
 #import {

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/imports/font.less

@@ -0,0 +1,8 @@
+@font-face {
+	font-family: xecret;
+	src: url('../assets/xecret.ttf');
+}
+
+#secret {
+	font-family: xecret, sans-serif;
+}

data/lib/less/js/test/less/import/imports/logo.less

@@ -0,0 +1,5 @@
+#logo {
+  width: 100px;
+  height: 100px;
+  background: url('../assets/logo.png');
+}

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/import/urls.less

@@ -0,0 +1 @@
+// empty file showing that it loads from the relative path first

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-interpolation.less

@@ -0,0 +1,8 @@
+@my_theme: "test";
+
+@import "import/import-@{my_theme}-e.less";
+
+@import "import/import-@{in}@{terpolation}.less";
+
+@in: "in";
+@terpolation: "terpolation";

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

@@ -0,0 +1,6 @@
+@import "import/import-once-test-c";
+@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";