@less/test-data 4.9.1 → 5.0.0-alpha.10

package/tests-unit/functions/legacy/functions.less

@@ -0,0 +1,296 @@
+#built-in {
+  @r: 32;
+  escaped: e("-Some::weird(#thing, y)");
+  lighten: lighten(#ff0000, 40%);
+  lighten-relative: lighten(#ff0000, 40%, relative);
+  darken: darken(#ff0000, 40%);
+  darken-relative: darken(#ff0000, 40%, relative);
+  saturate: saturate(#29332f, 20%);
+  saturate-relative: saturate(#29332f, 20%, relative);
+  desaturate: desaturate(#203c31, 20%);
+  desaturate-relative: desaturate(#203c31, 20%, relative);
+  greyscale: greyscale(#203c31);
+  hsl-clamp: hsl(380, 150%, 150%);
+  spin-p: spin(hsl(340, 50%, 50%), 40);
+  spin-n: spin(hsl(30, 50%, 50%), -40);
+  luma-white: luma(#fff);
+  luma-black: luma(#000);
+  luma-black-alpha: luma(rgba(0,0,0,0.5));
+  luma-red: luma(#ff0000);
+  luma-green: luma(#00ff00);
+  luma-blue: luma(#0000ff);
+  luma-yellow: luma(#ffff00);
+  luma-cyan: luma(#00ffff);
+  luma-differs-from-luminance: luma(#ff3600);
+  luminance-white: luma(#fff);
+  luminance-black: luma(#000);
+  luminance-black-alpha: luma(rgba(0,0,0,0.5));
+  luminance-red: luma(#ff0000);
+  luminance-differs-from-luma: luminance(#ff3600);
+  contrast-filter: contrast(30%);
+  saturate-filter: saturate(5%);
+  contrast-white: contrast(#fff);
+  contrast-black: contrast(#000);
+  contrast-red: contrast(#ff0000);
+  contrast-green: contrast(#00ff00);
+  contrast-blue: contrast(#0000ff);
+  contrast-yellow: contrast(#ffff00);
+  contrast-cyan: contrast(#00ffff);
+  contrast-light: contrast(#fff, #111111, #eeeeee);
+  contrast-dark: contrast(#000, #111111, #eeeeee);
+  contrast-wrongorder: contrast(#fff, #eeeeee, #111111, 0.5);
+  contrast-light-thresh: contrast(#fff, #111111, #eeeeee, 0.5);
+  contrast-dark-thresh: contrast(#000, #111111, #eeeeee, 0.5);
+  contrast-high-thresh: contrast(#555, #111111, #eeeeee, 0.6);
+  contrast-low-thresh: contrast(#555, #111111, #eeeeee, 0.09);
+  contrast-light-thresh-per: contrast(#fff, #111111, #eeeeee, 50%);
+  contrast-dark-thresh-per: contrast(#000, #111111, #eeeeee, 50%);
+  contrast-high-thresh-per: contrast(#555, #111111, #eeeeee, 60%);
+  contrast-low-thresh-per: contrast(#555, #111111, #eeeeee, 9%);
+  replace: replace("Hello, Mars.", "Mars\.", "World!");
+  replace-captured: replace("This is a string.", "(string)\.$", "new $1.");
+  replace-with-flags: replace("One + one = 4", "one", "2", "gi");
+  replace-single-quoted: replace('foo-1', "1", "2");
+  replace-escaped-string: replace(~"bar-1", "1", "2");
+  replace-keyword: replace(baz-1, "1", "2");
+  replace-with-color: replace("007", "0", #135, g);
+  replace-with-number: replace("007", "0", 2em);
+  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);
+  format-single-quoted: %('hello %s', "single world");
+  format-escaped-string: %(~"hello %s", "escaped world");
+  format-color-as-string: %("%s", #123);
+  format-number-as-string: %("%s", 4px);
+  eformat: e(%("rgb(%d, %d, %d)", @r, 128, 64));
+
+  unitless: unit(12px);
+  unit: unit((13px + 1px), em);
+  unitpercentage: unit(100, %);
+
+  get-unit: get-unit(10px);
+  get-unit-empty: get-unit(10);
+
+  hue: hue(hsl(98, 12%, 95%));
+  saturation: saturation(hsl(98, 12%, 95%));
+  lightness: lightness(hsl(98, 12%, 95%));
+  hsvhue: hsvhue(hsv(98, 12%, 95%));
+  hsvsaturation: hsvsaturation(hsv(98, 12%, 95%));
+  hsvvalue: hsvvalue(hsv(98, 12%, 95%));
+  red: red(#f00);
+  green: green(#0f0);
+  blue: blue(#00f);
+  rounded: round((@r/3));
+  rounded-two: round((@r/3), 2);
+  roundedpx: round((10px / 3));
+  roundedpx-three: round((10px / 3), 3);
+  rounded-percentage: round(10.2%);
+  ceil: ceil(10.1px);
+  floor: floor(12.9px);
+  sqrt: sqrt(25px);
+  pi: pi();
+  mod: mod(13m, 11cm); // could take into account units, doesn't at the moment
+  abs: abs(-4%);
+  tan: tan(42deg);
+  sin: sin(10deg);
+  cos: cos(12);
+  atan: atan(tan(0.1rad));
+  atan: convert(acos(cos(34deg)), deg);
+  atan: convert(acos(cos(50grad)), deg);
+  pow: pow(8px, 2);
+  pow: pow(4, 3);
+  pow: pow(3, 3em);
+  min: min(0);
+  min: min(6, 5);
+  min: min(1pt, 3pt);
+  min: min(1cm, 3mm);
+  min: min(6em, 5, 4ex, 3, 2pt, 1);
+  min: min(calc(1 + 1), 1);
+  min: min(~'var(--width), 802px');
+  max: max(1, 3);
+  max: max(3em, 1em, 2em, 5em);
+  max: max(1px, 2, 3em, 4, 5m, 6);
+  max: min(var(--body-max-width), calc(100vw - 20px));
+  max: max(1, calc(1 + 1));
+  max-native: max(10vw, 100px);
+  percentage: percentage((10px / 50));
+  color-quoted-digit: color("#dda0dd");
+  color-quoted-keyword: color("plum");
+  color-color: color(#dda0dd);
+  color-keyword: color(plum);
+  tint: tint(#777777, 13);
+  tint-full: tint(#777777, 100);
+  tint-percent: tint(#777777, 13%);
+  tint-negative: tint(#777777, -13%);
+  shade: shade(#777777, 13);
+  shade-full: shade(#777777, 100);
+  shade-percent: shade(#777777, 13%);
+  shade-negative: shade(#777777, -13%);
+
+  fade-out: fadeout(red, 5%); // support fadeOut and fadeout
+  fade-in: fadein(fadeout(red, 10%), 5%);
+  fade-out-relative: fadeout(red, 5%,relative);
+  fade-in-relative: fadein(fadeout(red, 10%, relative), 5%, relative);
+  fade-out2:  fadeout(fadeout(red, 50%), 50%);
+  fade-out2-relative: fadeout(fadeout(red, 50%, relative), 50%, relative);
+
+  hsv: hsv(5, 50%, 30%);
+  hsva: hsva(3, 50%, 30%, 0.2);
+
+  mix: mix(#ff0000, #ffff00, 80);
+  mix-0: mix(#ff0000, #ffff00, 0);
+  mix-100: mix(#ff0000, #ffff00, 100);
+  mix-weightless: mix(#ff0000, #ffff00);
+  mixt: mix(#ff0000, transparent);
+
+  .is-a {
+    @rules: {
+      color: red;
+    };
+    rules-defined: isdefined(@rules);
+    foo-defined: isdefined(@foo);
+    ruleset: isruleset(@rules);
+    color: iscolor(#ddd);
+    color1: iscolor(red);
+    color2: iscolor(rgb(0, 0, 0));
+    color3: iscolor(transparent);
+    keyword: iskeyword(hello);
+    number: isnumber(32);
+    string: isstring("hello");
+    pixel: ispixel(32px);
+    percent: ispercentage(32%);
+    em: isem(32em);
+    ex: isunit(32ex, ex);
+    rem: isunit(32rem, rem);
+    vw: isunit(32vw, vw);
+    vh: isunit(32vh, vh);
+    vmin: isunit(32vmin, vmin);
+    vmax: isunit(32vmax, vmax);
+    ch: isunit(32ch, ch);
+    cm: isunit(32cm, cm);
+    mm: isunit(32mm, mm);
+    pt: isunit(32pt, pt);
+    q: isunit(32q, q);
+    in: isunit(32in, in);
+    cat: isunit(32cat, cat);
+    no-unit-is-empty: isunit(32, '');
+    case-insensitive-1: isunit(32CAT, cat);
+    case-insensitive-2: isunit(32px, PX);
+  }
+}
+
+#alpha {
+  alpha: darken(hsla(25, 50%, 50%, 0.6), 10%);
+  alpha2: alpha(rgba(3, 4, 5, 0.5));
+  alpha3: alpha(transparent);
+}
+
+#blendmodes {
+  multiply: multiply(#f60000, #f60000);
+  screen: screen(#f60000, #0000f6);
+  overlay: overlay(#f60000, #0000f6);
+  softlight: softlight(#f60000, #ffffff);
+  hardlight: hardlight(#f60000, #0000f6);
+  difference: difference(#f60000, #0000f6);
+  exclusion: exclusion(#f60000, #0000f6);
+  average: average(#f60000, #0000f6);
+  negation: negation(#f60000, #313131);
+}
+
+#extract-and-length {
+  @anon: A B C 1 2 3;
+  extract: extract(@anon, 6) extract(@anon, 5) extract(@anon, 4) extract(@anon, 3) extract(@anon, 2) extract(@anon, 1);
+  length: length(@anon);
+}
+
+#quoted-functions-in-mixin {
+  // Quoted type may have some weird side-effects when used in mixins (#2308)
+  .mixin();
+  .mixin() {
+    replace-double-quoted: replace('foo-1', "1", "2");
+    replace-single-quoted: replace('foo-3', "3", "4");
+    replace-escaped-string: replace(~"bar-1", "1", "2");
+    replace-keyword: replace(baz-1, "1", "2");
+    replace-anonymous: replace(e("qux-1"), "1", "2");
+    format-double-quoted: %("hello %s", "world");
+    format-single-quoted: %('hello %s', "single world");
+    format-escaped-string: %(~"hello %s", "escaped world");
+    format-keyword: %(hello);
+    format-anonymous: %(e("hello %s"), "anonymous world");
+  }
+}
+
+#list-details {
+  @list:
+    a 1, // Some comment
+    b 2;
+
+  length: length(@list);
+  one: extract(@list, 1);
+  @two: extract(@list, 2);
+  two: @two;
+  two-length: length(@two);
+  two-one: extract(@two, 1);
+  two-two: extract(@two, 2);
+}
+@color1: #FFF;/* comment1 */
+@color2: #FFF/* comment2 */;
+html {
+  color: mix(blue, @color1, 50%);
+  color: mix(blue, @color2, 50%);
+}
+
+#boolean {
+  a: boolean(not(2 < 1));
+  b: boolean(not(2 > 1) and (true));
+  c: boolean(not(boolean(true)));
+}
+
+#if {
+  a: if(not(false), 1, 2);
+  b: if(not(true), 1, 2);
+  @block1: if(not(false), {c: 3}, {d: 4}); @block1();
+
+  --e: if(not(true), 5);
+  @f: boolean(3 = 4);
+  f: if(not(@f), 6);
+  g: if(true, 3, 5);
+  h: if(false, 3, 5);
+  i: if(true and isnumber(6), 6, 8);
+  j: if(not(true) and true, 6, 8);
+  k: if(true or true, 1);
+
+  // see: https://github.com/less/less.js/issues/3371
+  @some: foo;
+  l: if((iscolor(@some)), darken(@some, 10%), black);
+
+
+  if((false), {g: 7}); /* results in void */
+
+  @conditional: if((true), {
+    color: green;
+  }, {});
+  @conditional();
+
+  @falsey: if((false), {
+    color: orange;
+  }, {
+    color: purple;
+  });
+  @falsey();
+}
+
+.paren-escapes {
+  list-1: ~(1, 2, 3);
+  length-1: length($list-1);
+  each(~(1 2 3); {
+    item-@{value}: @value + 3;
+  })
+
+  .mixin(@list-1; @list-2) {
+    list-2: @list-1;
+    list-3: @list-2;
+  }
+  .mixin($list-1, ~(7; 8; 9));
+}

package/tests-unit/functions-each/functions-each.css

@@ -8,16 +8,15 @@
   a: b;
 }
 .each {
-  index: 1, 2, 3, 4;
   item1: a;
   item2: b;
   item3: c;
+  index: 1, 2, 3, 4;
   item4: d;
   nest-1-1: 10px 1;
   nest-2-1: 15px 2;
   nest-1-2: 20px 1;
   nest-2-2: 25px 2;
-  padding: 10px 20px 30px 40px;
 }
 .each .nest-anon {
   nest-1-1: a c;
@@ -25,6 +24,9 @@
   nest-2-1: b c;
   nest-2-2: b d;
 }
+.each {
+  padding: 10px 20px 30px 40px;
+}
 .set {
   one: blue;
   two: green;

package/tests-unit/import/import/import-reference.less

@@ -4,7 +4,7 @@
     color: green;
   }
 }
-.only-with-visible,
+.stays-invisible,
 .z {
   color: green;
   &:hover {

package/tests-unit/import/import-reference-issues.css

@@ -8,12 +8,12 @@ show-all-content {
   /*
   tralala
 */
-}
-show-all-content .fix {
-  fix: fix;
-}
-show-all-content .something {
-  inside: something;
+  .fix {
+    fix: fix;
+  }
+  .something {
+    inside: something;
+  }
 }
 #used-namespaced-mixin {
   was: included;

package/tests-unit/import/import-reference.css

@@ -24,13 +24,12 @@ div#id.class[a=one][b=two].class:not(.one) {
 .visible:hover {
   color: green;
 }
-.only-with-visible + .visible,
-.visible + .only-with-visible,
+.visible {
+  color: green;
+}
 .visible + .visible {
   color: green;
 }
-.only-with-visible + .visible .sub,
-.visible + .only-with-visible .sub,
 .visible + .visible .sub {
   color: green;
 }
@@ -44,14 +43,19 @@ div#id.class[a=one][b=two].class:not(.one) {
 }
 .b {
   color: red;
-  color: green;
 }
 .b .c {
   color: green;
 }
+.b {
+  color: green;
+}
 .b:hover {
   color: green;
 }
+.b {
+  color: green;
+}
 .b + .b {
   color: green;
 }

package/tests-unit/import/import.css

@@ -7,7 +7,7 @@
   color: red;
   width: 10px;
   height: 30%;
-  value: 3.141592653589793;
+  value: 3.1415926536;
 }
 @media screen and (max-width: 600px) {
   body {

package/tests-unit/import/legacy/import-reference-issues.css

@@ -0,0 +1,27 @@
+/* Less 4.x output, recorded when this fixture graduated to v5.
+   Historical record only — no test reads this file. */
+
+.test-rule-c {
+  background-color: green;
+}
+.theOnlySelector {
+  shall-have: one selector;
+}
+show-all-content {
+  /*
+  tralala
+*/
+}
+show-all-content .fix {
+  fix: fix;
+}
+show-all-content .something {
+  inside: something;
+}
+#used-namespaced-mixin {
+  was: included;
+  shall-see: another property above;
+}
+call-mixin-with-import-by-reference-inside {
+  the-only-property: nothing-below-this;
+}

package/tests-unit/import/legacy/import-reference.css

@@ -0,0 +1,101 @@
+/* Less 4.x output, recorded when this fixture graduated to v5.
+   Historical record only — no test reads this file. */
+
+input[type="text"].class#id[attr=i32]:not(.one) {
+  color: inherit;
+}
+div#id.class[a=one][b=two].class:not(.one) {
+  color: inherit;
+}
+@media print {
+  .class {
+    color: blue;
+  }
+  .class .sub {
+    width: 42;
+  }
+}
+.visible {
+  color: red;
+}
+.visible .c {
+  color: green;
+}
+.visible {
+  color: green;
+}
+.visible:hover {
+  color: green;
+}
+.visible + .visible {
+  color: green;
+}
+.visible + .visible .sub {
+  color: green;
+}
+@supports (something: else) {
+  .class {
+    something: else;
+  }
+  .nestedToo .class {
+    something: else;
+  }
+}
+.b {
+  color: red;
+}
+.b .c {
+  color: green;
+}
+.b {
+  color: green;
+}
+.b:hover {
+  color: green;
+}
+.b {
+  color: green;
+}
+.b + .b {
+  color: green;
+}
+.b + .b .sub {
+  color: green;
+}
+.y {
+  pulled-in: yes /* inline comment survives */;
+}
+/* comment pulled in */
+.visible {
+  extend: test;
+}
+.test-rule-mediaq-import {
+  color: green;
+  test: 340px;
+}
+@media (max-size: 450px) {
+  .test-rule-mediaq-import {
+    color: red;
+  }
+}
+.test-rule {
+  color: red;
+}
+.test-rule:first-child {
+  color: blue;
+}
+@keyframes some-name {
+  property: value;
+}
+@supports (animation-name: test) {
+  @keyframes some-name {
+    property: value;
+  }
+  .selector {
+    color: red;
+  }
+}
+div {
+  this isn't very valid CSS.
+}
+this isn't very valid CSS.

package/tests-unit/import/styles.config.cjs

@@ -1,7 +1,6 @@
 module.exports = {
   language: {
-    less: {
-      "syncImport": true
-}
-  }
+    less: {}
+  },
+  output: { collapseNesting: false }
 };

package/tests-unit/layer/layer.css

@@ -3,14 +3,18 @@
 @import url("/import/layer-import-4.css") layer(print) print;
 @import url("/import/layer-import-4.css") layer(print) print, (max-width: 600px);
 @import url("/import/layer-import-5.css") layer(features) supports(display: grid);
-@layer {
-  .main::before {
-    color: #f00;
+.main {
+  @layer {
+    &::before {
+      color: #f00;
+    }
   }
 }
 @layer legacy {
-  .sub-rule ul {
-    color: white;
+  .sub-rule {
+    ul {
+      color: white;
+    }
   }
 }
 @layer primevue {
@@ -30,10 +34,10 @@
   body {
     margin: 0;
     font-family: system-ui, sans-serif;
-  }
-  body header {
-    background-color: #f0f0f0;
-    padding: 1rem;
+    header {
+      background-color: #f0f0f0;
+      padding: 1rem;
+    }
   }
 }
 @layer components {
@@ -42,9 +46,9 @@
     padding: 0.5rem 1rem;
     background-color: blue;
     color: white;
-  }
-  .button:hover {
-    background-color: darkblue;
+    &:hover {
+      background-color: darkblue;
+    }
   }
 }
 @layer utilities {
@@ -53,21 +57,19 @@
   }
   .responsive {
     width: 100%;
-  }
-  @media (min-width: 768px) {
-    .responsive {
+    @media (min-width: 768px) {
       width: 50%;
     }
   }
 }
 .parent {
   color: black;
-}
-.parent .child {
-  color: red;
-}
-.parent:hover {
-  background: lightgray;
+  .child {
+    color: red;
+  }
+  &:hover {
+    background: lightgray;
+  }
 }
 @layer foo.baz {
   .bar {
@@ -99,9 +101,9 @@ body {
 @layer components {
   .btn {
     color: red;
-  }
-  .btn:hover {
-    color: blue;
+    &:hover {
+      color: blue;
+    }
   }
 }
 @layer {
@@ -117,10 +119,10 @@ body {
 }
 .feature {
   color: gray;
-}
-@layer component {
-  .feature h2 {
-    font-size: 1.5rem;
+  @layer component {
+    h2 {
+      font-size: 1.5rem;
+    }
   }
 }
 @layer ui {