less 2.4.0 → 2.5.3

package/test/less/functions.less

@@ -13,9 +13,13 @@
   @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);
@@ -60,12 +64,16 @@
   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);
@@ -124,9 +132,13 @@
   shade-percent: shade(#777777, 13%);
   shade-negative: shade(#777777, -13%);
 
-  fade-out: fadeOut(red, 5%); // support fadeOut and fadeout
+  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);
 
@@ -212,3 +224,9 @@
   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/import/css-import.less

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

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

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

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

@@ -37,7 +37,7 @@
 
 .zz {
   .y {
-    pulled-in: yes;
+    pulled-in: yes /* inline comment survives */;
   }
   /* comment pulled in */
 }
@@ -86,4 +86,13 @@
   }
   @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/import/import-test-a.less

@@ -1,4 +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/import-reference.less

@@ -2,6 +2,7 @@
 @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();
@@ -20,4 +21,6 @@
 .class:extend(.class all) {
 }
 .mixin-with-nested-selectors();
-.mixin-with-directives(some-name);
+.mixin-with-directives(some-name);
+
+.print-referenced-import-inline();

package/test/less/import.less

@@ -1,3 +1,4 @@
+/** 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);

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

@@ -3,4 +3,6 @@
 data-uri {
   property: data-uri('image.svg');
 }
-
+image-size {
+  property: image-size('image.svg');
+}

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

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

package/test/less/legacy/legacy.less

@@ -4,4 +4,18 @@
     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;
 }

package/test/less/mixins-args.less

@@ -212,4 +212,52 @@ body {
 
 div {
   .test-calling-one-arg-mixin(1);
+}
+
+mixins-args-expand-op- {
+  @x: 1, 2, 3;
+  @y: 4  5  6;
+
+  &1 {.m3(@x...)}
+  &2 {.m3(@y...)}
+  &3 {.wr(a, b, c)}
+  &4 {.wr(a; b; c, d)}
+  &5 {.wr(@x...)}
+  &6 {.m4(0; @x...)}
+  &7 {.m4(@x..., @a: 0)}
+  &8 {.m4(@b: 1.5; @x...)}
+  &9 {.aa(@y, @x..., and again, @y...)}
+
+  .m3(@a, @b, @c) {
+    m3: @a, @b, @c;
+  }
+
+  .m4(@a, @b, @c, @d) {
+    m4: @a, @b, @c, @d;
+  }
+
+  .wr(@a...) {
+    &a {.m3(@a...)}
+    &b {.m4(0, @a...)}
+    &c {.m4(@a..., 4)}
+  }
+
+  .aa(@a...) {
+    aa: @a;
+    a4: extract(@a, 5);
+    a8: extract(@a, 8);
+  }
+}
+#test-mixin-matching-when-default-2645 {
+  .mixin(@height) {
+    height: @height;
+  }
+
+  .mixin(@width, @height: 10px) {
+    width: @width;
+
+    .mixin(@height: @height);
+  }
+
+  .mixin(@height: 20px);
 }

package/test/less/mixins-guards.less

@@ -269,3 +269,12 @@
 #guarded-deeper {
   #top > #deeper > .mixin(1);
 }
+
+// namespaced & guarded mixin in root
+// outputs nothing but should pass:
+
+@guarded-mixin-for-root: true;
+#ns {
+    .guarded-mixin-for-root() when (@guarded-mixin-for-root) {}
+}
+#ns > .guarded-mixin-for-root();

package/test/less/no-output.less

@@ -1,2 +1,2 @@
-.mixin() {
+.mixin() {
 }

package/test/less/plugin/plugin-global.js

@@ -0,0 +1,9 @@
+
+functions.addMultiple({
+    "test-shadow" : function() {
+        return new tree.Anonymous( "global" );
+    },
+    "test-global" : function() {
+        return new tree.Anonymous( "global" );
+    }
+});

package/test/less/plugin/plugin-local.js

@@ -0,0 +1,8 @@
+functions.addMultiple({
+    "test-shadow" : function() {
+        return new tree.Anonymous( "local" );
+    },
+    "test-local" : function() {
+        return new tree.Anonymous( "local" );
+    }
+});

package/test/less/plugin/plugin-transitive.js

@@ -0,0 +1,5 @@
+functions.addMultiple({
+    "test-transitive" : function() {
+        return new tree.Anonymous( "transitive" );
+    }
+});

package/test/less/plugin/plugin-transitive.less

@@ -0,0 +1,5 @@
+@plugin "plugin-transitive";
+
+.other {
+  trans : test-transitive();
+}

package/test/less/plugin.less

@@ -0,0 +1,85 @@
+// importing plugin globally
+@plugin "./plugin/plugin-global";
+
+// transitively include plugins from importing another sheet
+@import "./plugin/plugin-transitive";
+
+
+// `test-global` function should be reachable
+// `test-local`  function should not be reachable
+// `test-shadow` function should return global version
+.class {
+  trans  : test-transitive();
+  global : test-global();
+  local  : test-local();
+  shadow : test-shadow();
+
+  // `test-global` function should propagate and be reachable
+  // `test-local`  function should be reachable
+  // `test-shadow` function should return local version, shadowing global version
+  .local {
+    @plugin "./plugin/plugin-local";
+    global : test-global();
+    local  : test-local();
+    shadow : test-shadow();
+  }
+}
+
+// calling a mixin or detached ruleset should not bubble local plugins
+// imported inside either into the parent scope.
+.mixin() {
+  @plugin "./plugin/plugin-local";
+  mixin-local  : test-local();
+  mixin-global : test-global();
+  mixin-shadow : test-shadow();
+}
+@ruleset : {
+  @plugin "./plugin/plugin-local";
+  ruleset-local  : test-local();
+  ruleset-global : test-global();
+  ruleset-shadow : test-shadow();
+};
+#ns {
+  @plugin "./plugin/plugin-local";
+  .mixin() {
+    ns-mixin-global : test-global();
+    ns-mixin-local  : test-local();
+    ns-mixin-shadow : test-shadow();
+  }
+}
+.class {
+  #ns > .mixin();
+  .mixin();
+  @ruleset();
+  class-local : test-local();
+}
+
+
+// `test-global` function should propagate into directive scope
+@media screen {
+  .test {
+    result : test-global();
+  }
+}
+@font-face {
+  result : test-global();
+}
+
+// `test-global` function should propagate into nested directive scopes
+@media screen and (min-width:100px) {
+  @media (max-width:400px) {
+		.test {
+			result : test-global();
+		}
+	}
+}
+
+.test {
+  @media screen {
+    @plugin "./plugin/plugin-local";
+    result : test-local();
+  }
+}
+
+
+

package/test/less/postProcessorPlugin/postProcessor.less

@@ -0,0 +1,4 @@
+@color: white;
+.test {
+    color: @color;
+}

package/test/less/preProcessorPlugin/preProcessor.less

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

package/test/less/sourcemaps/imported.css

@@ -1,7 +1,7 @@
-/*comments*/
-.unused-css {
-    color: white;
-}
-.imported {
-    color: black;
+/*comments*/
+.unused-css {
+    color: white;
+}
+.imported {
+    color: black;
 }

package/test/less/visitorPlugin/visitor.less

@@ -0,0 +1,4 @@
+.test {
+    color: red;
+    -some-aribitrary-property: value;
+}

package/test/less-bom/charsets.less

@@ -0,0 +1,3 @@
+@charset "UTF-8";
+
+@import "import/import-charset-test";

package/test/less-bom/colors.less

@@ -0,0 +1,98 @@
+#yelow {
+  #short {
+    color: #fea;
+  }
+  #long {
+    color: #ffeeaa;
+  }
+  #rgba {
+    color: rgba(255, 238, 170, 0.1);
+  }
+  #argb {
+    color: argb(rgba(255, 238, 170, 0.1));
+  }
+}
+
+#blue {
+  #short {
+    color: #00f;
+  }
+  #long {
+    color: #0000ff;
+  }
+  #rgba {
+    color: rgba(0, 0, 255, 0.1);
+  }
+  #argb {
+    color: argb(rgba(0, 0, 255, 0.1));
+  }
+}
+
+#alpha #hsla {
+    color: hsla(11, 20%, 20%, 0.6);
+}
+
+#overflow {
+  .a { color: (#111111 - #444444); } // #000000
+  .b { color: (#eee + #fff); } // #ffffff
+  .c { color: (#aaa * 3); } // #ffffff
+  .d { color: (#00ee00 + #009900); } // #00ff00
+  .e { color: rgba(-99.9, 31.4159, 321, 0.42); }
+}
+
+#grey {
+  color: rgb(200, 200, 200);
+}
+
+#333333 {
+  color: rgb(20%, 20%, 20%);
+}
+
+#808080 {
+  color: hsl(50, 0%, 50%);
+}
+
+#00ff00 {
+  color: hsl(120, 100%, 50%);
+}
+
+.lightenblue {
+    color: lighten(blue, 10%);
+}
+
+.darkenblue {
+    color: darken(blue, 10%);
+}
+
+.unknowncolors {
+    color: blue2;
+    border: 2px solid superred;
+}
+
+.transparent {
+    color: transparent;
+    background-color: rgba(0, 0, 0, 0);
+}
+#alpha {
+    @colorvar: rgba(150, 200, 150, 0.7);
+    #fromvar {
+        opacity: alpha(@colorvar);
+    }
+    #short {
+        opacity: alpha(#aaa);
+    }
+    #long {
+        opacity: alpha(#bababa);
+    }
+    #rgba {
+        opacity: alpha(rgba(50, 120, 95, 0.2));
+    }
+    #hsl {
+        opacity: alpha(hsl(120, 100%, 50%));
+    }
+}
+
+#percentage {
+  color: red(rgb(100%, 0, 0));
+  border-color: rgba(100%, 0, 0, 50%);
+}

