less 2.4.0 → 2.5.3

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

package/test/less-bom/selectors.less

@@ -0,0 +1,184 @@
+h1, h2, h3 {
+  a, p {
+    &:hover {
+      color: red;
+    }
+  }
+}
+
+#all { color: blue; }
+#the { color: blue; }
+#same { color: blue; }
+
+ul, li, div, q, blockquote, textarea {
+  margin: 0;
+}
+
+td {
+  margin: 0;
+  padding: 0;
+}
+
+td, input {
+  line-height: 1em;
+}
+
+a {
+  color: red;
+
+  &:hover { color: blue; }
+
+  div & { color: green; }
+
+  p & span { color: yellow; }
+}
+
+.foo {
+  .bar, .baz {
+    & .qux {
+      display: block;
+    }
+    .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
+@theme: blood;
+@selector: ~".@{theme}";
+@{selector} {
+  color:red;
+}
+@{selector}red {
+  color: green;
+}
+.red {
+  #@{theme}.@{theme}&.black:@{theme} {
+    color:black;
+  }
+}
+@num: 3;
+:nth-child(@{num}) {
+  selector: interpolated;
+}
+.test {
+  &:nth-child(@{num}) {
+    selector: interpolated;
+  }
+  &:nth-child(odd):not(:nth-child(3)) {
+    color: #ff0000;
+  }
+ }
+[prop],
+[prop=10%],
+[prop="value@{num}"],
+[prop*="val@{num}"],
+[|prop~="val@{num}"],
+[*|prop$="val@{num}"],
+[ns|prop^="val@{num}"],
+[@{num}^="val@{num}"],
+[@{num}=@{num}],
+[@{num}] {
+  attributes: yes;
+}
+
+/*
+Large comment means chunk will be emitted after } which means chunk will begin with whitespace...
+blank blank blank blank blank blank blank blank blank blank blank blank blank blank blank blank
+blank blank blank blank blank blank blank blank blank blank blank blank blank blank blank blank
+blank blank blank blank blank blank blank blank blank blank blank blank blank blank blank blank
+blank blank blank blank blank blank blank blank blank blank blank blank blank blank blank blank
+blank blank blank blank blank blank blank blank blank blank blank blank blank blank blank blank
+*/
+@{selector} {
+  color: red;
+}
+.only-nested {
+  .level2 {
+    .foo:not(.tst&:hover) {
+      test: only-nested;
+    }
+  }
+}
+.nestend-and-non-nested {
+  .foo&:not(.tst&:hover) {
+    test: nestend-and-non-nested;
+  }
+}
+.selector:not(&:hover) {
+  test: global scope;
+}
+// https://github.com/less/less.js/issues/2206
+.extend-this {
+  content: '\2661';
+}
+.first-level {
+  .second-level {
+    .active&:extend(.extend-this) { }
+    &.active2:extend(.extend-this) { }
+  }
+}

package/test/less-bom/sourcemaps/basic.json

@@ -0,0 +1,3 @@
+{
+    "my-color": "red"
+}

package/test/less-bom/sourcemaps/basic.less

@@ -0,0 +1,27 @@
+@var: black;
+
+.a() {
+  color: red;
+}
+
+.b {
+  color: green;
+  .a();
+  color: blue;
+  background: @var;
+}
+
+.a, .b {
+  background: green;
+  .c, .d {
+    background: gray;
+    & + & {
+      color: red;
+    }
+  }
+}
+
+.extend:extend(.a all) {
+  color: pink;
+}
+@import (inline) "imported.css";

package/test/less-bom/sourcemaps/imported.css

@@ -0,0 +1,7 @@
+/*comments*/
+.unused-css {
+    color: white;
+}
+.imported {
+    color: black;
+}

package/test/less-bom/sourcemaps-empty/empty.less

@@ -0,0 +1 @@
+

package/test/less-bom/sourcemaps-empty/var-defs.less

@@ -0,0 +1 @@
+@test-var: 'something';

package/test/less-bom/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-bom/strict-units/strict-units.less

@@ -0,0 +1,4 @@
+.units {
+  cancels-to-nothing: (1px / 1px);
+  cancels: ((((10px / 5em) / 1px) * 3em) * 1px);
+}

package/test/less-bom/strings.less

@@ -0,0 +1,73 @@
+#strings {
+  background-image: url("http://son-of-a-banana.com");
+  quotes: "~" "~";
+  content: "#*%:&^,)!.(~*})";
+  empty: "";
+  brackets: "{" "}";
+  escapes: "\"hello\" \\world";
+  escapes2: "\"llo";
+}
+#comments {
+  content: "/* hello */ // not-so-secret";
+}
+#single-quote {
+  quotes: "'" "'";
+  content: '""#!&""';
+  empty: '';
+  semi-colon: ';';
+}
+#escaped {
+  filter: ~"DX.Transform.MS.BS.filter(opacity=50)";
+}
+#one-line { image: url(http://tooks.com) }
+#crazy { image: url(http://), "}", url("http://}") }
+#interpolation {
+  @var: '/dev';
+  url: "http://lesscss.org@{var}/image.jpg";
+
+  @var2: 256;
+  url2: "http://lesscss.org/image-@{var2}.jpg";
+
+  @var3: #456;
+  url3: "http://lesscss.org@{var3}";
+
+  @var4: hello;
+  url4: "http://lesscss.org/@{var4}";
+
+  @var5: 54.4px;
+  url5: "http://lesscss.org/@{var5}";
+}
+
+// multiple calls with string interpolation
+
+.mix-mul (@a: green) {
+    color: ~"@{a}";
+}
+.mix-mul-class {
+    .mix-mul(blue);
+    .mix-mul(red);
+    .mix-mul(black);
+    .mix-mul(orange);
+}
+
+@test: Arial, Verdana, San-Serif;
+.watermark {
+  @family: ~"Univers, @{test}";
+  family: @family;
+}
+#iterated-interpolation {
+  @box-small: 10px;
+  @box-large: 100px;
+
+  .mixin { // both ruleset and mixin
+    width: ~"@{box-@{suffix}}";
+    weird: ~"@{box}-@{suffix}}";
+    width-str: "@{box-@{suffix}}";
+    weird-str: "@{box}-@{suffix}}";
+    @box: ~"@{box";
+    @suffix: large;
+  }
+  .interpolation-mixin {
+    .mixin(); //call the above as mixin
+  }
+}

