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

package/tests-unit/layer/legacy/layer.css

@@ -0,0 +1,136 @@
+/* Less 4.x output, recorded when this fixture graduated to v5.
+   Historical record only — no test reads this file. */
+
+@import url("/import/layer-import-2.css") layer(foo);
+@import url("/import/layer-import-3.css") layer(responsive) supports(display: flex) screen and (max-width: 768px);
+@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;
+  }
+}
+@layer legacy {
+  .sub-rule ul {
+    color: white;
+  }
+}
+@layer primevue {
+  .test {
+    foo: bar;
+  }
+}
+@layer reset, base, components, utilities;
+@layer reset {
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+}
+@layer base {
+  body {
+    margin: 0;
+    font-family: system-ui, sans-serif;
+  }
+  body header {
+    background-color: #f0f0f0;
+    padding: 1rem;
+  }
+}
+@layer components {
+  .button {
+    display: inline-block;
+    padding: 0.5rem 1rem;
+    background-color: blue;
+    color: white;
+  }
+  .button:hover {
+    background-color: darkblue;
+  }
+}
+@layer utilities {
+  .text-center {
+    text-align: center;
+  }
+  .responsive {
+    width: 100%;
+  }
+  @media (min-width: 768px) {
+    .responsive {
+      width: 50%;
+    }
+  }
+}
+.parent {
+  color: black;
+}
+.parent .child {
+  color: red;
+}
+.parent:hover {
+  background: lightgray;
+}
+@layer foo.baz {
+  .bar {
+    font-weight: bold;
+  }
+}
+@layer framework {
+  @layer layout {
+    .container {
+      display: grid;
+      gap: 2rem;
+    }
+  }
+}
+@layer framework.layout {
+  main {
+    padding: 2rem;
+  }
+  p {
+    margin-block: 1rem;
+    color: #555;
+  }
+}
+@layer theme;
+@layer layout, utilities;
+body {
+  color: black;
+}
+@layer components {
+  .btn {
+    color: red;
+  }
+  .btn:hover {
+    color: blue;
+  }
+}
+@layer {
+  p {
+    margin-block: 1rem;
+  }
+}
+@layer framework.buttons.primary {
+  .btn-primary {
+    background: dodgerblue;
+    color: white;
+  }
+}
+.feature {
+  color: gray;
+}
+@layer component {
+  .feature h2 {
+    font-size: 1.5rem;
+  }
+}
+@layer ui {
+  .btn {
+    padding: 0.5rem 1rem;
+    border-radius: 4px;
+    background: rebeccapurple;
+    color: white;
+  }
+}

package/tests-unit/layer/styles.config.ts

@@ -0,0 +1,5 @@
+export default {
+  output: [
+    { file: '{name}.css', collapseNesting: false }
+  ]
+}

package/tests-unit/math-css-vars/math-css-vars.css

@@ -3,6 +3,7 @@
   b: cos(var(--a));
   c: calc(tan(var(--t)) * 1px);
   d: atan2(var(--x), var(--y));
+  e: percentage(var(--p));
 }
 .numeric {
   a: 0.5;

package/tests-unit/math-css-vars/math-css-vars.less

@@ -5,6 +5,7 @@
   b: cos(var(--a));
   c: calc(tan(var(--t)) * 1px);
   d: atan2(var(--x), var(--y));
+  e: percentage(var(--p));
 }
 
 // Concrete numeric arguments still evaluate.

package/tests-unit/media/legacy/media.css

