@less/test-data 4.8.1 → 4.9.0

package/package.json

@@ -3,7 +3,7 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"version": "4.8.1",
+	"version": "4.9.0",
 	"description": "Less files and CSS results",
 	"author": "Alexis Sellier <self@cloudhead.net>",
 	"contributors": [

package/tests-config/js-type-errors/js-type-error.txt

@@ -1,4 +1,4 @@
-SyntaxError: JavaScript evaluation error: 'TypeError: Cannot read property 'toJS' of undefined' in {path}js-type-error.less on line 2, column 8:
+SyntaxError: JavaScript evaluation error: 'TypeError: Cannot read properties of undefined (reading 'toJS')' in {path}js-type-error.less on line 2, column 8:
 1 .scope {
 2   var: `this.foo.toJS`;
 3 }

package/tests-config/rootpath-escape-interpolation/rootpath-escape-interpolation.css

@@ -0,0 +1,8 @@
+#rootpath-escape-interpolation {
+  plain-unquoted: url(http://example.com/a\(b\)\ c/relative/path);
+  interp-unquoted: url(http://example.com/a\(b\)\ c/images/path);
+  lookup-unquoted: url(http://example.com/a\(b\)\ c/images/path);
+  plain-quoted: url("http://example.com/a(b) c/relative/path");
+  interp-quoted: url("http://example.com/a(b) c/images/path");
+  lookup-quoted: url("http://example.com/a(b) c/images/path");
+}

package/tests-config/rootpath-escape-interpolation/rootpath-escape-interpolation.less

@@ -0,0 +1,24 @@
+// A rewritten rootpath is escaped only for *unquoted* url() values, so the node
+// produced for an interpolated unquoted body must not read as quoted. Giving it a
+// real quote character suppressed the escaping and emitted the parentheses and
+// space raw, producing a malformed url().
+//
+// The rootpath here deliberately contains `(`, `)` and a space — the characters
+// `escapePath` handles — so quoted and unquoted forms cannot look alike.
+
+@dir: images;
+@paths: {
+  dir: images;
+};
+
+#rootpath-escape-interpolation {
+  // unquoted: rootpath must be escaped
+  plain-unquoted: url(relative/path);
+  interp-unquoted: url(@{dir}/path);
+  lookup-unquoted: url(@{paths[dir]}/path);
+
+  // quoted: rootpath must not be escaped
+  plain-quoted: url("relative/path");
+  interp-quoted: url("@{dir}/path");
+  lookup-quoted: url("@{paths[dir]}/path");
+}

package/tests-config/rootpath-escape-interpolation/styles.config.cjs

@@ -0,0 +1,8 @@
+module.exports = {
+  language: {
+    less: {
+      "rootpath": "http://example.com/a(b) c/",
+      "rewriteUrls": "all"
+    }
+  }
+};

package/tests-config/sourcemaps/styles.config.cjs

@@ -3,7 +3,7 @@ module.exports = {
         less: {
             math: 'strict',
             strictUnits: true,
-            sourceMap: true,
+            sourceMap: {},
             globalVars: {
                 '@my-color': 'red'
             }

package/tests-config/sourcemaps/url-interpolation/styles.config.cjs

@@ -0,0 +1,9 @@
+module.exports = {
+    language: {
+        less: {
+            math: 'strict',
+            strictUnits: true,
+            sourceMap: true
+        }
+    }
+};

package/tests-config/sourcemaps/url-interpolation/url-interpolation.css

@@ -0,0 +1,13 @@
+.literal {
+  background: url(literal/one.png);
+}
+.interpolated {
+  background: url(images/two.png);
+}
+.interpolated-lookup {
+  background: url(assets/three.png);
+}
+.quoted-interpolated {
+  background: url("images/four.png");
+}
+/*# sourceMappingURL=url-interpolation.css.map */

package/tests-config/sourcemaps/url-interpolation/url-interpolation.less

@@ -0,0 +1,24 @@
+// Interpolated unquoted url() bodies are parsed into an escaped Quoted rather
+// than the Anonymous node used for literal ones, so this pins that the swap does
+// not change how url() values are mapped. All three spellings should keep the
+// same mapping structure as each other.
+@dir: images;
+@paths: {
+  dir: assets;
+};
+
+.literal {
+  background: url(literal/one.png);
+}
+
+.interpolated {
+  background: url(@{dir}/two.png);
+}
+
+.interpolated-lookup {
+  background: url(@{paths[dir]}/three.png);
+}
+
+.quoted-interpolated {
+  background: url("@{dir}/four.png");
+}

package/tests-config/sourcemaps-variable-selector/styles.config.cjs

@@ -3,7 +3,7 @@ module.exports = {
         less: {
             math: 'strict',
             strictUnits: true,
-            sourceMap: true
+            sourceMap: {}
         }
     }
 };

package/tests-error/eval/property-undefined.txt

@@ -2,4 +2,3 @@ NameError: Property '$undefined-prop' is undefined in {path}property-undefined.l
 1 .test {
 2   value: $undefined-prop;
 3 }
-

package/tests-error/eval/recursive-property.txt

@@ -2,4 +2,3 @@ NameError: Error evaluating function `darken`: Recursive property reference for
 1 .test {
 2   color: darken($color, 10%);
 3 }
-

package/tests-error/parse/property-interpolation-lookup.less

@@ -0,0 +1,8 @@
+// Properties have no lookup grammar: `entities.property` parses `$name` with no
+// chaining, and nothing can hold a ruleset to look into. `${name[key]}` must
+// therefore be rejected rather than reaching the property resolver, where it
+// produced a misleading undefined-property error for undefined syntax.
+.a {
+  color: red;
+  ${color[k]}: value;
+}

package/tests-error/parse/property-interpolation-lookup.txt

@@ -0,0 +1,4 @@
+ParseError: Unrecognised input in {path}property-interpolation-lookup.less on line 7, column 3:
+6   color: red;
+7   ${color[k]}: value;
+8 }

package/tests-unit/at-rule-variable-deprecated/at-rule-variable-deprecated.css

@@ -43,3 +43,41 @@
     color: red;
   }
 }
