less 1.2.2 → 1.3.3

package/test/less/import/import-and-relative-paths-test.less

@@ -0,0 +1,6 @@
+@import "../css/background.css";
+@import "import-test-d.css";
+
+@import "imports/logo";
+@import "imports/font";
+

package/test/less/import/import-charset-test.less

@@ -0,0 +1 @@
+@charset "ISO-8859-1";

package/test/less/import/import-once-test-c.less

@@ -0,0 +1,6 @@
+
+@c: red;
+
+#import {
+  color: @c;
+}

package/test/less/import/import-test-a.less

@@ -1,2 +1,3 @@
 @import "import-test-b.less";
 @a: 20%;
+@import "urls.less";

package/test/less/import/import-test-c.less

@@ -1,5 +1,4 @@
 
-@import "import-test-d.css";
 @c: red;
 
 #import {

package/test/less/import/imports/font.less

@@ -0,0 +1,8 @@
+@font-face {
+	font-family: xecret;
+	src: url('../assets/xecret.ttf');
+}
+
+#secret {
+	font-family: xecret, sans-serif;
+}

package/test/less/import/imports/logo.less

@@ -0,0 +1,5 @@
+#logo {
+  width: 100px;
+  height: 100px;
+  background: url('../assets/logo.png');
+}

package/test/less/import/urls.less

@@ -0,0 +1 @@
+// empty file showing that it loads from the relative path first

package/test/less/import-once.less

@@ -0,0 +1,4 @@
+@import-once "import/import-once-test-c";
+@import-once "import/import-once-test-c";
+@import-once "import/import-once-test-c.less";
+@import-once "import/deeper/import-once-test-a";

package/test/less/import.less

@@ -1,4 +1,3 @@
-@import url("import/import-test-a.less");
 @import url(http://fonts.googleapis.com/css?family=Open+Sans);
 
 @import url(something.css) screen and (color) and (max-width: 600px);
@@ -9,3 +8,5 @@
   height: @a + 10%;
 }
 @import "import/import-test-e" screen and (max-width: 600px);
+
+@import url("import/import-test-a.less");

package/test/less/javascript.less

@@ -3,8 +3,10 @@
     js: `1 + 1`;
     js: `"hello world"`;
     js: `[1, 2, 3]`;
-    title: `process.title`;
+    title: `typeof process.title`;
     ternary: `(1 + 1 == 2 ? true : false)`;
+    multiline: `(function(){var x = 1 + 1;
+           return x})()`;
 }
 .scope {
     @foo: 42;
@@ -23,5 +25,5 @@
     @ary:  1, 2, 3;
     @ary2: 1  2  3;
     ary: `@{ary}.join(', ')`;
-    ary: `@{ary2}.join(', ')`;
+    ary1: `@{ary2}.join(', ')`;
 }

package/test/less/media.less

@@ -5,7 +5,7 @@
 
 @media print {
     .class {
-        color: blue;    
+        color: blue;
         .sub {
             width: @var;
         }
@@ -20,6 +20,10 @@
     body { max-width: @base * 60; }
 }
 
+@media all and (device-aspect-ratio: 16/9) {
+   body { max-width: 800px; }
+}
+
 @media all and (orientation:portrait) {
     aside { float: none; }
 }
@@ -29,3 +33,167 @@
         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 {
+  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;
+    }
+}

package/test/less/mixins-args.less

@@ -19,6 +19,9 @@
 
 #hidden {
   .hidden;
+}
+
+#hidden1 {
   .hidden();
 }
 
@@ -96,18 +99,9 @@ body {
 }
 #var-inside { .var-inside; }
 