@@ -0,0 +1,274 @@
+/* Less 4.x output, recorded when this fixture graduated to v5.
+   Historical record only — no test reads this file. */
+
+@media print {
+  .class {
+    color: blue;
+  }
+  .class .sub {
+    width: 42;
+  }
+  .top,
+  header > h1 {
+    color: #444444;
+  }
+}
+@media screen {
+  .body {
+    max-width: 480;
+  }
+}
+@media all and (device-aspect-ratio: 16 / 9) {
+  .body {
+    max-width: 800px;
+  }
+}
+@media all and (orientation: portrait) {
+  aside {
+    float: none;
+  }
+}
+@media handheld and (min-width: 42), screen and (min-width: 20em) {
+  .body {
+    max-width: 480px;
+  }
+}
+@media print {
+  .body {
+    padding: 20px;
+  }
+  .body header {
+    background-color: red;
+  }
+}
+@media print and (orientation: landscape) {
+  .body {
+    margin-left: 20px;
+  }
+}
+@media screen {
+  .sidebar {
+    width: 300px;
+  }
+}
+@media screen and (orientation: landscape) {
+  .sidebar {
+    width: 500px;
+  }
+}
+@media a and (b) {
+  .first .second .third {
+    width: 300px;
+  }
+  .first .second .fourth {
+    width: 3;
+  }
+}
+@media a and (b) and (c) {
+  .first .second .third {
+    width: 500px;
+  }
+}
+@media a, (b) and (c) {
+  .body {
+    width: 95%;
+  }
+}
+@media a and (x), (b) and (c) and (x), a and (y), (b) and (c) and (y) {
+  .body {
+    width: 100%;
+  }
+}
+.a {
+  background: black;
+}
+@media handheld {
+  .a {
+    background: white;
+  }
+}
+@media handheld and (max-width: 100px) {
+  .a {
+    background: red;
+  }
+}
+.b {
+  background: black;
+}
+@media handheld {
+  .b {
+    background: white;
+  }
+}
+@media handheld and (max-width: 200px) {
+  .b {
+    background: red;
+  }
+}
+@media only screen and (max-width: 200px) {
+  .body {
+    width: 480px;
+  }
+}
+@media print {
+  @page :left {
+    margin: 0.5cm;
+  }
+  @page :right {
+    margin: 0.5cm;
+  }
+  @page Test:first {
+    margin: 1cm;
+  }
+  @page :first {
+    size: 8.5in 11in;
+    @top-left {
+      margin: 1cm;
+    }
+    @top-left-corner {
+      margin: 1cm;
+    }
+    @top-center {
+      margin: 1cm;
+    }
+    @top-right {
+      margin: 1cm;
+    }
+    @top-right-corner {
+      margin: 1cm;
+    }
+    @bottom-left {
+      margin: 1cm;
+    }
+    @bottom-left-corner {
+      margin: 1cm;
+    }
+    @bottom-center {
+      margin: 1cm;
+    }
+    @bottom-right {
+      margin: 1cm;
+    }
+    @bottom-right-corner {
+      margin: 1cm;
+    }
+    @left-top {
+      margin: 1cm;
+    }
+    @left-middle {
+      margin: 1cm;
+    }
+    @left-bottom {
+      margin: 1cm;
+    }
+    @right-top {
+      margin: 1cm;
+    }
+    @right-middle {
+      content: "Page " counter(page);
+    }
+    @right-bottom {
+      margin: 1cm;
+    }
+  }
+}
+@media (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 2/1), (min-resolution: 2dppx), (min-resolution: 128dpcm) {
+  .b {
+    background: red;
+  }
+}
+.body {
+  background: red;
+}
+@media (max-width: 500px) {
+  .body {
+    background: green;
+  }
+}
+@media (max-width: 1000px) {
+  .body {
+    background: red;
+    background: blue;
+  }
+}
+@media (max-width: 1000px) and (max-width: 500px) {
+  .body {
+    background: green;
+  }
+}
+@media (max-width: 1200px) {
+  /* a comment */
+}
+@media (max-width: 1200px) and (max-width: 900px) {
+  .body {
+    font-size: 11px;
+  }
+}
+@media (min-width: 480px) {
+  .nav-justified > li {
+    display: table-cell;
+  }
+}
+@media (min-width: 768px) and (min-width: 480px) {
+  .menu > li {
+    display: table-cell;
+  }
+}
+@media all and (tv) {
+  .all-and-tv-variables {
+    var: all-and-tv;
+  }
+}
+@media screen and (min-width: 61px) {
+  .selector {
+    foo: bar;
+  }
+}
+@media screen and (color), projection and (color) {
+  .selector {
+    color: #eee;
+  }
+}
+@media not (width <= -100px) {
+  body {
+    background: green;
+  }
+}
+@media (height > -100px) {
+  body {
+    background: green;
+  }
+}
+@media not (resolution: -300dpi) {
+  body {
+    background: green;
+  }
+}
+@media (min-orientation: portrait) {
+  body {
+    background: green;
+  }
+}
+@media print and (min-resolution: 118dpcm) {
+  body {
+    background: green;
+  }
+}
+@media (200px <= width <= 500px) {
+  .test-range-syntax {
+    padding: 0;
+  }
+}
+.selector {
+  color: #eee;
+}
+@media (200px <= width <= 500px) {
+  .selector .test-range-syntax {
+    padding: 0;
+  }
+}
+@media print, (max-width: 992px) {
+  div {
+    color: red;
+  }
+}

package/tests-unit/media/media.css

@@ -37,43 +37,45 @@
   .body header {
     background-color: red;
   }
