less 2.1.1 → 2.3.1

package/test/less/urls.less

@@ -1,3 +1,5 @@
+@import "nested-gradient-with-svg-gradient/mixin-consumer.less";
+
 @font-face {
   src: url("/fonts/garamond-pro.ttf");
   src: local(Futura-Medium),
@@ -43,6 +45,9 @@
 
 #data-uri {
   uri: data-uri('image/jpeg;base64', '../data/image.jpg');
+  @var: replace('../data/replace.jpg', "replace", "image");
+  background-image: data-uri(@var), data-uri(replace('../data/image.filext', "filext", "jpg"));
+  
   uri-fragment: data-uri('image/jpeg;base64', '../data/image.jpg#fragment');
 }
 
@@ -55,8 +60,12 @@
   uri-2: data-uri('../data/page.html');
 }
 
-#data-uri-toobig {
+#file-functions {
   uri: data-uri('../data/data-uri-fail.png');
+  svg-not-base-64: data-uri('../data/image.svg');
+  size: image-size('../data/data-uri-fail.png');
+  width: image-width('../data/data-uri-fail.png');
+  height: image-height('../data/data-uri-fail.png');
 }
 .add_an_import(@file_to_import) {
 @import "@{file_to_import}";

package/test/less/variables.less

@@ -51,9 +51,23 @@
 }
 
 .variable-names {
-    @var: 'hello';
-    @name: 'var';
-    name: @@name;
+    .quoted {
+        @var: 'hello';
+        @name: 'var';
+        name: @@name;
+    }
+
+    .unquoted {
+        @var: 'hello';
+        @name: var;
+        name: @@name;
+    }
+    
+    .color-keyword {
+        @red: 'hello';
+        @name: red;
+        name: @@name;
+    }
 }
 
 .alpha {

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;
+}

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

@@ -0,0 +1,154 @@
+.comma-delimited {
+  text-shadow: -1px -1px 1px red, 6px 5px 5px yellow;
+  -moz-box-shadow: 0pt 0pt 2px rgba(255, 255, 255, 0.4) inset,
+    0pt 4px 6px rgba(255, 255, 255, 0.4) inset;
+  -webkit-transform: rotate(-0.0000000001deg);
+}
+@font-face {
+  font-family: Headline;
+  unicode-range: U+??????, U+0???, U+0-7F, U+A5;
+}
+.other {
+  -moz-transform: translate(0, 11em) rotate(-90deg);
+  transform: rotateX(45deg);
+}
+.item[data-cra_zy-attr1b-ut3=bold] {
+  font-weight: bold;
+}
+p:not([class*="lead"]) {
+  color: black;
+}
+
+input[type="text"].class#id[attr=32]:not(1) {
+  color: white;
+}
+
+div#id.class[a=1][b=2].class:not(1) {
+  color: white;
+}
+
+ul.comma > li:not(:only-child)::after {
+  color: white;
+}
+
+ol.comma > li:nth-last-child(2)::after {
+  color: white;
+}
+
+li:nth-child(4n+1),
+li:nth-child(-5n),
+li:nth-child(-n+2) {
+  color: white;
+}
+
+a[href^="http://"] {
+  color: black;
+}
+
+a[href$="http://"] {
+  color: black;
+}
+
+form[data-disabled] {
+  color: black;
+}
+
+p::before {
+  color: black;
+}
+
+#issue322 {
+  -webkit-animation: anim2 7s infinite ease-in-out;
+}
+
+@-webkit-keyframes frames {
+  0% { border: 1px }
+  5.5% { border: 2px }
+  100% { border: 3px }
+}
+
+@keyframes fontbulger1 {
+  to {
+    font-size: 15px;
+  }
+  from,to {
+    font-size: 12px;
+  }
+  0%,100% {
+    font-size: 12px;
+  }
+}
+
+.units {
+  font: 1.2rem/2rem;
+  font: 8vw/9vw;
+  font: 10vh/12vh;
+  font: 12vm/15vm;
+  font: 12vmin/15vmin;
+  font: 1.2ch/1.5ch;
+}
+
+@supports ( box-shadow: 2px 2px 2px black ) or
+          ( -moz-box-shadow: 2px 2px 2px black ) {
+  .outline {
+    box-shadow: 2px 2px 2px black;
+    -moz-box-shadow: 2px 2px 2px black;
+  }
+}
+
+@-x-document url-prefix(""github.com"") {
+  h1 {
+    color: red;
+  }
+}
+
+@viewport {
+  font-size: 10px;
+}
+@namespace foo url(http://www.example.com);
+
+foo|h1 { color: blue; }
+foo|* { color: yellow; }
+|h1 { color: red; }
+*|h1 { color: green; }
+h1 { color: green; }
+.upper-test {
+  UpperCaseProperties: allowed;
+}
+@host {
+  div {
+    display: block;
+  }
+}
+::distributed(input::placeholder) {
+  color: #b3b3b3;
+}
+.shadow ^ .dom,
+body ^^ .shadow {
+  display: done;
+}
+
+:host(.sel .a),
+:host-context(.sel .b),
+.sel /deep/ .b,
+::content .sel {
+  type: shadow-dom;
+}
+/deep/ b {
+ c: 'd';
+ &[e]{
+   f: 'g';
+ }
+}
+
+#issue2066 {
+  background: url('/images/icon-team.svg') 0 0 / contain;
+}
+@counter-style triangle {
+  system: cyclic;
+  symbols: ‣;
+  suffix: " ";
+}
+@-ms-viewport{
+//width: auto !important;
+}

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