-// # mixins
-
-#id-mixin () {
-    color: red;
-}
-.id-class {
-    #id-mixin();
-    #id-mixin;
-}
-
-.mixin-arguments (@width: 0px) {
+.mixin-arguments (@width: 0px, ...) {
     border: @arguments;
+    width: @width;
 }
 
 .arguments {
@@ -116,9 +110,58 @@ body {
 .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("{");
 }
+
+// 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);
+}

package/test/less/mixins-guards.less

@@ -92,3 +92,33 @@
 .bool () when not (false) and (false), not (false)           { content: not false and false, not false }
 
 .bool1 { .bool }
+
+.equality-unit-test(@num) when (@num = 1%) {
+  test: fail;
+}
+.equality-unit-test(@num) when (@num = 2) {
+  test: pass;
+}
+.equality-units {
+  .equality-unit-test(1px);
+  .equality-unit-test(2px);
+}
+
+.colorguard(@col) when (@col = red)							{ content: is @col; }
+.colorguard(@col) when not (blue = @col)					{ content: is not blue its @col; }
+.colorguard(@col)											{}
+.colorguardtest {
+    .colorguard(red);
+	.colorguard(blue);
+	.colorguard(purple);
+}
+
+.stringguard(@str) when (@str = "theme1")					{ content: is theme1; }
+.stringguard(@str) when not ("theme2" = @str)				{ content: is not theme2; }
+.stringguard(@str) when (~"theme1" = @str)					{ content: is theme1 no quotes; }
+.stringguard(@str)											{}
+.stringguardtest {
+    .stringguard("theme1");
+	.stringguard("theme2");
+	.stringguard(theme1);
+}

package/test/less/mixins-important.less

@@ -5,6 +5,10 @@
 .mixin (@a: 0) {
   border: @a;
   boxer: @a;
+  .inner {
+    test: @a;
+  }
+  // comment
 }
 
 .class {

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

@@ -0,0 +1,36 @@
+.mixin (@a: 1px, @b: 50%) {
+  width: @a * 5;
+  height: @b - 1%;
+  args: @arguments;
+}
+.mixin (@a: 1px, @b: 50%) when (@b > 75%){
+  text-align: center;
+}
+ 
+.named-arg {
+  color: blue;
+  .mixin(@b: 100%);
+}
+ 
+.class {
+  @var: 20%;
+  .mixin(@b: @var);
+}
+
+.all-args-wrong-args {
+  .mixin(@b: 10%, @a: 2px);
+}
+
+.mixin2 (@a: 1px, @b: 50%, @c: 50) {
+  width: @a * 5;
+  height: @b - 1%;
+  color: #000000 + @c;
+}
+
+.named-args2 {
+  .mixin2(3px, @c: 100);
+}
+
+.named-args3 {
+  .mixin2(@b: 30%, @c: #123456);
+}

package/test/less/mixins-pattern.less

@@ -1,3 +1,6 @@
+.mixin (...) {
+  variadic: true;
+}
 .mixin () {
     zero: 0;
 }

package/test/less/mixins.less

@@ -58,10 +58,57 @@
 .jo.ki {
     background: none;
 }
+.amp {
+    &.support {
+        color: orange;
+    }
+}
 .extended {
     .bo;
     .jo.ki;
+    .amp.support;
 }
 .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); }
+}

package/test/less/scope.less

@@ -1,3 +1,4 @@
+@x: red;
 @x: blue;
 @z: transparent;
 @mix: none;
@@ -5,7 +6,7 @@
 .mixin {
   @mix: #989;
 }
-
+@mix: blue;
 .tiny-scope {
   color: @mix; // #989
   .mixin;
@@ -30,3 +31,49 @@
     }
   }
 }
+
+#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();
+}

package/test/less/selectors.less

@@ -41,8 +41,96 @@ a {
     .qux & {
       display: inline;
     }
+	.qux& {
+	  display: inline-block;
+	}
     .qux & .biz {
       display: none;
     }
   }
+}
+
+.b {
+ &.c {
+  .a& {
+   color: red;
+  }
+ }
+}
+
+.b {
+ .c & {
+  &.a {
+   color: red;
+  }
+ }
+}
+
+.p {
+  .foo &.bar {
+    color: red;
+  }
+}
+
+.p {
+  .foo&.bar {
+    color: red;
+  }
+}
+
+.foo {
+  .foo + & {
+    background: amber;
+  }
+  & + & {
+    background: amber;
+  }
+}
+
+.foo, .bar {
+  & + & {
+    background: amber;
+  }
+}
+
+.foo, .bar {
+  a, b {
+    & > & {
+      background: amber;
+    }
+  }
+}
+
+.other ::fnord { color: red }
+.other::fnord { color: red }
+.other {
+  ::bnord {color: red }
+  &::bnord {color: red }
+}
+// selector interpolation - deprecated
+@theme: blood;
+(~".@{theme}") {
+  color: red;
+}
+// selector interpolation - new format
+@selector: ~".@{theme}";
+@{selector} {
+  color:red;
+}
+@{selector}red {
+  color: green;
+}
+.red {
+  #@{theme}.@{theme}&.black {
+    color:black;
+  }
+}
+@num: 3;
+:nth-child(@{num}):nth-child(@num) {
+	second-use: deprecated;
+}
+.test {
+  &:nth-child(odd):not(:nth-child(3)) {
+    color: #ff0000;
+  }
 }

package/test/less/static-urls/urls.less

@@ -0,0 +1,33 @@
+@font-face {
+  src: url("/fonts/garamond-pro.ttf");
+  src: local(Futura-Medium),
+       url(fonts.svg#MyGeometricModern) format("svg");
+}
+#shorthands {
+  background: url("http://www.lesscss.org/spec.html") no-repeat 0 4px;
+}
+#misc {
+  background-image: url(images/image.jpg);
+}
+#data-uri {
+  background: url(data:image/png;charset=utf-8;base64,
+    kiVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD/
+    k//+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4U
+    kg9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC);
+  background-image: url(data:image/x-png,f9difSSFIIGFIFJD1f982FSDKAA9==);
+  background-image: url(http://fonts.googleapis.com/css?family=\"Rokkitt\":\(400\),700);
+}
+
+#svg-data-uri {
+  background: transparent url('data:image/svg+xml, <svg version="1.1"><g></g></svg>');
+}
+
+.comma-delimited {
+  background: url(bg.jpg) no-repeat, url(bg.png) repeat-x top left, url(bg);
+}
+.values {
+    @a: 'Trebuchet';
+    url: url(@a);
+}
+
+@import "../import/import-and-relative-paths-test";

package/test/less/strings.less

@@ -46,6 +46,6 @@
 .mix-mul-class {
     .mix-mul(blue);
     .mix-mul(red);
-    .mix-mul(blue);
+    .mix-mul(black);
     .mix-mul(orange);
 }