-}
-@media print and (orientation: landscape) {
-  .body {
-    margin-left: 20px;
+  @media (orientation: landscape) {
+    .body {
+      margin-left: 20px;
+    }
   }
 }
 @media screen {
   .sidebar {
     width: 300px;
   }
-}
-@media screen and (orientation: landscape) {
-  .sidebar {
-    width: 500px;
-  }
-}
-@media a and (b) {
-  .first .second .third {
-    width: 300px;
-  }
-  .first .second .fourth {
-    width: 3;
+  @media (orientation: landscape) {
+    .sidebar {
+      width: 500px;
+    }
   }
 }
-@media a and (b) and (c) {
-  .first .second .third {
-    width: 500px;
+@media a {
+  @media (b) {
+    .first .second .third {
+      width: 300px;
+    }
+    @media (c) {
+      .first .second .third {
+        width: 500px;
+      }
+    }
+    .first .second .fourth {
+      width: 3;
+    }
   }
 }
 @media a, (b) and (c) {
   .body {
     width: 95%;
   }
-}
-@media a and (x), (b) and (c) and (x), a and (y), (b) and (c) and (y) {
-  .body {
-    width: 100%;
+  @media (x), (y) {
+    .body {
+      width: 100%;
+    }
   }
 }
 .a {
@@ -83,10 +85,10 @@
   .a {
     background: white;
   }
-}
-@media handheld and (max-width: 100px) {
-  .a {
-    background: red;
+  @media (max-width: 100px) {
+    .a {
+      background: red;
+    }
   }
 }
 .b {
@@ -96,10 +98,10 @@
   .b {
     background: white;
   }
-}
-@media handheld and (max-width: 200px) {
-  .b {
-    background: red;
+  @media (max-width: 200px) {
+    .b {
+      background: red;
+    }
   }
 }
 @media only screen and (max-width: 200px) {
@@ -114,7 +116,7 @@
   @page :right {
     margin: 0.5cm;
   }
-  @page Test:first {
+  @page Test :first {
     margin: 1cm;
   }
   @page :first {
@@ -169,7 +171,7 @@
     }
   }
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 2/1), (min-resolution: 2dppx), (min-resolution: 128dpcm) {
+@media (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 2 / 1), (min-resolution: 2dppx), (min-resolution: 128dpcm) {
   .b {
     background: red;
   }
@@ -185,20 +187,22 @@
 @media (max-width: 1000px) {
   .body {
     background: red;
-    background: blue;
   }
-}
-@media (max-width: 1000px) and (max-width: 500px) {
+  @media (max-width: 500px) {
+    .body {
+      background: green;
+    }
+  }
   .body {
-    background: green;
+    background: blue;
   }
 }
 @media (max-width: 1200px) {
   /* a comment */
-}
-@media (max-width: 1200px) and (max-width: 900px) {
-  .body {
-    font-size: 11px;
+  @media (max-width: 900px) {
+    .body {
+      font-size: 11px;
+    }
   }
 }
 @media (min-width: 480px) {
@@ -206,17 +210,19 @@
     display: table-cell;
   }
 }
-@media (min-width: 768px) and (min-width: 480px) {
+@media (min-width: 768px) {
+@media (min-width: 480px) {
   .menu > li {
     display: table-cell;
   }
 }
+}
 @media all and (tv) {
   .all-and-tv-variables {
     var: all-and-tv;
   }
 }
-@media screen and (min-width: 61px) {
+@media screen and (min-width: (60px + 1)) {
   .selector {
     foo: bar;
   }

package/tests-unit/media/media.less

@@ -1,5 +1,3 @@
-// For now, variables can't be declared inside @media blocks.
-
 @var: 42;
 
 @media print {

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

@@ -0,0 +1,5 @@
+module.exports = {
+  output: {
+    collapseNesting: true
+  }
+};

package/tests-unit/merge/merge.css

@@ -22,12 +22,12 @@
   transform: scale(2, 4), scale(2, 4), scale(2, 4) !important;
 }
 .test-rule-interleaved {
-  transform: t1, t2, t3;
   background: b1, b2, b3;
+  transform: t1, t2, t3;
 }
 .test-rule-spaced {
-  transform: t1 t2 t3;
   background: b1 b2, b3;
+  transform: t1 t2 t3;
 }
 .test-rule-interleaved-with-spaced {
   transform: t1s, t2 t3s, t4 t5s t6s;

package/tests-unit/mixin-noparens/legacy/mixin-noparens.css

@@ -0,0 +1,10 @@
+/* Less 4.x output, recorded when this fixture graduated to v5.
+   Historical record only — no test reads this file. */
+
+#theme > .mixin {
+  background-color: grey;
+}
+#container {
+  color: black;
+  background-color: grey;
+}

package/tests-unit/mixin-noparens/mixin-noparens.css

@@ -1,5 +1,7 @@
-#theme > .mixin {
-  background-color: grey;
+#theme {
+  > .mixin {
+    background-color: grey;
+  }
 }
 #container {
   color: black;

package/tests-unit/mixin-noparens/styles.config.ts

@@ -0,0 +1,5 @@
+export default {
+  output: [
+    { file: '{name}.css', collapseNesting: false }
+  ]
+}

package/tests-unit/mixins/legacy/maps.css

@@ -0,0 +1,9 @@
+/* Less 4.x output, recorded when this fixture graduated to v5.
+   Historical record only — no test reads this file. */
+
+.maps h2 {
+  width: 10px;
+}
+.maps h1 {
+  color: white;
+}