less 2.4.0 → 2.5.3

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,112 @@
+@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();
+}
+// as mixin argument default
+.mixin-definition(@a: {}; @b: {default: works;};) {
+  @a();
+  @b();
+}
+.argument-default {
+  .mixin-definition();
+  .mixin-definition({direct: works;}; @b: {named: works;});
+}

package/test/less-bom/directives-bubling.less

@@ -0,0 +1,142 @@
+//simple case: @document
+.parent {
+  color:green;
+  
+  @document url-prefix() {
+    .child {
+      color:red;
+    }
+  }   
+}
+
+//selectors joinings test
+.top {
+  @supports (sandwitch: butter) {
+    .inside & {
+      property: value;
+    }
+  }
+}
+
+@supports (sandwitch: bread) {
+  .in1 {
+    .in2 {
+      property: value;
+    }
+  }
+}
+
+.top {
+  .inside & {
+    @supports (sandwitch: ham) {
+      property: value;
+    }
+  }
+}
+
+//combined with @font-face which has different kind of body
+@supports (font-family: weirdFont) {
+  @font-face {
+    font-family: something;
+    src: made-up-url;
+  }
+}
+
+@font-face {
+  @supports not (-webkit-font-smoothing: subpixel-antialiased) {
+    font-family: something;
+    src: made-up-url;
+  }
+}
+
+//bubling through media
+@supports (property: value) {
+  .outOfMedia & {
+    @media (max-size: 2px) {
+      @supports (whatever: something) {
+        property: value;
+      } 
+    }
+  }
+}
+
+.onTop & {
+  @supports (property: value) {
+    @media (max-size: 2px) {
+      @supports (whatever: something) {
+        property: value;
+      } 
+    }
+  }
+}
+
+
+//long combination of supports and media
+@media print {
+  html {
+    in-html: visible;
+    @supports (upper: test) {
+      in-supports: first;
+      div {
+        in-div: visible;
+        @supports not (-webkit-font-smoothing: subpixel-antialiased) {
+          in-supports: second;
+          @media screen {
+            font-weight: 400;
+            nested {
+              property: value;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+//another long combination of supports and media
+@media print {
+  @media (max-size: 2px) {
+    .in1 {
+      stay: here;
+      @supports not (-webkit-font-smoothing: subpixel-antialiased) {
+        .in2 & {
+          @supports (whatever: something) {
+            property: value;
+          } 
+        }
+      }
+    }
+  }
+}
+
+//called from mixin 
+.nestedSupportsMixin() {
+  font-weight: 300;
+  -webkit-font-smoothing: subpixel-antialiased;
+  @supports not (-webkit-font-smoothing: subpixel-antialiased) {
+    font-weight: 400;
+    nested {
+      property: value;
+    }
+  }
+}
+
+html {
+    .nestedSupportsMixin;
+}
+
+// selectors should not propagate into all directive types
+.onTop {
+  @font-face {
+    font-family: something;
+    src: made-up-url;
+  }
+
+  @keyframes "textscale" {
+      0% { font-size : 1em; }
+    100% { font-size : 2em; }
+  }
+
+  animation   : "textscale";
+  font-family : something;
+}

package/test/less-bom/empty.less

@@ -0,0 +1 @@
+

package/test/less-bom/errors/add-mixed-units.less

@@ -0,0 +1,3 @@
+.a {
+  error: (1px + 3em);
+}

package/test/less-bom/errors/add-mixed-units.txt

@@ -0,0 +1,4 @@
+SyntaxError: Incompatible units. Change the units or use the unit function. Bad units: 'px' and 'em'. in {path}add-mixed-units.less on line 2, column 3:
+1 .a {
+2   error: (1px + 3em);
+3 }

package/test/less-bom/errors/add-mixed-units2.less

@@ -0,0 +1,3 @@
+.a {
+  error: ((1px * 2px) + (3em * 3px));
+}