+@media only screen and (max-width: 300px) {
+  .lookup-media {
+    width: 240px;
+  }
+}
+@keyframes shrinker {
+  from {
+    font-size: 15px;
+  }
+  to {
+    font-size: 12px;
+  }
+}
+@supports (display: grid) {
+  .lookup-supports {
+    display: grid;
+  }
+}
+@layer overrides {
+  .lookup-layered {
+    color: blue;
+  }
+}
+@media (min-width: 900px) {
+  .lookup-chained {
+    width: 900px;
+  }
+}
+@supports (width: 500px) {
+  .lookup-value-position {
+    width: 500px;
+  }
+}
+@supports (width: 900px) {
+  .lookup-value-position-chained {
+    width: 900px;
+  }
+}

package/tests-unit/at-rule-variable-deprecated/at-rule-variable-deprecated.less

@@ -74,3 +74,73 @@
     color: red;
   }
 }
+
+// --- bare `[...]` lookups in the same structural positions ---
+// A lookup parses into a NamespaceValue rather than a Variable. These were
+// silently exempt from the deprecation until the node-type test was widened,
+// so every position is covered explicitly here.
+@lookup: {
+  query: ~"only screen and (max-width: 300px)";
+  anim: shrinker;
+  supported: ~"(display: grid)";
+  layer-name: overrides;
+  @deep: {
+    query: ~"(min-width: 900px)";
+  }
+};
+
+@media @lookup[query] {
+  .lookup-media {
+    width: 240px;
+  }
+}
+
+@keyframes @lookup[anim] {
+  from { font-size: 15px; }
+  to   { font-size: 12px; }
+}
+
+@supports @lookup[supported] {
+  .lookup-supports {
+    display: grid;
+  }
+}
+
+@layer @lookup[layer-name] {
+  .lookup-layered {
+    color: blue;
+  }
+}
+
+// chained lookup — still one deprecation, not one per segment
+@media @lookup[@deep][query] {
+  .lookup-chained {
+    width: 900px;
+  }
+}
+
+// A lookup in a declaration value inside `(...)` stays a value position and is
+// not deprecated, mirroring the `@disp` case above.
+//
+// `@supports` scans its prelude as text, so a bare lookup reaches the permissive
+// regex rather than being parsed structurally. Matching only `@values` used to
+// resolve it to the whole ruleset and leave `[size]` behind, rendering
+// `(width: [size])`. Both the flat and chained forms are covered here.
+@values: {
+  size: 500px;
+  @deep: {
+    size: 900px;
+  }
+};
+
+@supports (width: @values[size]) {
+  .lookup-value-position {
+    width: 500px;
+  }
+}
+
+@supports (width: @values[@deep][size]) {
+  .lookup-value-position-chained {
+    width: 900px;
+  }
+}

