less 2.1.1 → 2.3.1

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

@@ -0,0 +1,102 @@
+.mixin (...) {
+  variadic: true;
+}
+.mixin (@a...) {
+  named-variadic: true;
+}
+.mixin () {
+    zero: 0;
+}
+.mixin (@a: 1px) {
+    one: 1;
+}
+.mixin (@a) {
+    one-req: 1;
+}
+.mixin (@a: 1px, @b: 2px) {
+    two: 2;
+}
+
+.mixin (@a, @b, @c) {
+    three-req: 3;
+}
+
+.mixin (@a: 1px, @b: 2px, @c: 3px) {
+    three: 3;
+}
+
+.zero {
+    .mixin();
+}
+
+.one {
+    .mixin(1);
+}
+
+.two {
+    .mixin(1, 2);
+}
+
+.three {
+    .mixin(1, 2, 3);
+}
+
+//
+
+.mixout ('left') {
+    left: 1;
+}
+
+.mixout ('right') {
+    right: 1;
+}
+
+.left {
+    .mixout('left');
+}
+.right {
+    .mixout('right');
+}
+
+//
+
+.border (@side, @width) {
+    color: black;
+    .border-side(@side, @width);
+}
+.border-side (left, @w) {
+    border-left: @w;
+}
+.border-side (right, @w) {
+    border-right: @w;
+}
+
+.border-right {
+    .border(right, 4px);
+}
+.border-left {
+    .border(left, 4px);
+}
+
+//
+
+
+.border-radius (@r) {
+    both: (@r * 10);
+}
+.border-radius (@r, left) {
+    left: @r;
+}
+.border-radius (@r, right) {
+    right: @r;
+}
+
+.only-right {
+    .border-radius(33, right);
+}
+.only-left {
+    .border-radius(33, left);
+}
+.left-right {
+    .border-radius(33);
+}

package/test/less-bom/mixins.less

@@ -0,0 +1,145 @@
+.mixin { border: 1px solid black; }
+.mixout { border-color: orange; }
+.borders { border-style: dashed; }
+.mixin > * { border: do not match me; }
+
+#namespace {
+  .borders {
+    border-style: dotted;
+  }
+  .biohazard {
+    content: "death";
+    .man {
+      color: transparent;
+    }
+  }
+}
+#theme {
+  > .mixin {
+    background-color: grey;
+  }
+}
+#container {
+  color: black;
+  .mixin;
+  .mixout;
+  #theme > .mixin;
+}
+
+#header {
+  .milk {
+    color: white;
+    .mixin;
+    #theme > .mixin;
+  }
+  #cookie {
+    .chips {
+      #namespace .borders;
+      .calories {
+        #container;
+      }
+    }
+    .borders;
+  }
+}
+.secure-zone { #namespace .biohazard .man; }
+.direct {
+  #namespace > .borders;
+}
+
+.bo, .bar {
+    width: 100%;
+}
+.bo {
+    border: 1px;
+}
+.ar.bo.ca {
+    color: black;
+}
+.jo.ki {
+    background: none;
+}
+.amp {
+    &.support {
+        color: orange;
+        .higher {
+            top: 0px;
+        }
+        &.deeper {
+            height: auto;
+        }
+    }
+}
+.extended {
+    .bo;
+    .jo.ki;
+    .amp.support;
+    .amp.support.higher;
+    .amp.support.deeper;
+}
+.do .re .mi .fa {
+    .sol .la {
+        .si {
+            color: cyan;
+        }
+    }
+}
+.mutli-selector-parents {
+    .do.re.mi.fa.sol.la.si;
+}
+.foo .bar {
+  .bar;
+}
+.has_parents() {
+  & .underParents {
+    color: red;
+  }
+}
+.has_parents();
+.parent {
+  .has_parents();
+}
+.margin_between(@above, @below) {
+     * + & { margin-top: @above; }
+     legend + & { margin-top: 0; }
+     & + * { margin-top: @below; }
+}
+h1 { .margin_between(25px, 10px); }
+h2 { .margin_between(20px, 8px); }
+h3 { .margin_between(15px, 5px); }
+
+.mixin_def(@url, @position){
+    background-image: @url;
+    background-position: @position;
+}
+.error{
+  @s: "/";
+  .mixin_def( "@{s}a.png", center center);
+}
+.recursion() {
+  color: black;
+}
+.test-rec {
+  .recursion {
+    .recursion();
+  }
+}
+.paddingFloat(@padding) { padding-left: @padding; }
+
+.button {
+    .paddingFloat(((10px + 12) * 2));
+
+    &.large { .paddingFloat(((10em * 2) * 2)); }
+}
+.clearfix() {
+  // ...
+}
+.clearfix {
+  .clearfix();
+}
+.clearfix {
+  .clearfix();
+}
+.foo {
+  .clearfix();
+}

package/test/less-bom/modifyVars/extended.json

@@ -0,0 +1,5 @@
+{
+    "the-border": "1px",
+    "base-color": "#111",
+    "red": "#842210"
+}

package/test/less-bom/modifyVars/extended.less

@@ -0,0 +1,11 @@
+#header {
+  color: (@base-color * 3);
+  border-left: @the-border;
+  border-right: (@the-border * 2);
+}
+#footer {
+  color: (@base-color + #003300);
+  border-color: @red;
+}
+@red: blue; // var is overridden by the modifyVars
+//@base-color: green;