@@ -0,0 +1,33 @@
+@ugly: fuchsia;
+
+.escape\|random\|char {
+    color: red;
+}
+
+.mixin\!tUp {
+    font-weight: bold;
+}
+
+// class="404"
+.\34 04 {
+    background: red;
+
+    strong {
+        color: @ugly;
+        .mixin\!tUp;
+    }
+}
+
+.trailingTest\+ {
+    color: red;
+}
+
+/* This hideous test of hideousness checks for the selector "blockquote" with various permutations of hex escapes */
+\62\6c\6f \63 \6B \0071 \000075o\74 e {
+    color: silver;
+}
+
+[ng\:cloak],
+ng\:form {
+  display: none;
+}

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

@@ -0,0 +1,103 @@
+
+.light when (lightness(@a) > 50%) {
+  color: green;
+}
+.dark when (lightness(@a) < 50%) {
+  color: orange;
+}
+@a: #ddd;
+
+.see-the {
+  @a: #444; // this mirrors what mixins do - they evaluate the guards at the point of definition
+  .light();
+  .dark();
+}
+
+.hide-the {
+  .light();
+  .dark();
+}
+
+.multiple-conditions-1 when (@b = 1), (@c = 2), (@d = 3) {
+  color: red;
+}
+
+.multiple-conditions-2 when (@b = 1), (@c = 2), (@d = 2) {
+  color: blue;
+}
+
+@b: 2;
+@c: 3;
+@d: 3;
+
+.inheritance when (@b = 2) {
+  .test {
+    color: black;
+  }
+  &:hover {
+    color: pink;
+  }
+  .hideme when (@b = 1) {
+    color: green;
+  }
+  & when (@b = 1) {
+    hideme: green;
+  }
+}
+
+.hideme when (@b = 1) {
+  .test {
+    color: black;
+  }
+  &:hover {
+    color: pink;
+  }
+  .hideme when (@b = 1) {
+    color: green;
+  }
+}
+
+& when (@b = 1) {
+  .hideme {
+    color: red;
+  }
+}
+
+.mixin-with-guard-inside(@colWidth) {
+  // selector with guard (applies also to & when() ...)
+  .clsWithGuard when (@colWidth <= 0) {
+    dispaly: none;
+  }
+}
+
+.mixin-with-guard-inside(0px);
+
+.dont-split-me-up {
+  width: 1px;
+  & when (@c = 3) {
+    color: red;
+  }
+  & when (@c = 3) {
+    height: 1px;
+  }
+  + & when (@c = 3) { // creates invalid css but tests that we don't fold it in
+    sibling: true;
+  }
+}
+
+.scope-check when (@c = 3) {
+  @k: 1px;
+  & when (@c = 3) {
+    @k: 2px;
+    sub-prop: @k;
+  }
+  prop: @k;
+}
+.scope-check-2 {
+  .scope-check();
+  @k:4px;
+}
+.errors-if-called when (@c = never) {
+  .mixin-doesnt-exist();
+}
+a:hover when (2 = true) {5:-}

package/test/less-bom/css.less

@@ -0,0 +1,108 @@
+@charset "utf-8";
+div { color: black; }
+div { width: 99%; }
+
+* {
+  min-width: 45em;
+}
+
+h1, h2 > a > p, h3 {
+  color: none;
+}
+
+div.class {
+  color: blue;
+}
+
+div#id {
+  color: green;
+}
+
+.class#id {
+  color: purple;
+}
+
+.one.two.three {
+  color: grey;
+}
+
+@media print {
+  * {
+    font-size: 3em;
+  }
+}
+
+@media screen {
+  * {
+    font-size: 10px;
+  }
+}
+
+@font-face {
+  font-family: 'Garamond Pro';
+}
+
+a:hover, a:link {
+  color: #999;
+}
+
+p, p:first-child {
+  text-transform: none;
+}
+
+q:lang(no) {
+  quotes: none;
+}
+
+p + h1 {
+  font-size: +2.2em;
+}
+
+#shorthands {
+  border: 1px solid #000;
+  font: 12px/16px Arial;
+  font: 100%/16px Arial;
+  margin: 1px 0;
+  padding: 0 auto;
+}
+
+#more-shorthands {
+  margin: 0;
+  padding: 1px 0 2px 0;
+  font: normal small/20px 'Trebuchet MS', Verdana, sans-serif;
+  font: 0/0 a;
+  border-radius: 5px / 10px;
+}
+
+.misc {
+  -moz-border-radius: 2px;
+  display: -moz-inline-stack;
+  width: .1em;
+  background-color: #009998;
+  background: -webkit-gradient(linear, left top, left bottom, from(red), to(blue));
+  margin: ;
+  .nested-multiple {
+    multiple-semi-colons: yes;;;;;;
+  };
+  filter: alpha(opacity=100);
+  width: auto\9;
+}
+
+#important {
+  color: red !important;
+  width: 100%!important;
+  height: 20px ! important;
+}
+
+.def-font(@name) {
+    @font-face {
+        font-family: @name
+    }
+}
+
+.def-font(font-a);
+.def-font(font-b);
+
+.æøå {
+  margin: 0;
+}