package/test/less-bom/comments.less

@@ -0,0 +1,102 @@
+/******************\
+*                  *
+*  Comment Header  *
+*                  *
+\******************/
+
+/*
+
+    Comment
+
+*/
+
+/*
+ * Comment Test
+ *
+ * - cloudhead (http://cloudhead.net)
+ *
+ */
+
+////////////////
+@var: "content";
+////////////////
+
+/* Colors
+ * ------
+ *   #EDF8FC (background blue)
+ *   #166C89 (darkest blue)
+ *
+ * Text:
+ *   #333 (standard text) // A comment within a comment!
+ *   #1F9EC9 (standard link)
+ *
+ */
+
+/* @group Variables
+------------------- */
+#comments /* boo *//* boo again*/,
+//.commented_out1
+//.commented_out2
+//.commented_out3
+.comments //end of comments1
+//end of comments2
+{
+  /**/ // An empty comment
+  color: red; /* A C-style comment */  /* A C-style comment */
+  background-color: orange; // A little comment
+  font-size: 12px;
+
+  /* lost comment */ content: @var;
+
+  border: 1px solid black;
+
+  // padding & margin //
+  padding: 0; // }{ '"
+  margin: 2em;
+} //
+
+/* commented out
+  #more-comments {
+    color: grey;
+  }
+*/
+
+.selector /* .with */, .lots, /* of */ .comments {
+  color/* survive */ /* me too */: grey, /* blue */ orange;
+  -webkit-border-radius: 2px /* webkit only */;
+  -moz-border-radius: (2px * 4) /* moz only with operation */;
+}
+
+.mixin_def_with_colors(@a: white, // in
+       @b: 1px //put in @b - causes problems! --->
+       ) // the
+       when (@a = white) {
+    .test {
+        color: @b;
+    }
+}
+.mixin_def_with_colors();
+
+// .s when
+//R/2
+
+.sr-only-focusable {
+  clip: auto;
+}
+
+@-webkit-keyframes /* Safari */ hover /* and Chrome */ {
+  0% {
+    color: red;
+  }
+}
+
+#last { color: blue }
+//
+
+/*  *//* { *//*  *//*  *//*  */#div { color:#A33; }/* } */
+
+// line immediatly followed
+/*by block */
+@string_w_comment: ~"/* // Not commented out // */";
+#output-block { comment: @string_w_comment; }
+/*comment on last line*/

