less 2.4.0 → 2.5.3

package/test/less-bom/functions.less

@@ -0,0 +1,232 @@
+#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 {
+  @r: 32;
+  escaped: e("-Some::weird(#thing, y)");
+  lighten: lighten(#ff0000, 40%);
+  lighten-relative: lighten(#ff0000, 40%, relative);
+  darken: darken(#ff0000, 40%);
+  darken-relative: darken(#ff0000, 40%, relative);
+  saturate: saturate(#29332f, 20%);
+  saturate-relative: saturate(#29332f, 20%, relative);
+  desaturate: desaturate(#203c31, 20%);
+  desaturate-relative: desaturate(#203c31, 20%, relative);
+  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");
+  replace-with-color: replace("007", "0", #135, g);
+  replace-with-number: replace("007", "0", 2em);
+  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-single-quoted: %('hello %s', "single world");
+  format-escaped-string: %(~"hello %s", "escaped world");
+  format-color-as-string: %("%s", #123);
+  format-number-as-string: %("%s", 4px);
+  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%));
+  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-quoted-digit: color("#dda0dd");
+  color-quoted-keyword: color("plum");
+  color-color: color(#dda0dd);
+  color-keyword: color(plum);
+  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%);
+  fade-out-relative: fadeout(red, 5%,relative); 
+  fade-in-relative: fadein(fadeout(red, 10%, relative), 5%, relative);
+  fade-out2:  fadeout(fadeout(red, 50%), 50%); 
+  fade-out2-relative: fadeout(fadeout(red, 50%, relative), 50%, relative);
+  
+  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 {
+    @rules: {
+      color: red;
+    };
+    ruleset: isruleset(@rules);
+    color: iscolor(#ddd);
+    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);
+    no-unit-is-empty: isunit(32, '');
+    case-insensitive-1: isunit(32CAT, cat);
+    case-insensitive-2: isunit(32px, PX);
+  }
+}
+
+#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);
+}
+
+#quoted-functions-in-mixin {
+  // Quoted type may have some weird side-effects when used in mixins (#2308)
+  .mixin();
+  .mixin() {
+    replace-double-quoted: replace('foo-1', "1", "2");
+    replace-single-quoted: replace('foo-3', "3", "4");
+    replace-escaped-string: replace(~"bar-1", "1", "2");
+    replace-keyword: replace(baz-1, "1", "2");
+    replace-anonymous: replace(e("qux-1"), "1", "2");
+    format-double-quoted: %("hello %s", "world");
+    format-single-quoted: %('hello %s', "single world");
+    format-escaped-string: %(~"hello %s", "escaped world");
+    format-keyword: %(hello);
+    format-anonymous: %(e("hello %s"), "anonymous world");
+  }
+}
+
+#list-details {
+  @list:
+    a 1, // Some comment
+    b 2;
+
+  length: length(@list);
+  one: extract(@list, 1);
+  @two: extract(@list, 2);
+  two: @two;
+  two-length: length(@two);
+  two-one: extract(@two, 1);
+  two-two: extract(@two, 2);
+}
+@color1: #FFF;/* comment1 */
+@color2: #FFF/* comment2 */;
+html {
+  color: mix(blue, @color1, 50%);
+  color: mix(blue, @color2, 50%);
+}

package/test/less-bom/globalVars/extended.json

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

package/test/less-bom/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

package/test/less-bom/globalVars/simple.json

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

package/test/less-bom/globalVars/simple.less

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

package/test/less-bom/ie-filters.less

@@ -0,0 +1,15 @@
+@fat: 0;
+@cloudhead: "#000000";
+
+.nav {
+  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);
+}

package/test/less-bom/import/css-import.less

@@ -0,0 +1 @@
+@import url("test.css");

package/test/less-bom/import/deeper/deeper-2/url-import-2.less

@@ -0,0 +1,3 @@
+.deep-import-url {
+  color: red;
+}

package/test/less-bom/import/deeper/deeper-2/url-import.less

@@ -0,0 +1 @@
+@import url("url-import-2.less");

package/test/less-bom/import/deeper/import-once-test-a.less

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

package/test/less-bom/import/deeper/url-import.less

@@ -0,0 +1 @@
+@import url("deeper-2/url-import.less");

package/test/less-bom/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;
+}

package/test/less-bom/import/import-charset-test.less

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

package/test/less-bom/import/import-inline-invalid-css.less

@@ -0,0 +1 @@
+@import (inline) "invalid-css.less";

package/test/less-bom/import/import-interpolation.less

@@ -0,0 +1,2 @@
+@import (inline) "imports/logo.less";
+@import "import-@{in}@{terpolation}2.less";

package/test/less-bom/import/import-interpolation2.less

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

package/test/less-bom/import/import-once-test-c.less

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

package/test/less-bom/import/import-reference.less

@@ -0,0 +1,98 @@
+.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 /* inline comment survives */;
+  }
+  /* comment pulled in */
+}
+@max-size: 450px;
+.mixin-with-mediaq(@num) {
+  color: green;
+  test: @num;
+  @media (max-size: @max-size) {
+    color: red;
+  }
+}
+//https://github.com/less/less.js/issues/2359
+@supports (something: else) {
+  .class {
+    something: else;
+  }
+  .nestedToo {
+    .class {
+      something: else;
+    }
+  }
+  .invisible {
+    something: else;
+  }
+}
+//https://github.com/less/less.js/issues/1979
+.mixin-with-nested-selectors() {
+  .test {
+    color: red;
+    &:first-child {
+      color: blue;
+    }
+  }
+}
+.mixin-with-directives(@keyframeName) {
+  @keyframes @keyframeName {
+    @rules1();
+  }
+  @supports (animation-name: test) {
+    @keyframes @keyframeName {
+      @rules2();
+    }
+    .selector {
+      color: red;
+    }
+  }
+  @rules1: {property: value;};
+  @rules2: {property: value;};
+}
+
+@import (inline, multiple) "invalid-css.less";
+@import "import-inline-invalid-css.less";
+.print-referenced-import-inline() {
+  div {
+    @import (inline, multiple) "invalid-css.less";
+  }
+  @import (inline, multiple) "invalid-css.less";
+}