package/tests-unit/functions/functions.css

@@ -8,6 +8,8 @@
 }
 #built-in {
   escaped: -Some::weird(#thing, y);
+  escaped-direct: a%20b%28c%29%3Dd%3Ae%23f%3Bg;
+  escaped-svg-literal: url("data:image/svg+xml,%3Csvg%20fill%3D%22red%22%3E%3C/svg%3E");
   lighten: #ffcccc;
   lighten-relative: #ff6666;
   darken: #330000;

package/tests-unit/functions/functions.less

@@ -11,7 +11,10 @@
 
 #built-in {
   @r: 32;
+  @escaped-svg-literal: escape('<svg fill="red"></svg>');
   escaped: e("-Some::weird(#thing, y)");
+  escaped-direct: escape('a b(c)=d:e#f;g');
+  escaped-svg-literal: url("data:image/svg+xml,@{escaped-svg-literal}");
   lighten: lighten(#ff0000, 40%);
   lighten-relative: lighten(#ff0000, 40%, relative);
   darken: darken(#ff0000, 40%);

package/tests-unit/lookup-interpolation/lookup-interpolation.css

@@ -0,0 +1,60 @@
+.quoted {
+  single: "card";
+  chained: "inner";
+  quoted-value: "deep";
+  indirect-key: "indirect-hit";
+  empty-key: "tail";
+  chained-empty-key: "nested-tail";
+  surrounded: "a-card-b";
+  twice: "card/blue";
+}
+.url {
+  quoted: url("/assets/img/hero.png");
+  unquoted: url(/assets/img/plain.png);
+  unquoted-plain: url(/plain/no-lookup.png);
+  untouched: url(/static/literal.png);
+  untouched-quoted: url("/static/literal.png");
+  data-uri: url(data:image/svg+xml;base64,AAAA);
+}
+.property-interpolation {
+  color: red;
+  from-property: "red";
+  surrounded: "a-red-b";
+  bare: red;
+}
+.card {
+  a: b;
+}
+.inner {
+  c: d;
+}
+.property {
+  card: from-lookup;
+  inner: from-chained-lookup;
+}
+@keyframes card {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@media (min-width: 768px) {
+  .responsive {
+    e: f;
+  }
+}
+.custom-property {
+  --from-lookup: /assets/img;
+  --from-chained: inner;
+}
+.recursive {
+  g: "card";
+}
+.plain {
+  h: "name";
+}
+.name {
+  i: j;
+}

package/tests-unit/lookup-interpolation/lookup-interpolation.less

@@ -0,0 +1,127 @@
+// `[...]` lookups inside `@{...}` interpolation, backported from Less 5.x.
+//
+// Before the backport the parser accepted only `@{name}`, so every form below
+// either failed to parse or — in string and url positions — silently emitted the
+// interpolation verbatim into the output. The url/quoted cases in particular are
+// regression coverage for that silent pass-through: a wrong-output bug that
+// produced no error and no warning.
+//
+// The bare `@map[key]` spelling is covered by at-rule-variable-deprecated.less,
+// where it is deprecated in structural positions.
+
+@sizes: {
+  tablet: 768px;
+  name: card;
+  @name: indirect-hit;
+  last-entry: tail;
+};
+
+@theme: {
+  color: blue;
+  @nested: {
+    name: inner;
+    label: "deep";
+    last-entry: nested-tail;
+  }
+};
+
+@paths: {
+  img: "/assets/img";
+};
+
+@which: name;
+
+// --- quoted strings ---
+.quoted {
+  single: "@{sizes[name]}";
+  chained: "@{theme[@nested][name]}";
+  quoted-value: "@{theme[@nested][label]}";
+  indirect-key: "@{sizes[@@which]}";
+  empty-key: "@{sizes[]}";
+  chained-empty-key: "@{theme[@nested][]}";
+  surrounded: "a-@{sizes[name]}-b";
+  twice: "@{sizes[name]}/@{theme[color]}";
+}
+
+// --- url() — the silent pass-through regression ---
+// An unquoted url() body was raw text in an Anonymous node, so neither the plain
+// nor the lookup interpolation resolved there while the quoted form did. Both
+// spellings are covered so the two cannot diverge again.
+@plain-path: "/plain";
+
+.url {
+  quoted: url("@{paths[img]}/hero.png");
+  unquoted: url(@{paths[img]}/plain.png);
+  unquoted-plain: url(@{plain-path}/no-lookup.png);
+  untouched: url(/static/literal.png);
+  untouched-quoted: url("/static/literal.png");
+  data-uri: url(data:image/svg+xml;base64,AAAA);
+}
+
+// --- ${...} property interpolation ---
+// Properties have no lookup grammar: `$name[key]` is a property reference followed
+// by literal `[key]`, and `prop: { … }` is a parse error in every scope, so nothing
+// can hold a ruleset to look into. `${...}` therefore stays narrow while `@{...}`
+// carries lookups, and the plain form must keep working unchanged.
+.property-interpolation {
+  color: red;
+  from-property: "${color}";
+  surrounded: "a-${color}-b";
+  bare: $color;
+}
+
+// --- selector interpolation ---
+.@{sizes[name]} {
+  a: b;
+}
+
+.@{theme[@nested][name]} {
+  c: d;
+}
+
+// --- property name interpolation ---
+.property {
+  @{sizes[name]}: from-lookup;
+  @{theme[@nested][name]}: from-chained-lookup;
+}
+
+// --- at-rule name and prelude ---
+@keyframes @{sizes[name]} {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@queries: {
+  tablet: ~"(min-width: 768px)";
+};
+
+@media @{queries[tablet]} {
+  .responsive {
+    e: f;
+  }
+}
+
+// --- custom property values ---
+.custom-property {
+  --from-lookup: @{paths[img]};
+  --from-chained: @{theme[@nested][name]};
+}
+
+// --- interpolation still resolves to a fixpoint ---
+// The inner `@{...}` arrives from a variable's value at eval time, so it is not
+// present in the source text of the outer reference.
+@inner: card;
+@outer: ~"@{inner}";
+
+.recursive {
+  g: "@{outer}";
+}
+
+// --- plain interpolation is unaffected by the lookup support ---
+.plain {
+  h: "@{which}";
+}
+
+.@{which} {
+  i: j;
+}

package/tests-unit/media-nested-type/media-nested-type.css

@@ -0,0 +1,40 @@
+@media screen and (max-width: 500px) {
+  .a {
+    color: red;
+  }
+}
+@media only screen and (min-width: 100px) {
+  .b {
+    color: blue;
+  }
+}
+@media all and (max-width: 9px) {
+  .c {
+    color: green;
+  }
+}
+@media print and (color) and (min-width: 1px) {
+  .d {
+    color: black;
+  }
+}
+@media screen and (max-width: 500px) {
+  .e {
+    color: red;
+  }
+}
+@media (max-width: 500px) and (min-width: 100px) {
+  .f {
+    color: red;
+  }
+}
+@media tester and (max-width: 500px) {
+  .g {
+    color: red;
+  }
+}
+@media screen and (max-width: 500px) {
+  .h {
+    color: red;
+  }
+}

package/tests-unit/media-nested-type/media-nested-type.less

@@ -0,0 +1,51 @@
+// A media type nested inside conditions must lead the flattened query,
+// otherwise the result is invalid CSS (issue #3694, #3764).
+@media (max-width: 500px) {
+  @media screen {
+    .a { color: red; }
+  }
+}
+@media (min-width: 100px) {
+  @media only screen {
+    .b { color: blue; }
+  }
+}
+@media (max-width: 9px) {
+  @media all {
+    .c { color: green; }
+  }
+}
+@media (min-width: 1px) {
+  @media print and (color) {
+    .d { color: black; }
+  }
+}
+
+// Already-correct ordering is preserved.
+@media screen {
+  @media (max-width: 500px) {
+    .e { color: red; }
+  }
+}
+
+// Queries without a media type are left untouched.
+@media (max-width: 500px) {
+  @media (min-width: 100px) {
+    .f { color: red; }
+  }
+}
+
+// Unknown media types are valid CSS non-matches, so they reorder too.
+@media (max-width: 500px) {
+  @media tester {
+    .g { color: red; }
+  }
+}
+
+// An escaped-string feature condition (Anonymous) must not be mistaken for a media type.
+@fc: ~"(max-width: 500px)";
+@media @fc {
+  @media screen {
+    .h { color: red; }
+  }
+}

package/tests-config/js-type-errors/js-type-error-2.txt

@@ -1,4 +0,0 @@
-SyntaxError: JavaScript evaluation error: 'TypeError: Cannot read properties of undefined (reading 'toJS')' in {path}js-type-error.less on line 2, column 8:
-1 .scope {
-2   var: `this.foo.toJS`;
-3 }