less 2.3.3 → 2.4.0

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

@@ -1,6 +1,6 @@
 .mixin (@a: 1px, @b: 50%) {
-  width: @a * 5;
-  height: @b - 1%;
+  width: (@a * 5);
+  height: (@b - 1%);
 }
 
 .mixina (@style, @width, @color: black) {
@@ -45,7 +45,7 @@
 
 .var-args {
   @var: 9;
-  .mixin(@var, @var * 2);
+  .mixin(@var, (@var * 2));
 }
 
 .multi-mix {
@@ -54,7 +54,7 @@
 }
 
 .maxa(@arg1: 10, @arg2: #f00) {
-  padding: @arg1 * 2px;
+  padding: (@arg1 * 2px);
   color: @arg2;
 }
 
@@ -64,7 +64,7 @@ body {
 
 @glob: 5;
 .global-mixin(@a:2) {
-  width: @glob + @a;
+  width: (@glob + @a);
 }
 
 .scope-mix {
@@ -129,6 +129,15 @@ body {
     .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) {
@@ -164,4 +173,33 @@ body {
 #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);
 }

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

@@ -121,4 +121,17 @@
     .stringguard("theme1");
 	.stringguard("theme2");
 	.stringguard(theme1);
+}
+
+.mixin(...) {
+  catch:all;
+}
+.mixin(@var) when (@var=4) {
+  declare: 4;
+}
+.mixin(@var) when (@var=4px) {
+  declare: 4px;
+}
+#tryNumberPx {
+  .mixin(4px);
 }

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

@@ -1,6 +1,6 @@
 .mixin (@a: 1px, @b: 50%) {
-  width: @a * 5;
-  height: @b - 1%;
+  width: (@a * 5);
+  height: (@b - 1%);
   args: @arguments;
 }
 .mixin (@a: 1px, @b: 50%) when (@b > 75%){
@@ -22,9 +22,9 @@
 }
 
 .mixin2 (@a: 1px, @b: 50%, @c: 50) {
-  width: @a * 5;
-  height: @b - 1%;
-  color: #000000 + @c;
+  width: (@a * 5);
+  height: (@b - 1%);
+  color: (#000000 + @c);
 }
 
 .named-args2 {

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

@@ -4,11 +4,11 @@
 
 .mix (@a: 10) {
   .inner {
-    height: @a * 10;
+    height: (@a * 10);
 
     .innest {
       width: @a;  
-      .mix-inner(@a * 2);
+      .mix-inner((@a * 2));
     }  
   }
 }

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

@@ -79,7 +79,7 @@
 
 
 .border-radius (@r) {
-    both: @r * 10;
+    both: (@r * 10);
 }
 .border-radius (@r, left) {
     left: @r;

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

@@ -110,5 +110,5 @@ h3 { .margin_between(15px, 5px); }
 .button { 
     .paddingFloat(((10px + 12) * 2));
 
-    &.large { .paddingFloat((10em * 2) * 2); }
+    &.large { .paddingFloat(((10em * 2) * 2)); }
 }

data/lib/less/js/test/less/operations.less

@@ -1,35 +1,35 @@
 #operations {
-  color: #110000 + #000011 + #001100; // #111111
-  height: 10px / 2px + 6px - 1px * 2; // 9px
-  width: 2 * 4 - 5em; // 3em
+  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;
+    height: (10px / 2px+6px-1px*2);
+    width: (2  * 4-5em);
   }
-  substraction: 20 - 10 - 5 - 5; // 0
-  division: 20 / 5 / 4; // 1
+  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
+  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%);
+  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
+  height: (2px + @z); // 0px
+  width: (2px - @z); // 4px
 }
 
 .shorthands {
@@ -37,26 +37,26 @@
 }
 
 .rem-dimensions {
-  font-size: 20rem / 5 + 1.5rem; // 5.5rem
+  font-size: (20rem / 5 + 1.5rem); // 5.5rem
 }
 
 .colors {
   color: #123; // #112233
-  border-color: #234 + #111111; // #334455
-  background-color: #222222 - #fff; // #000000
+  border-color: (#234 + #111111); // #334455
+  background-color: (#222222 - #fff); // #000000
   .other {
-    color: 2 * #111; // #222222
-    border-color: #333333 / 3 + #111; // #222222
+    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
+    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
 }

data/lib/less/js/test/less/parens.less

@@ -3,21 +3,36 @@
   border: (@var * 2) solid black;
   margin: (@var * 1) (@var + 2) (4 * 4) 3;
   width: (6 * 6);
-  padding: 2px (6px * 6px);
+  padding: 2px (6 * 6px);
 }
 
 .more-parens {
   @var: (2 * 2);
   padding: (2 * @var) 4 4 (@var * 1px);
-  width: (@var * @var) * 6;
-  height: (7 * 7) + (8 * 8);
-  margin: 4 * (5 + 5) / 2 - (@var * 2);
+  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;
+  height: ((2 + 3) * (2 + 3) / (9 - 4)) + 1;
 }
 
 .mixed-units {

data/lib/less/js/test/less/selectors.less

@@ -107,12 +107,8 @@ a {
   ::bnord {color: red }
   &::bnord {color: red }
 }
-// selector interpolation - deprecated
+// selector interpolation
 @theme: blood;
-(~".@{theme}") {
-  color: red;
-}
-// selector interpolation - new format
 @selector: ~".@{theme}";
 @{selector} {
   color:red;
@@ -126,11 +122,22 @@ a {
   }
 }
 @num: 3;
-:nth-child(@{num}):nth-child(@num) {
-	second-use: deprecated;
+:nth-child(@{num}) {
+	selector: interpolated;
 }
 .test {
   &:nth-child(odd):not(:nth-child(3)) {
     color: #ff0000;
   }
+}
+[prop],
+[prop="value@{num}"],
+[prop*="val@{num}"],
+[|prop~="val@{num}"],
+[*|prop$="val@{num}"],
+[ns|prop^="val@{num}"],
+[@{num}^="val@{num}"],
+[@{num}=@{num}],
+[@{num}] {
+  attributes: yes;
 }

data/lib/less/js/test/less/urls.less

@@ -5,6 +5,8 @@
 }
 #shorthands {
   background: url("http://www.lesscss.org/spec.html") no-repeat 0 4px;
+  background: url("img.jpg") center / 100px;
+  background: #fff url(image.png) center / 1px 100px repeat-x scroll content-box padding-box;
 }
 #misc {
   background-image: url(images/image.jpg);
@@ -31,3 +33,25 @@
 }
 
 @import "import/import-and-relative-paths-test";
+
+#data-uri {
+  uri: data-uri('image/jpeg;base64', '../data/image.jpg');
+}
+
+#data-uri-guess {
+  uri: data-uri('../data/image.jpg');
+}
+
+#data-uri-ascii {
+  uri-1: data-uri('text/html', '../data/page.html');
+  uri-2: data-uri('../data/page.html');
+}
+
+#data-uri-toobig {
+  uri: data-uri('../data/data-uri-fail.png');
+}
+.add_an_import(@file_to_import) {
+@import "@{file_to_import}";
+}
+
+.add_an_import("file.css");