package/test/less-bom/import/import-test-a.less

@@ -0,0 +1,5 @@
+@import "import-test-b.less";
+@import url(import-test-f.less);
+@import url("deeper/url-import.less");
+@a: 20%;
+@import "urls.less";

package/test/less-bom/import/import-test-b.less

@@ -0,0 +1,8 @@
+@import "import-test-c";
+
+@b: 100%;
+
+.mixin {
+  height: 10px;
+  color: @c;
+}

package/test/less-bom/import/import-test-c.less

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

package/test/less-bom/import/import-test-d.css

@@ -0,0 +1 @@
+#css { color: yellow; }

package/test/less-bom/import/import-test-e.less

@@ -0,0 +1,2 @@
+
+body { width: 100% }

package/test/less-bom/import/import-test-f.less

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

package/test/less-bom/import/imports/font.less

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

package/test/less-bom/import/imports/logo.less

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

package/test/less-bom/import/interpolation-vars.less

@@ -0,0 +1,6 @@
+@in: "in";
+@terpolation: "terpolation";
+
+// should be ignored because its already imported
+// and it uses a variable from the parent scope
+@import "import-@{my_theme}-e.less";

package/test/less-bom/import/invalid-css.less

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

package/test/less-bom/import/urls.less

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

package/test/less-bom/import-inline.less

@@ -0,0 +1,3 @@
+@import url("import/import-test-c.less");// import inline should not float above this #1954
+@import (inline) url("import/import-test-d.css") (min-width:600px);
+@import (inline, css) url("import/invalid-css.less");

package/test/less-bom/import-interpolation.less

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

package/test/less-bom/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";

package/test/less-bom/import-reference.less

@@ -0,0 +1,26 @@
+@import (reference) url("import-once.less");
+@import (reference) url("css-3.less");
+@import (reference) url("media.less");
+@import (reference) url("import/import-reference.less");
+@import (reference) url("import/css-import.less");
+
+.b {
+  .z();
+}
+
+.zz();
+
+.visible:extend(.z all) {
+  extend: test;
+}
+
+.test-mediaq-import {
+  .mixin-with-mediaq(340px);
+}
+
+.class:extend(.class all) {
+}
+.mixin-with-nested-selectors();
+.mixin-with-directives(some-name);
+
+.print-referenced-import-inline();

