less 1.2.21 → 2.0.0

data/{spec → lib/less/js/test}/less/comments.less

@@ -1,3 +1,15 @@
+/******************\
+*                  *
+*  Comment Header  *
+*                  *
+\******************/
+
+/*
+
+    Comment
+
+*/
+
 /*  
  * Comment Test
  * 
@@ -22,7 +34,7 @@
 
 /* @group Variables
 ------------------- */
-#comments {
+#comments /* boo */ {
   /**/ // An empty comment 
   color: red; /* A C-style comment */
   background-color: orange; // A little comment
@@ -33,7 +45,7 @@
   border: 1px solid black;
   
   // padding & margin //
-  padding: 0;
+  padding: 0; // }{ '"
   margin: 2em;
 } //
 
@@ -43,4 +55,9 @@
   }
 */
 
+.selector /* .with */, .lots, /* of */ .comments {
+  color: grey, /* blue */ orange;
+}
+
+#last { color: blue }
 //

data/{spec → lib/less/js/test}/less/css-3.less

@@ -34,7 +34,6 @@ ol.comma > li:nth-last-child(2)::after {
 
 li:nth-child(4n+1),
 li:nth-child(-5n),
-li:nth-child(n+1),
 li:nth-child(-n+2) {
   color: white;
 }
@@ -47,6 +46,10 @@ a[href$="http://"] {
   color: black;
 }
 
+form[data-disabled] {
+  color: black;
+}
+
 p::before {
   color: black;
 }

data/lib/less/js/test/less/css-escapes.less

@@ -0,0 +1,28 @@
+@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;
+}

data/{spec → lib/less/js/test}/less/css.less

@@ -1,9 +1,4 @@
-/* 
-
-  a CSS File
-
-*/
-
+@charset "utf-8";
 div { color: black; }
 div { width: 99%; }
 
@@ -60,21 +55,10 @@ p + h1 {
   font-size: 2.2em;
 }
 
-input[type="text"] { 
-  font-weight: normal; 
-}
-
-h2[title] {
-  font-size: 100%;
-}
-
-[disabled] {
-  color: transparent;
-}
-
 #shorthands {
   border: 1px solid #000;
   font: 12px/16px Arial;
+  font: 100%/16px Arial;
   margin: 1px 0;
   padding: 0 auto;
   background: url("http://www.lesscss.org/spec.html") no-repeat 0 4px;
@@ -94,6 +78,7 @@ h2[title] {
   background-image: url(images/image.jpg);
   background: -webkit-gradient(linear, left top, left bottom, from(red), to(blue));
   margin: ;
+  filter: alpha(opacity=100);
 }
 
 #important {
@@ -102,3 +87,10 @@ h2[title] {
   height: 20px ! important;
 }
 
+#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==);
+}

data/lib/less/js/test/less/functions.less

@@ -0,0 +1,35 @@
+#functions {
+  @var: 10;
+  color: color("evil red"); // #660000
+  width: increment(15);
+  height: undefined("self");
+  border-width: add(2, 3);
+  variable: increment(@var);
+}
+
+#built-in {
+  @r: 32;
+  escaped: e("-Some::weird(#thing, y)");
+  lighten: lighten(#ff0000, 40%);
+  darken: darken(#ff0000, 40%);
+  saturate: saturate(#29332f, 20%);
+  desaturate: desaturate(#203c31, 20%);
+  greyscale: greyscale(#203c31);
+  spin-p: spin(hsl(340, 50%, 50%), 40);
+  spin-n: spin(hsl(30, 50%, 50%), -40);
+  format: %("rgb(%d, %d, %d)", @r, 128, 64);
+  format-string: %("hello %s", "world");
+  format-multiple: %("hello %s %d", "earth", 2);
+  format-url-encode: %('red is %A', #ff0000);
+  eformat: e(%("rgb(%d, %d, %d)", @r, 128, 64));
+
+  hue: hue(hsl(98, 12%, 95%));
+  saturation: saturation(hsl(98, 12%, 95%));
+  lightness: lightness(hsl(98, 12%, 95%));
+  rounded: round(@r/3);
+  roundedpx: round(10px / 3);
+}
+
+#alpha {
+  alpha: darken(hsla(25, 50%, 50%, 0.6), 10%);
+}

data/{spec → lib/less/js/test}/less/import.less

@@ -1,5 +1,5 @@
 @import url("import/import-test-a.less");
-@import url("import/import-test-a.less");
+//@import url("import/import-test-a.less");
 
 #import-test {
   .mixin;

data/lib/less/js/test/less/javascript.less

@@ -0,0 +1,27 @@
+.eval {
+    js: `42`;
+    js: `1 + 1`;
+    js: `"hello world"`;
+    js: `[1, 2, 3]`;
+    title: `process.title`;
+    ternary: `(1 + 1 == 2 ? true : false)`;
+}
+.scope {
+    @foo: 42;
+    var: `this.foo.toJS()`;
+    escaped: ~`2 + 5 + 'px'`;
+}
+.vars {
+    @var: `4 + 4`;
+    width: @var;
+}
+.escape-interpol {
+    @world: "world";
+    width: ~`"hello" + " " + @{world}`;
+}
+.arrays {
+    @ary:  1, 2, 3;
+    @ary2: 1  2  3;
+    ary: `@{ary}.join(', ')`;
+    ary: `@{ary2}.join(', ')`;
+}

data/lib/less/js/test/less/media.less

@@ -0,0 +1,25 @@
+
+// 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; }
+}
+
+@media all and (orientation:portrait) {
+    aside { float: none; }
+}

data/lib/less/js/test/less/mixins-args.less

@@ -0,0 +1,118 @@
+.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;
+  .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; }
+
+// # mixins
+
+#id-mixin () {
+    color: red;
+}
+.id-class {
+    #id-mixin();
+    #id-mixin;
+}
+
+.mixin-arguments (@width: 0px) {
+    border: @arguments;
+}
+
+.arguments {
+    .mixin-arguments(1px, solid, black);
+}
+.arguments2 {
+    .mixin-arguments();
+}

data/lib/less/js/test/less/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; 
+    }    
+}

data/lib/less/js/test/less/mixins-nested.less

@@ -0,0 +1,22 @@
+.mix-inner (@var) {
+  border-width: @var;
+}
+
+.mix (@a: 10) {
+  .inner {
+    height: @a * 10;
+
+    .innest {
+      width: @a;  
+      .mix-inner(@a * 2);
+    }  
+  }
+}
+
+.class {
+  .mix(30);
+}
+
+.class2 {
+  .mix(60);
+}

data/lib/less/js/test/less/mixins-pattern.less

@@ -0,0 +1,96 @@
+.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);
+}