data/lib/less/js/test/less/variables.less

@@ -1,10 +1,11 @@
 @a: 2;
-@x: @a * @a;
-@y: @x + 1;
-@z: @x * 2 + @y;
+@x: (@a * @a);
+@y: (@x + 1);
+@z: (@x * 2 + @y);
+@var: -1;
 
 .variables {
-  width: @z + 1cm; // 14cm
+  width: (@z + 1cm); // 14cm
 }
 
 @b: @a * 10;
@@ -15,22 +16,28 @@
 
 @quotes: "~" "~";
 @q: @quotes;
+@onePixel: 1px;
 
 .variables {
-  height: @b + @x + 0px; // 24px
+  height: (@b + @x + 0px); // 24px
   color: @c;
   font-family: @f;
   quotes: @q;
 }
 
-.redefinition {
-    @var: 4;
-    @var: 2;
-    @var: 3;
-    three: @var;
+.redef {
+    @var: 0;
+	.inition {
+		@var: 4;
+		@var: 2;
+		three: @var;
+		@var: 3;
+	}
+	zero: @var;
 }
 
 .values {
+	minus-one: @var;
     @a: 'Trebuchet';
     @multi: 'A', B, C;
     font-family: @a, @a, @a;
@@ -43,11 +50,34 @@
     @name: 'var';
     name: @@name;
 }
+
 .alpha {
     @var: 42;
     filter: alpha(opacity=@var);
 }
 
-a:nth-child(@a) {
-    border: 1px;
+.polluteMixin() {
+    @a: 'pollution';
+}
+.testPollution {
+    @a: 'no-pollution';
+    a: @a;
+	.polluteMixin();
+	a: @a;
+}
+
+.units {
+  width: @onePixel;
+  same-unit-as-previously: (@onePixel / @onePixel);
+  square-pixel-divided: (@onePixel * @onePixel / @onePixel);
+  odd-unit: unit((@onePixel * 4em / 2cm));
+  percentage: (10 * 50%);
+  pixels: (50px * 10);
+  conversion-metric-a: (20mm + 1cm);
+  conversion-metric-b: (1cm + 20mm);
+  conversion-imperial: (1in + 72pt + 6pc);
+  custom-unit: (42octocats * 10);
+  custom-unit-cancelling: (8cats * 9dogs / 4cats);
+  mix-units: (1px + 1em);
+  invalid-units: (1px * 1px);
 }