@less/test-data 4.8.1 → 5.0.0-alpha.1

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,8 @@
 module.exports = {
   language: {
-    less: {
-      "syncImport": true
-}
-  }
+    less: {}
+  },
+  output: [
+    { file: '{name}.css', 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 {

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