package/test/less-bom/comments2.less

@@ -0,0 +1,20 @@
+@media all and/*! */(max-width:1024px) {}
+@-webkit-keyframes hover /* Safari and Chrome */{  }
+.bg {
+  background-image: linear-gradient(#333 /*{comment}*/, #111);
+}
+#planadvisor,
+/*comment*//*comment*/
+.first,/*comment*//*comment*/.planning {
+    margin:10px;
+    total-width: @total-width;
+}
+@base                       :   1;
+@column-width               :   @base * 6em;                //      Width of column             */
+@gutter-width               :   2em;                        //      Width of column spacing     */
+@columns                    :   12;                         //      Number of Columns           */
+@gridsystem-width           :   (@column-width *            //      For calculating the total   */
+                                    @columns) + (               //      width of the content area.  */
+                                    @gutter-width *             //      We strongly recommend you   */
+                                    @columns);                  //      do not change this formula. */
+@total-width                :   @gridsystem-width;          //      set to 100% for fluid grid  */

package/test/less-bom/compression/compression.less

@@ -0,0 +1,36 @@
+#colours {
+  color1: #fea;
+  color2: #ffeeaa;
+  color3: rgba(255, 238, 170, 0.1);
+  @color1: #fea;
+  string: "@{color1}";
+  /* comments are stripped */
+  // both types!
+  /*! but not this type
+      Note preserved whitespace
+  */
+}
+dimensions {
+  val: 0.1px;
+  val: 0em;
+  val: 4cm;
+  val: 0.2;
+  val: 5;
+  angles-must-have-unit: 0deg;
+  durations-must-have-unit: 0s;
+  length-doesnt-have-unit: 0px;
+  width: auto\9;
+}
+@page  {
+  marks: none;
+@top-left-corner {
+  vertical-align: top;
+}
+@top-left {
+  vertical-align: top;
+}
+}
+.shadow ^ .dom,
+body ^^ .shadow {
+  display: done;
+}