package/test/less-bom/import.less

@@ -0,0 +1,31 @@
+/** comment at the top**/
+@import url(http://fonts.googleapis.com/css?family=Open+Sans);
+
+@import url(/absolute/something.css) screen and (color) and (max-width: 600px);
+
+@import (optional) "file-does-not-exist.does-not-exist";
+
+@var: 100px;
+@import url("//ha.com/file.css") (min-width:@var);
+
+#import-test {
+  .mixin;
+  width: 10px;
+  height: (@a + 10%);
+}
+@import "import/import-test-e" screen and (max-width: 600px);
+
+@import url("import/import-test-a.less");
+
+@import (less, multiple) "import/import-test-d.css" screen and (max-width: 601px);
+
+@import (multiple) "import/import-test-e" screen and (max-width: 602px);
+
+@import (less, multiple) url("import/import-test-d.css") screen and (max-width: 603px);
+
+@media print {
+  @import (multiple) "import/import-test-e";
+}
+
+@charset "UTF-8"; // climb on top #2126
+

package/test/less-bom/include-path/include-path.less

@@ -0,0 +1,8 @@
+@import "import-test-e";
+
+data-uri {
+  property: data-uri('image.svg');
+}
+image-size {
+  property: image-size('image.svg');
+}

package/test/less-bom/include-path-string/include-path-string.less

@@ -0,0 +1,3 @@
+data-uri {
+  property: data-uri('image.svg');
+}

package/test/less-bom/javascript.less

@@ -0,0 +1,38 @@
+.eval {
+    js: `42`;
+    js: `1 + 1`;
+    js: `"hello world"`;
+    js: `[1, 2, 3]`;
+    title: `typeof process.title`;
+    ternary: `(1 + 1 == 2 ? true : false)`;
+    multiline: `(function(){var x = 1 + 1;
+           return x})()`;
+}
+.scope {
+    @foo: 42;
+    var: `parseInt(this.foo.toJS())`;
+    escaped: ~`2 + 5 + 'px'`;
+}
+.vars {
+    @var: `4 + 4`;
+    width: @var;
+}
+.escape-interpol {
+    @world: "world";
+    width: ~`"hello" + " " + @{world}`;
+}
+.arrays {
+    @ary:  1, 2, 3;
+    @ary2: 1  2  3;
+    ary: `@{ary}.join(', ')`;
+    ary1: `@{ary2}.join(', ')`;
+}
+.transitions(...) {
+  @arg: ~`"@{arguments}".replace(/[\[\]]*/g, '')`;
+  1: @arg;              // rounded to integers
+  2: ~`"@{arguments}"`; // rounded to integers
+  3: @arguments;        // OK
+}
+.test-tran {
+  .transitions(opacity 0.3s ease-in 0.3s, max-height 0.6s linear, margin-bottom 0.4s linear;);
+}

package/test/less-bom/lazy-eval.less

@@ -0,0 +1,6 @@
+@var: @a;
+@a: 100%;
+
+.lazy-eval {
+  width: @var;
+}

package/test/less-bom/legacy/legacy.less

@@ -0,0 +1,21 @@
+@media (-o-min-device-pixel-ratio: 2/1) {
+  .test-math-and-units {
+    font: ignores 0/0 rules;
+    test-division: 4 / 2 + 5em;
+    simple: 1px + 1px;
+  }
+}
+#units {
+  t1: (2em/1em) + 20;
+  t2: 20 + (2em/1em);
+  t3: 2em/1em;
+  t4: (2em/1px) + 20;
+  t5: 20 + (2em/1px);
+  t6: 2em/1px;
+  t7: (2em*1em) + 20;
+  t8: 20 + (2em*1em);
+  t9: 2em*1em;
+  t10: (2em*1px) + 20;
+  t11: 20 + (2em*1px);
+  t12: 2em*1px;
+}