less 2.4.0 → 2.5.3

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/plugin/plugin-global.js

@@ -0,0 +1,9 @@
+
+functions.addMultiple({
+    "test-shadow" : function() {
+        return new tree.Anonymous( "global" );
+    },
+    "test-global" : function() {
+        return new tree.Anonymous( "global" );
+    }
+});

package/test/less-bom/plugin/plugin-local.js

@@ -0,0 +1,8 @@
+functions.addMultiple({
+    "test-shadow" : function() {
+        return new tree.Anonymous( "local" );
+    },
+    "test-local" : function() {
+        return new tree.Anonymous( "local" );
+    }
+});

package/test/less-bom/plugin/plugin-transitive.js

@@ -0,0 +1,5 @@
+functions.addMultiple({
+    "test-transitive" : function() {
+        return new tree.Anonymous( "transitive" );
+    }
+});

package/test/less-bom/plugin/plugin-transitive.less

@@ -0,0 +1,5 @@
+@plugin "plugin-transitive";
+
+.other {
+  trans : test-transitive();
+}

package/test/less-bom/plugin.less

@@ -0,0 +1,85 @@
+// importing plugin globally
+@plugin "./plugin/plugin-global";
+
+// transitively include plugins from importing another sheet
+@import "./plugin/plugin-transitive";
+
+
+// `test-global` function should be reachable
+// `test-local`  function should not be reachable
+// `test-shadow` function should return global version
+.class {
+  trans  : test-transitive();
+  global : test-global();
+  local  : test-local();
+  shadow : test-shadow();
+
+  // `test-global` function should propagate and be reachable
+  // `test-local`  function should be reachable
+  // `test-shadow` function should return local version, shadowing global version
+  .local {
+    @plugin "./plugin/plugin-local";
+    global : test-global();
+    local  : test-local();
+    shadow : test-shadow();
+  }
+}
+
+// calling a mixin or detached ruleset should not bubble local plugins
+// imported inside either into the parent scope.
+.mixin() {
+  @plugin "./plugin/plugin-local";
+  mixin-local  : test-local();
+  mixin-global : test-global();
+  mixin-shadow : test-shadow();
+}
+@ruleset : {
+  @plugin "./plugin/plugin-local";
+  ruleset-local  : test-local();
+  ruleset-global : test-global();
+  ruleset-shadow : test-shadow();
+};
+#ns {
+  @plugin "./plugin/plugin-local";
+  .mixin() {
+    ns-mixin-global : test-global();
+    ns-mixin-local  : test-local();
+    ns-mixin-shadow : test-shadow();
+  }
+}
+.class {
+  #ns > .mixin();
+  .mixin();
+  @ruleset();
+  class-local : test-local();
+}
+
+
+// `test-global` function should propagate into directive scope
+@media screen {
+  .test {
+    result : test-global();
+  }
+}
+@font-face {
+  result : test-global();
+}
+
+// `test-global` function should propagate into nested directive scopes
+@media screen and (min-width:100px) {
+  @media (max-width:400px) {
+		.test {
+			result : test-global();
+		}
+	}
+}
+
+.test {
+  @media screen {
+    @plugin "./plugin/plugin-local";
+    result : test-local();
+  }
+}
+
+
+

package/test/less-bom/postProcessorPlugin/postProcessor.less

@@ -0,0 +1,4 @@
+@color: white;
+.test {
+    color: @color;
+}

package/test/less-bom/preProcessorPlugin/preProcessor.less

@@ -0,0 +1,3 @@
+.test {
+    color: @color;
+}

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