package/test/less-bom/nested-gradient-with-svg-gradient/mixin-consumer.less

@@ -0,0 +1,5 @@
+@import "svg-gradient-mixin.less";
+
+.gray-gradient {
+  .gradient-mixin(#999);
+}

package/test/less-bom/nested-gradient-with-svg-gradient/svg-gradient-mixin.less

@@ -0,0 +1,15 @@
+.gradient-mixin(@color) {
+  background: svg-gradient(to bottom,
+    fade(@color, 0%) 0%,
+    fade(@color, 5%) 60%,
+    fade(@color, 10%) 70%,
+    fade(@color, 15%) 73%,
+    fade(@color, 20%) 75%,
+    fade(@color, 25%) 80%,
+    fade(@color, 30%) 85%,
+    fade(@color, 35%) 88%,
+    fade(@color, 40%) 90%,
+    fade(@color, 45%) 95%,
+    fade(@color, 50%) 100%
+  );
+}

package/test/less-bom/no-js-errors/no-js-errors.less

@@ -0,0 +1,3 @@
+.a {
+  a: `1 + 1`;
+}

package/test/less-bom/no-js-errors/no-js-errors.txt

@@ -0,0 +1,4 @@
+SyntaxError: You are using JavaScript, which has been disabled. in {path}no-js-errors.less on line 2, column 6:
+1 .a {
+2   a: `1 + 1`;
+3 }

package/test/less-bom/no-output.less

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

package/test/less-bom/operations.less

@@ -0,0 +1,62 @@
+#operations {
+  color: (#110000 + #000011 + #001100); // #111111
+  height: (10px / 2px + 6px - 1px * 2); // 9px
+  width: (2 * 4 - 5em); // 3em
+  .spacing {
+    height: (10px / 2px+6px-1px*2);
+    width: (2  * 4-5em);
+  }
+  substraction: (20 - 10 - 5 - 5); // 0
+  division: (20 / 5 / 4); // 1
+}
+
+@x: 4;
+@y: 12em;
+
+.with-variables {
+  height: (@x + @y); // 16em
+  width: (12 + @y); // 24em
+  size: (5cm - @x); // 1cm
+}
+
+.with-functions {
+  color: (rgb(200, 200, 200) / 2);
+  color: (2 * hsl(0, 50%, 50%));
+  color: (rgb(10, 10, 10) + hsl(0, 50%, 50%));
+}
+
+@z: -2;
+
+.negative {
+  height: (2px + @z); // 0px
+  width: (2px - @z); // 4px
+}
+
+.shorthands {
+  padding: -1px 2px 0 -4px; //
+}
+
+.rem-dimensions {
+  font-size: (20rem / 5 + 1.5rem); // 5.5rem
+}
+
+.colors {
+  color: #123; // #112233
+  border-color: (#234 + #111111); // #334455
+  background-color: (#222222 - #fff); // #000000
+  .other {
+    color: (2 * #111); // #222222
+    border-color: (#333333 / 3 + #111); // #222222
+  }
+}
+
+.negations {
+    @var: 4px;
+    variable: (-@var); // 4
+    variable1: (-@var + @var); // 0
+    variable2: (@var + -@var); // 0
+    variable3: (@var - -@var); // 8
+    variable4: (-@var - -@var); // 0
+    paren: (-(@var)); // -4px
+    paren2: (-(2 + 2) * -@var); // 16
+}

package/test/less-bom/parens.less

@@ -0,0 +1,45 @@
+.parens {
+  @var: 1px;
+  border: (@var * 2) solid black;
+  margin: (@var * 1) (@var + 2) (4 * 4) 3;
+  width: (6 * 6);
+  padding: 2px (6 * 6px);
+}
+
+.more-parens {
+  @var: (2 * 2);
+  padding: (2 * @var) 4 4 (@var * 1px);
+  width-all: ((@var * @var) * 6);
+  width-first: ((@var * @var)) * 6;
+  width-keep: (@var * @var) * 6;
+  height-keep: (7 * 7) + (8 * 8);
+  height-all: ((7 * 7) + (8 * 8));
+  height-parts: ((7 * 7)) + ((8 * 8));
+  margin-keep: (4 * (5 + 5) / 2) - (@var * 2);
+  margin-parts: ((4 * (5 + 5) / 2)) - ((@var * 2));
+  margin-all: ((4 * (5 + 5) / 2) + (-(@var * 2)));
+  border-radius-keep: 4px * (1 + 1) / @var + 3px;
+  border-radius-parts: ((4px * (1 + 1))) / ((@var + 3px));
+  border-radius-all: (4px * (1 + 1) / @var + 3px);
+  //margin: (6 * 6)px;
+}
+
+.negative {
+  @var: 1;
+  neg-var: -@var; // -1 ?
+  neg-var-paren: -(@var); // -(1) ?
+}
+
+.nested-parens {
+  width: 2 * (4 * (2 + (1 + 6))) - 1;
+  height: ((2 + 3) * (2 + 3) / (9 - 4)) + 1;
+}
+
+.mixed-units {
+  margin: 2px 4em 1 5pc;
+  padding: (2px + 4px) 1em 2px 2;
+}
+
+.test-false-negatives {
+  a: ~"(";
+}

package/test/less-bom/property-name-interp.less

@@ -0,0 +1,56 @@
+
+pi-test {
+    @prefix: ufo-;
+    @a:    border;
+    @bb:      top;
+    @c_c:    left;
+    @d-d4: radius;
+    @-:         -;
+
+    @var: ~'@not-variable';
+
+    @{a}: 0;
+    @{var}: @var;
+    @{prefix}width: 50%;
+    *-z-@{a} :1px dashed blue;
+    -www-@{a}-@{bb}: 2px;
+    @{d-d4}-is-not-a-@{a}:true;
+    @{a}-@{bb}-@{c_c}-@{d-d4}       : 2em;
+    @{a}@{-}@{bb}@{-}red@{-}@{d-d4}-: 3pt;
+
+    .mixin(mixer);
+    .merge(ish, base);
+}
+
+@global: global;
+
+.mixin(@arg) {
+    @local: local;
+    @{global}-@{local}-@{arg}-property: strong;
+}
+
+.merge(@p, @v) {
+    &-merge {
+        @prefix: pre;
+        @suffix: ish;
+        @{prefix}-property-ish+       :high;
+        pre-property-@{suffix}    +: middle;
+        @{prefix}-property-@{suffix}+:  low;
+        @{prefix}-property-@{p}   +  :   @v;
+
+        @subterfuge: ~'+';
+        pre-property-ish@{subterfuge}: nice try dude;
+    }
+}
+
+pi-indirect-vars {
+    @{p}: @p;
+    @p: @@a;
+    @a: b;
+    @b: auto;
+}
+
+pi-complex-values {
+    @{p}@{p}: none;
+    @p: (1 + 2px) fadeout(#ff0, 50%), pi() /* foo */;
+}

package/test/less-bom/rulesets.less

@@ -0,0 +1,30 @@
+#first > .one {
+  > #second .two > #deux {
+    width: 50%;
+    #third {
+      &:focus {
+        color: black;
+        #fifth {
+          > #sixth {
+            .seventh #eighth {
+              + #ninth {
+                color: purple;
+              }
+            }
+          }
+        }
+      }
+      height: 100%;
+    }
+    #fourth, #five, #six {
+      color: #110000;
+      .seven, .eight > #nine {
+        border: 1px solid black;
+      }
+      #ten {
+        color: red;
+      }
+    }
+  }
+  font-size: 2em;
+}

