less 2.3.0 → 2.3.1

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

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

@@ -0,0 +1,25 @@
+@charset "ISO-8859-1";
+
+.mixin_import1() {
+    @media all {
+        .tst {
+            color: black;
+            @media screen {
+                color: red;
+                .tst3 {
+                    color: white;
+                }
+            }
+        }
+    }
+}
+
+.mixin_import2() {
+    .tst2 {
+        color: white;
+    }
+}
+
+.tst3 {
+    color: grey;
+}

package/test/less-bom/debug/linenumbers.less

@@ -0,0 +1,33 @@
+@charset "UTF-8";
+
+@import "import/test.less";
+
+.start() {
+  .test2 {
+      color: red;
+  }
+}
+
+.mix() {
+    color: black;
+}
+
+.test1 {
+  .mix();
+}
+
+.start();
+
+.mixin_import1();
+
+.mixin_import2();
+
+@debug: 1;
+& when (@debug = 1) {
+  .test {
+    color: red;
+    & when (@debug = 1) {
+      width: 2;
+    }
+  }
+}

package/test/less-bom/detached-rulesets.less

@@ -0,0 +1,103 @@
+@ruleset: {
+     color: black;
+     background: white;
+  };
+
+@a: 1px;
+.wrap-mixin(@ruleset) {
+  @a: hidden and if you see this in the output its a bug;
+  @b: visible;
+  @d: magic-frame; // same behaviour as mixin calls - falls back to this frame
+  .wrap-selector {
+      @c: visible;
+      @ruleset();
+      visible-one: @b;
+      visible-two: @c;
+    }
+};
+
+.wrap-mixin({
+  color: black;
+  one: @a;
+  @b: hidden and if you see this in the output its a bug;
+  @c: hidden and if you see this in the output its a bug;
+  four: @d;
+});
+
+.wrap-mixin(@ruleset: {
+  color: red;
+});
+
+.wrap-mixin(@ruleset);
+
+.desktop-and-old-ie(@rules) {
+  @media screen and (min-width: 1200) { @rules(); }
+  html.lt-ie9 &                       { @rules(); }
+}
+
+header {
+  background: blue;
+
+  .desktop-and-old-ie({
+    background: red;
+  });
+}
+
+.wrap-mixin-calls-wrap(@ruleset) {
+  .wrap-mixin(@ruleset);
+};
+
+.wrap-mixin({
+  test: extra-wrap;
+  .wrap-mixin-calls-wrap({
+    test: wrapped-twice;
+  });
+});
+
+.wrap-mixin({
+  test-func: unit(90px);
+  test-arithmetic: unit((9+9), px);
+});
+// without mixins
+@ruleset-2: {
+  b: 1;
+};
+.without-mixins {
+  @ruleset-2();
+}
+@my-ruleset: {
+    .my-selector {
+      @media tv {
+        background-color: black;
+      }
+    }
+  };
+@media (orientation:portrait) {
+    @my-ruleset();
+    .wrap-media-mixin({
+      @media tv {
+        .triple-wrapped-mq {
+          triple: true;
+        }
+      }
+    });
+}
+.wrap-media-mixin(@ruleset) {
+  @media widescreen {
+    @media print {
+      @ruleset();
+    }
+    @ruleset();
+  }
+  @ruleset();
+}
+// unlocking mixins
+@my-mixins: {
+  .mixin() {
+    test: test;
+  }
+};
+@my-mixins();
+.a {
+  .mixin();
+}

package/test/less-bom/empty.less

@@ -0,0 +1 @@
+