less 2.3.0 → 2.3.1

package/test/less-bom/media.less

@@ -0,0 +1,234 @@
+
+// For now, variables can't be declared inside @media blocks.
+
+@var: 42;
+
+@media print {
+    .class {
+        color: blue;
+        .sub {
+            width: @var;
+        }
+    }
+    .top, header > h1 {
+        color: (#222 * 2);
+    }
+}
+
+@media screen {
+    @base: 8;
+    body { max-width: (@base * 60); }
+}
+
+@ratio_large: 16;
+@ratio_small: 9;
+
+@media all and (device-aspect-ratio: @ratio_large / @ratio_small) {
+   body { max-width: 800px; }
+}
+
+@media all and (orientation:portrait) {
+    aside { float: none; }
+}
+
+@media handheld and (min-width: @var), screen and (min-width: 20em) {
+    body {
+        max-width: 480px;
+    }
+}
+
+body {
+    @media print {
+        padding: 20px;
+
+        header {
+            background-color: red;
+        }
+
+        @media (orientation:landscape) {
+            margin-left: 20px;
+        }
+    }
+}
+
+@media screen {
+  .sidebar {
+    width: 300px;
+    @media (orientation: landscape) {
+      width: 500px;
+    }
+  }
+}
+
+@media a {
+  .first {
+    @media b {
+      .second {
+        .third {
+          width: 300px;
+          @media c {
+            width: 500px;
+          }
+        }
+        .fourth {
+          width: 3;
+        }
+      }
+    }
+  }
+}
+
+body {
+    @media a, b and c {
+        width: 95%;
+
+        @media x, y {
+            width: 100%;
+        }
+    }
+}
+
+.mediaMixin(@fallback: 200px) {
+    background: black;
+
+    @media handheld {
+        background: white;
+
+        @media (max-width: @fallback) {
+            background: red;
+        }
+    }
+}
+
+.a {
+  .mediaMixin(100px);
+}
+
+.b {
+  .mediaMixin();
+}
+@smartphone: ~"only screen and (max-width: 200px)";
+@media @smartphone {
+  body {
+    width: 480px;
+  }
+}
+
+@media print {
+  @page :left {
+    margin: 0.5cm;
+  }
+  @page :right {
+    margin: 0.5cm;
+  }
+  @page Test:first {
+    margin: 1cm;
+  }
+  @page :first {
+    size: 8.5in 11in;
+    @top-left {
+      margin: 1cm;
+    }
+    @top-left-corner {
+      margin: 1cm;
+    }
+    @top-center {
+      margin: 1cm;
+    }
+    @top-right {
+      margin: 1cm;
+    }
+    @top-right-corner {
+      margin: 1cm;
+    }
+    @bottom-left {
+      margin: 1cm;
+    }
+    @bottom-left-corner {
+      margin: 1cm;
+    }
+    @bottom-center {
+      margin: 1cm;
+    }
+    @bottom-right {
+      margin: 1cm;
+    }
+    @bottom-right-corner {
+      margin: 1cm;
+    }
+    @left-top {
+      margin: 1cm;
+    }
+    @left-middle {
+      margin: 1cm;
+    }
+    @left-bottom {
+      margin: 1cm;
+    }
+    @right-top {
+      margin: 1cm;
+    }
+    @right-middle {
+      content: "Page " counter(page);
+    }
+    @right-bottom {
+      margin: 1cm;
+    }
+  }
+}
+
+@media (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 2/1), (min-resolution: 2dppx), (min-resolution: 128dpcm) {
+  .b {
+    background: red;
+  }
+}
+
+.bg() {
+    background: red;
+
+    @media (max-width: 500px) {
+        background: green;
+    }
+}
+
+body {
+    .bg();
+}
+
+@bpMedium: 1000px;
+@media (max-width: @bpMedium) {
+    body {
+        .bg();
+        background: blue;
+    }
+}
+
+@media (max-width: 1200px) {
+  /* a comment */
+
+  @media (max-width: 900px) {
+    body { font-size: 11px; }
+  }
+}
+
+.nav-justified {
+  @media (min-width: 480px) {
+    > li {
+      display: table-cell;
+    }
+  }
+}
+
+.menu
+{
+  @media (min-width: 768px) {
+    .nav-justified();
+  }
+}
+@all: ~"all";
+@tv: ~"tv";
+@media @all and @tv {
+  .all-and-tv-variables {
+    var: all-and-tv;
+  }
+}

package/test/less-bom/merge.less

@@ -0,0 +1,78 @@
+.first-transform() {
+  transform+: rotate(90deg), skew(30deg);
+}
+.second-transform() {
+  transform+: scale(2,4);
+}
+.third-transform() {
+  transform: scaleX(45deg);
+}
+.fourth-transform() {
+  transform+: scaleX(45deg);
+}
+.fifth-transform() {
+  transform+: scale(2,4) !important;
+}
+.first-background() {
+  background+: url(data://img1.png);
+}
+.second-background() {
+  background+: url(data://img2.png);
+}
+
+.test1 {
+  // Can merge values
+  .first-transform();
+  .second-transform();
+}
+.test2 {
+  // Wont merge values without +: merge directive, for backwards compatibility with css
+  .first-transform();
+  .third-transform();
+}
+.test3 {
+  // Wont merge values from two sources with different properties
+  .fourth-transform();
+  .first-background();
+}
+.test4 {
+  // Wont merge values from sources that merked as !important, for backwards compatibility with css
+  .first-transform();
+  .fifth-transform();
+}
+.test5 {
+  // Wont merge values from mixins that merked as !important, for backwards compatibility with css
+  .first-transform();
+  .second-transform() !important;
+}
+.test6 {
+  // Ignores !merge if no peers found
+  .second-transform();
+}
+
+.test-interleaved {
+    transform+:  t1;
+    background+: b1;
+    transform+:  t2;
+    background+: b2, b3;
+    transform+:  t3;
+}
+
+.test-spaced {
+    transform+_:  t1;
+    background+_: b1;
+    transform+_:  t2;
+    background+_: b2, b3;
+    transform+_:  t3;
+}
+
+.test-interleaved-with-spaced {
+    transform+_:  t1s;
+    transform+:   t2;
+    background+:  b1;
+    transform+_:  t3s;
+    transform+:   t4 t5s;
+    background+_: b2s, b3;
+    transform+_:  t6s;
+    background+:  b4;
+}

package/test/less-bom/mixins-args.less

@@ -0,0 +1,215 @@
+.mixin (@a: 1px, @b: 50%) {
+  width: (@a * 5);
+  height: (@b - 1%);
+}
+
+.mixina (@style, @width, @color: black) {
+    border: @width @style @color;
+}
+
+.mixiny
+(@a: 0, @b: 0) {
+  margin: @a;
+  padding: @b;
+}
+
+.hidden() {
+  color: transparent; // asd
+}
+
+#hidden {
+  .hidden;
+}
+
+#hidden1 {
+  .hidden();
+}
+
+.two-args {
+  color: blue;
+  .mixin(2px, 100%);
+  .mixina(dotted, 2px);
+}
+
+.one-arg {
+  .mixin(3px);
+}
+
+.no-parens {
+  .mixin;
+}
+
+.no-args {
+  .mixin();
+}
+
+.var-args {
+  @var: 9;
+  .mixin(@var, (@var * 2));
+}
+
+.multi-mix {
+  .mixin(2px, 30%);
+  .mixiny(4, 5);
+}
+
+.maxa(@arg1: 10, @arg2: #f00) {
+  padding: (@arg1 * 2px);
+  color: @arg2;
+}
+
+body {
+  .maxa(15);
+}
+
+@glob: 5;
+.global-mixin(@a:2) {
+  width: (@glob + @a);
+}
+
+.scope-mix {
+  .global-mixin(3);
+}
+
+.nested-ruleset (@width: 200px) {
+    width: @width;
+    .column { margin: @width; }
+}
+.content {
+    .nested-ruleset(600px);
+}
+
+//
+
+.same-var-name2(@radius) {
+  radius: @radius;
+}
+.same-var-name(@radius) {
+  .same-var-name2(@radius);
+}
+#same-var-name {
+  .same-var-name(5px);
+}
+
+//
+
+.var-inside () {
+    @var: 10px;
+    width: @var;
+}
+#var-inside { .var-inside; }
+
+.mixin-arguments (@width: 0px, ...) {
+    border: @arguments;
+    width: @width;
+}
+
+.arguments {
+    .mixin-arguments(1px, solid, black);
+}
+.arguments2 {
+    .mixin-arguments();
+}
+.arguments3 {
+    .mixin-arguments;
+}
+
+.mixin-arguments2 (@width, @rest...) {
+    border: @arguments;
+    rest: @rest;
+    width: @width;
+}
+.arguments4 {
+    .mixin-arguments2(0, 1, 2, 3, 4);
+}
+
+// Edge cases
+
+.edge-case {
+    .mixin-arguments("{");
+}
+
+// Division vs. Literal Slash
+.border-radius(@r: 2px/5px) {
+  border-radius: @r;
+}
+.slash-vs-math {
+  .border-radius();
+  .border-radius(5px/10px);
+  .border-radius((3px * 2));
+}
+// semi-colon vs comma for delimiting
+
+.mixin-takes-one(@a) {
+    one: @a;
+}
+
+.mixin-takes-two(@a; @b) {
+    one: @a;
+    two: @b;
+}
+
+.comma-vs-semi-colon {
+    .mixin-takes-two(@a : a; @b : b, c);
+    .mixin-takes-two(@a : d, e; @b : f);
+    .mixin-takes-one(@a: g);
+    .mixin-takes-one(@a : h;);
+    .mixin-takes-one(i);
+    .mixin-takes-one(j;);
+    .mixin-takes-two(k, l);
+    .mixin-takes-one(m, n;);
+    .mixin-takes-two(o, p; q);
+    .mixin-takes-two(r, s; t;);
+}
+
+.mixin-conflict(@a:defA, @b:defB, @c:defC) {
+  three: @a, @b, @c;
+}
+
+.mixin-conflict(@a:defA, @b:defB, @c:defC, @d:defD) {
+  four: @a, @b, @c, @d;
+}
+
+#named-conflict {
+  .mixin-conflict(11, 12, 13, @a:a);
+  .mixin-conflict(@a:a, 21, 22, 23);
+}
+@a: 3px;
+.mixin-default-arg(@a: 1px, @b: @a, @c: @b) {
+  defaults: 1px 1px 1px;
+  defaults: 2px 2px 2px;
+}
+
+.test-mixin-default-arg {
+  .mixin-default-arg();
+  .mixin-default-arg(2px);
+}
+
+.mixin-comma-default1(@color; @padding; @margin: 2, 2, 2, 2) {
+  margin: @margin;
+}
+.selector {
+  .mixin-comma-default1(#33acfe; 4);
+}
+.mixin-comma-default2(@margin: 2, 2, 2, 2;) {
+  margin: @margin;
+}
+.selector2 {
+  .mixin-comma-default2();
+}
+.mixin-comma-default3(@margin: 2, 2, 2, 2) {
+  margin: @margin;
+}
+.selector3 {
+  .mixin-comma-default3(4,2,2,2);
+}
+
+.test-calling-one-arg-mixin(@a) {
+}
+
+.test-calling-one-arg-mixin(@a, @b, @rest...) {
+}
+
+div {
+  .test-calling-one-arg-mixin(1);
+}

package/test/less-bom/mixins-closure.less

@@ -0,0 +1,26 @@
+.scope {
+    @var: 99px;
+    .mixin () {
+        width: @var;
+    }
+}
+
+.class {
+    .scope > .mixin;
+}
+
+.overwrite {
+    @var: 0px;
+    .scope > .mixin;
+}
+
+.nested {
+    @var: 5px;
+    .mixin () {
+        width: @var;
+    }
+    .class {
+        @var: 10px;
+       .mixin;
+    }
+}