package/test/less-bom/url-args/urls.less

@@ -0,0 +1,63 @@
+@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;
+  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);
+}
+#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);
+  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/imports/font";
+
+#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');
+}
+
+#svg-functions {
+  background-image: svg-gradient(to bottom, black, white);
+  background-image: svg-gradient(to bottom, black, orange 3%, white);
+  @green_5: green 5%;
+  @orange_percentage: 3%;
+  @orange_color: orange;
+  background-image: svg-gradient(to bottom, (mix(black, white) + #444) 1%, @orange_color @orange_percentage, ((@green_5)), white 95%);
+}
+
+#data-uri-with-spaces {
+  background-image: url( data:image/x-png,f9difSSFIIGFIFJD1f982FSDKAA9==);
+  background-image: url( ' data:image/x-png,f9difSSFIIGFIFJD1f982FSDKAA9==');
+}

package/test/less-bom/urls.less

@@ -0,0 +1,94 @@
+@import "nested-gradient-with-svg-gradient/mixin-consumer.less";
+
+@font-face {
+  src: url("/fonts/garamond-pro.ttf");
+  src: local(Futura-Medium),
+       url(fonts.svg#MyGeometricModern) format("svg");
+  not-a-comment: url(//z);
+}
+#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);
+}
+#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);
+  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";
+
+#relative-url-import {
+    .unquoted-relative-path-bg;
+    .quoted-relative-path-border-image;
+}
+
+#data-uri {
+  uri: data-uri('image/jpeg;base64', '../data/image.jpg');
+  @var: replace('../data/replace.jpg', "replace", "image");
+  background-image: data-uri(@var), data-uri(replace('../data/image.filext', "filext", "jpg"));
+
+  uri-fragment: data-uri('image/jpeg;base64', '../data/image.jpg#fragment');
+}
+
+#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');
+}
+
+#file-functions {
+  uri: data-uri('../data/data-uri-fail.png');
+  svg-not-base-64: data-uri('../data/image.svg');
+  size: image-size('../data/data-uri-fail.png');
+  width: image-width('../data/data-uri-fail.png');
+  height: image-height('../data/data-uri-fail.png');
+}
+.add_an_import(@file_to_import) {
+@import "@{file_to_import}";
+}
+
+.add_an_import("file.css");
+
+#svg-functions {
+  background-image: svg-gradient(to bottom, black, white);
+  background-image: svg-gradient(to bottom, black, orange 3%, white);
+  @green_5: green 5%;
+  @orange_percentage: 3%;
+  @orange_color: orange;
+  background-image: svg-gradient(to bottom, (mix(black, white) + #444) 1%, @orange_color @orange_percentage, ((@green_5)), white 95%);
+}
+//it should work also inside @font-face #2035
+@font-face {
+  font-family: 'MyWebFont';
+  src: url(webfont.eot);
+  src+: url('webfont.eot?#iefix');
+  src+_: format('embedded-opentype');
+  src+: url('webfont.woff') format('woff');
+  src+: format('truetype');
+  src+_: url('webfont.ttf');
+  src+: url('webfont.svg#svgFontName') format('svg');
+}

package/test/less-bom/variables-in-at-rules.less

@@ -0,0 +1,20 @@
+
+@Eight: 8;
+@charset "UTF-@{Eight}";
+
+@ns: less;
+@namespace @ns "http://lesscss.org";
+
+@name: enlarger;
+@keyframes @name {
+    from {font-size: 12px;}
+    to   {font-size: 15px;}
+}
+
+.m(reducer);
+.m(@name) {
+    @-webkit-keyframes @name {
+        from {font-size: 13px;}
+        to   {font-size: 10px;}
+    }
+}