package/test/less-bom/scope.less

@@ -0,0 +1,104 @@
+@x: red;
+@x: blue;
+@z: transparent;
+@mix: none;
+
+.mixin {
+  @mix: #989;
+}
+@mix: blue;
+.tiny-scope {
+  color: @mix; // #989
+  .mixin;
+}
+
+.scope1 {
+  @y: orange;
+  @z: black;
+  color: @x; // blue
+  border-color: @z; // black
+  .hidden {
+    @x: #131313;
+  }
+  .scope2 {
+    @y: red;
+    color: @x; // blue
+    .scope3 {
+      @local: white;
+      color: @y; // red
+      border-color: @z; // black
+      background-color: @local; // white
+    }
+  }
+}
+
+#namespace {
+  .scoped_mixin() {
+    @local-will-be-made-global: green;
+    .scope {
+      scoped-val: @local-will-be-made-global;
+    }
+  }
+}
+
+#namespace > .scoped_mixin();
+
+.setHeight(@h) { @height: 1024px; }
+.useHeightInMixinCall(@h) { .useHeightInMixinCall { mixin-height: @h; } }
+@mainHeight: 50%;
+.setHeight(@mainHeight);
+.heightIsSet { height: @height; }
+.useHeightInMixinCall(@height);
+
+.importRuleset() {
+  .imported {
+    exists: true;
+  }
+}
+.importRuleset();
+.testImported {
+  .imported;
+}
+
+@parameterDefault: 'top level';
+@anotherVariable: 'top level';
+//mixin uses top-level variables
+.mixinNoParam(@parameter: @parameterDefault) when (@parameter = 'top level') {
+  default: @parameter;
+  scope: @anotherVariable;
+  sub-scope-only: @subScopeOnly;
+}
+
+#allAreUsedHere {
+  //redefine top-level variables in different scope
+  @parameterDefault: 'inside';
+  @anotherVariable: 'inside';
+  @subScopeOnly: 'inside';
+  //use the mixin
+  .mixinNoParam();
+}
+#parentSelectorScope {
+  @col: white;
+  & {
+    @col: black;
+  }
+  prop: @col;
+  & {
+    @col: black;
+  }
+}
+.test-empty-mixin() {
+}
+#parentSelectorScopeMixins {
+  & {
+    .test-empty-mixin() {
+      should: never seee 1;
+    }
+  }
+  .test-empty-mixin();
+  & {
+    .test-empty-mixin() {
+      should: never seee 2;
+    }
+  }
+}