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

package/tests-unit/color-functions/legacy/rgba.css

@@ -0,0 +1,20 @@
+/* Less 4.x output, recorded when this fixture graduated to v5.
+   Historical record only — no test reads this file. */
+
+#rrggbbaa {
+  test-1: #55FF5599;
+  test-2: #5F59;
+  test-3: rgba(136, 255, 136, 0.6);
+  test-4: rgba(85, 255, 85, 0.1);
+  test-5: rgba(85, 255, 85, 0.6);
+  test-6: rgba(85, 255, 85, 0.6);
+  test-7: rgba(85, 255, 85, 0.5);
+  test-8: rgba(var(--color-accent), 0.2);
+  test-9: rgb(var(--color-accent));
+  test-9: hsla(var(--color-accent));
+  test-10: #55FF5599;
+  test-11: hsla(120, 100%, 66.66666667%, 0.6);
+  test-12: hsla(120, 100%, 66.66666667%, 0.5);
+  --semi-transparent-dark-background: #001e00ee;
+  --semi-transparent-dark-background-2: #001e00;
+}

package/tests-unit/color-functions/modern-syntax.css

@@ -1,6 +1,6 @@
 foo {
-  color: #0080ff;
-  color: rgba(0, 128, 255, 0.5);
-  color: hsl(198, 28%, 50%);
-  color: hsla(198, 28%, 50%, 0.5);
+  color: rgb(0 128 255);
+  color: rgb(0 128 255 / 50%);
+  color: hsl(198deg 28% 50%);
+  color: hsl(198deg 28% 50% / 50%);
 }

package/tests-unit/color-functions/modern-syntax.less

@@ -1,4 +1,5 @@
 // Modern CSS color syntax tests - space-separated values and / alpha syntax
+// Less v5 preserves modern syntax when possible.
 foo {
   color: rgb(0 128 255);
   color: rgb(0 128 255 / 50%);

package/tests-unit/color-functions/operations.less

@@ -4,5 +4,6 @@
   .b { color: (#eee + #fff); } // #ffffff
   .c { color: (#aaa * 3); } // #ffffff
   .d { color: (#00ee00 + #009900); } // #00ff00
+  // Less v5 preserves color statements that overflow.
   .e { color: rgba(-99.9, 31.4159, 321, 0.42); }
 }

package/tests-unit/color-functions/rgba.css

@@ -1,8 +1,8 @@
 #rrggbbaa {
   test-1: #55FF5599;
   test-2: #5F59;
-  test-3: rgba(136, 255, 136, 0.6);
-  test-4: rgba(85, 255, 85, 0.1);
+  test-3: #88ff8899;
+  test-4: #55ff551a;
   test-5: rgba(85, 255, 85, 0.6);
   test-6: rgba(85, 255, 85, 0.6);
   test-7: rgba(85, 255, 85, 0.5);
@@ -13,5 +13,5 @@
   test-11: hsla(120, 100%, 66.66666667%, 0.6);
   test-12: hsla(120, 100%, 66.66666667%, 0.5);
   --semi-transparent-dark-background: #001e00ee;
-  --semi-transparent-dark-background-2: #001e00;
+  --semi-transparent-dark-background-2: rgba(0, 30, 0, 238);
 }

package/tests-unit/color-functions/rgba.less

@@ -2,6 +2,7 @@
 #rrggbbaa {
   test-1: #55FF5599;
   test-2: #5F59;
+  // Less v5 will attempt to preserve color formats when possible.
   test-3: lighten(#55FF5599, 10%);
   test-4: fade(#5F59, 10%);
   test-5: rgba(#55FF5599);
@@ -14,5 +15,6 @@
   test-11: hsla(#5F59);
   test-12: hsla(#5F59, 0.5);
   --semi-transparent-dark-background: #001e00ee;
-  --semi-transparent-dark-background-2: rgba(0, 30, 0, 238); // invalid opacity will be capped
+  // Less v5 will not alter custom properties - they can represent any unknown value.
+  --semi-transparent-dark-background-2: rgba(0, 30, 0, 238);
 }

package/tests-unit/comments/comments.css

@@ -26,7 +26,7 @@
  */
 /* @group Variables
 ------------------- */
-#comments,
+#comments /* boo *//* boo again*/,
 .comments {
   /**/
   color: red;
@@ -45,10 +45,10 @@
     color: grey;
   }
 */
-.selector,
+.selector /* .with */,
 .lots,
-.comments {
-  color: grey, /* blue */ orange;
+/* of */ .comments {
+  color/* survive */ /* me too */: grey, /* blue */ orange;
   -webkit-border-radius: 2px /* webkit only */;
   -moz-border-radius: 8px /* moz only with operation */;
 }
@@ -58,8 +58,7 @@
 .sr-only-focusable {
   clip: auto;
 }
-@-webkit-keyframes hover {
-  /* and Chrome */
+@-webkit-keyframes /* Safari */ hover /* and Chrome */ {
   0% {
     color: red;
   }

package/tests-unit/comments/comments.less

@@ -1,4 +1,5 @@
 // Comprehensive comment handling tests
+// Less v5 will preserve many more comments as-is
 /******************\
 *                  *
 *  Comment Header  *
@@ -99,5 +100,5 @@
 // line immediately followed
 /*by block */
 @string_w_comment: ~"/* // Not commented out // */";
-#output-block { --comment: @string_w_comment; }
+#output-block { --comment: @{string_w_comment}; }
 /*comment on last line*/

package/tests-unit/comments/comments2.css

@@ -1,18 +1,16 @@
-@-webkit-keyframes hover {
-  /* Safari and Chrome */
-}
 .bg {
   background-image: linear-gradient(#333 /*{comment}*/, #111);
 }
 #planadvisor,
+/*comment*//*comment*/
 .first,
-.planning {
+/*comment*//*comment*/.planning {
   margin: 10px;
   total-width: 96em;
 }
 .some-inline-comments {
   a: yes /* comment */;
   b: red /* comment */;
-  c: yes /* comment */;
-  d: red /* comment */;
+  c: yes;
+  d: red;
 }

package/tests-unit/comments/comments2.less

@@ -1,5 +1,6 @@
 // Inline comments and grid system tests
 @media all and/*! */(max-width:1024px) {}
+// In Less v5, This is an empty ruleset, so it is removed.
 @-webkit-keyframes hover /* Safari and Chrome */{  }
 .bg {
   background-image: linear-gradient(#333 /*{comment}*/, #111);
@@ -25,6 +26,8 @@
 .some-inline-comments {
     a: yes /* comment */;
     b: red /* comment */;
+    // In Less v5, the comment is considered to be attached to the source,
+    // not part of the value.
    @c: yes /* comment */;
    @d: red /* comment */;
     c: @c;

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

@@ -0,0 +1,86 @@
+/* Less 4.x output, recorded when this fixture graduated to v5.
+   Historical record only — no test reads this file. */
+
+/******************\
+*                  *
+*  Comment Header  *
+*                  *
+\******************/
+/*
+
+    Comment
+
+*/
+/*
+ * Comment Test
+ *
+ * - cloudhead (http://cloudhead.net)
+ *
+ */
+/* Colors
+ * ------
+ *   #EDF8FC (background blue)
+ *   #166C89 (darkest blue)
+ *
+ * Text:
+ *   #333 (standard text) // A comment within a comment!
+ *   #1F9EC9 (standard link)
+ *
+ */
+/* @group Variables
+------------------- */
+#comments,
+.comments {
+  /**/
+  color: red;
+  /* A C-style comment */
+  /* A C-style comment */
+  background-color: orange;
+  font-size: 12px;
+  /* lost comment */
+  content: "content";
+  border: 1px solid black;
+  padding: 0;
+  margin: 2em;
+}
+/* commented out
+  #more-comments {
+    color: grey;
+  }
+*/
+.selector,
+.lots,
+.comments {
+  color: grey, /* blue */ orange;
+  -webkit-border-radius: 2px /* webkit only */;
+  -moz-border-radius: 8px /* moz only with operation */;
+}
+.test-rule {
+  color: 1px;
+}
+.sr-only-focusable {
+  clip: auto;
+}
+@-webkit-keyframes hover {
+  /* and Chrome */
+  0% {
+    color: red;
+  }
+}
+#last {
+  color: blue;
+}
+/*  */
+/* { */
+/*  */
+/*  */
+/*  */
+#div {
+  color: #A33;
+}
+/* } */
+/*by block */
+#output-block {
+  --comment: /* // Not commented out // */;
+}
+/*comment on last line*/

package/tests-unit/comments/legacy/comments2.css

@@ -0,0 +1,21 @@
+/* Less 4.x output, recorded when this fixture graduated to v5.
+   Historical record only — no test reads this file. */
+
+@-webkit-keyframes hover {
+  /* Safari and Chrome */
+}
+.bg {
+  background-image: linear-gradient(#333 /*{comment}*/, #111);
+}
+#planadvisor,
+.first,
+.planning {
+  margin: 10px;
+  total-width: 96em;
+}
+.some-inline-comments {
+  a: yes /* comment */;
+  b: red /* comment */;
+  c: yes /* comment */;
+  d: red /* comment */;
+}

package/tests-unit/container/container.css

@@ -23,9 +23,11 @@
     border: 1px solid grey;
   }
 }
-@container size(min-width: 60ch) {
+@container size (min-width: 60ch) {
   .article--post header {
-    grid-template-areas: "avatar name" "avatar headline";
+    grid-template-areas:
+      "avatar name"
+            "avatar headline";
     align-items: start;
   }
   .article--post {
@@ -54,13 +56,28 @@
     margin: 0.5em 0 0 0;
   }
 }
+@container contactBody (min-width: 1300px) {
+  .named-container {
+    width: 25%;
+  }
+}
+@container _body (min-width: 1300px) {
+  .underscored-container {
+    width: 25%;
+  }
+}
+@container café (min-width: 1300px) {
+  .nonascii-container {
+    width: 25%;
+  }
+}
 @container (width >= 500px) and (height >= 500px) {
   .card-content h2 {
     padding: 0;
     margin: 0.5em 0 0 0;
   }
 }
-@container (width > 760px) not (height > 670px) {
+@container (width > 760px) and (not (height > 670px)) {
   .card-content h2 {
     padding: 0;
     margin: 0.5em 0 0 0;
@@ -78,7 +95,7 @@
     margin: 0.5em 0 0 0;
   }
 }
-@container (width < 500px) or (height < 500px) and (inline-size >= 0px) {
+@container ((width < 500px) or (height < 500px)) and (inline-size >= 0px) {
   .card-content p {
     padding: 0;
   }
@@ -86,7 +103,7 @@
     margin: 0.5em 0 0 0;
   }
 }
-@container my-page-layout (width < 500px) or (height < 500px) and (block-size > 12em) {
+@container my-page-layout ((width < 500px) or (height < 500px)) and (block-size > 12em) {
   .card-content p {
     padding: 0;
   }
@@ -94,7 +111,7 @@
     margin: 0.5em 0 0 0;
   }
 }
-@container (width < 500px) or (height < 500px) and (aspect-ratio: 3/2) {
+@container ((width < 500px) or (height < 500px)) and (aspect-ratio: 3 / 2) {
   .card-content p {
     padding: 0;
   }
@@ -102,7 +119,7 @@
     margin: 0.5em 0 0 0;
   }
 }
-@container (width < 500px) or (height < 500px) and (orientation: portrait) {
+@container ((width < 500px) or (height < 500px)) and (orientation: portrait) {
   .card-content p {
     padding: 0;
   }
@@ -117,60 +134,20 @@
   .card-content p h2 {
     margin: 0.5em 0 0 0;
   }
-}
-@container card (inline-size > 30em) and style(--responsive: true) {
-  .card-content {
-    grid-template-columns: 1fr 2fr;
-    grid-template-rows: auto 1fr;
-    align-items: start;
-    column-gap: 20px;
-  }
-  .card-content h2 {
-    padding: 0;
-    margin: 0.5em 0 0 0;
-  }
-}
-@container card (width > 400px), style(--responsive: true), scroll-state(stuck: top) {
-  h2 {
-    font-size: 1.5em;
-  }
-}
-@container style(--theme) {
-  .style-query {
-    color: red;
-  }
-}
-@container style((--theme: one) or (--theme: two)) {
-  .style-query-list {
-    color: blue;
-  }
-}
-@container contactBody (min-width: 1300px) {
-  .named-container {
-    width: 25%;
-  }
-}
-@container _body (min-width: 1300px) {
-  .underscored-container {
-    width: 25%;
-  }
-}
-@container --body (min-width: 1300px) {
-  .custom-ident-container {
-    width: 25%;
-  }
-}
-@container contact\.body (min-width: 1300px) {
-  .escaped-container {
-    width: 25%;
-  }
-}
-@container café (min-width: 1300px) {
-  .nonascii-container {
-    width: 25%;
+  @container style(--responsive: true) {
+    .card-content {
+      grid-template-columns: 1fr 2fr;
+      grid-template-rows: auto 1fr;
+      align-items: start;
+      column-gap: 20px;
+    }
+    .card-content h2 {
+      padding: 0;
+      margin: 0.5em 0 0 0;
+    }
   }
 }
-@container (width < 500px) or (height < 500px) and (orientation: portrait) {
+@container ((width < 500px) or (height < 500px)) and (orientation: portrait) {
   .card-content p {
     padding: 0;
   }
@@ -178,7 +155,7 @@
     margin: 0.5em 0 0 0;
   }
 }
-@container my-page-layout (width < 500px) or (height < 500px) and (block-size > 12em) {
+@container my-page-layout ((width < 500px) or (height < 500px)) and (block-size > 12em) {
   .card-content p {
     padding: 0;
   }
@@ -308,24 +285,19 @@
     font-size: 75%;
   }
 }
-@container sidebar (min-width: 400px), scroll-state(stuck: top) {
-  #sticky-child {
-    font-size: 80%;
-  }
-}
 @container foo (min-width: 400px) {
   #sticky-child {
     font-size: 75%;
   }
 }
-.mixin-container-test {
-  color: red;
-}
 @container name (width < 125px) {
   .mixin-container-test {
     display: none;
   }
 }
+.mixin-container-test {
+  color: red;
+}
 @container sidebar (width < 500px) {
   .sidebar-test {
     display: none;
@@ -336,18 +308,3 @@
     display: none;
   }
 }
-@container style(var(--n) = 3) {
-  .style-query-eq {
-    color: red;
-  }
-}
-@container style(calc(6 / 2) = var(--n)) {
-  .style-query-calc-eq {
-    color: blue;
-  }
-}
-@container style(var(--size) > 1lh) {
-  .style-query-gt {
-    color: green;
-  }
-}

package/tests-unit/container/container.less

@@ -63,7 +63,25 @@
         .card-content h2 {
             padding: 0;
             margin: 0.5em 0 0 0;
-        } 
+        }
+    }
+}
+
+@container contactBody (min-width: 1300px) {
+    .named-container {
+        width: 25%;
+    }
+}
+
+@container _body (min-width: 1300px) {
+    .underscored-container {
+        width: 25%;
+    }
+}
+
+@container café (min-width: 1300px) {
+    .nonascii-container {
+        width: 25%;
     }
 }
 
@@ -74,7 +92,7 @@
     } 
 }
 
-@container (width > 760px) not (height > 670px) {
+@container (width > 760px) and (not (height > 670px)) {
     .card-content h2 {
         padding: 0;
         margin: 0.5em 0 0 0;
@@ -95,7 +113,7 @@
     } 
 }
 
-@container (width < 500px) or (height < 500px) and (inline-size >= 0px) {
+@container ((width < 500px) or (height < 500px)) and (inline-size >= 0px) {
     .card-content p {
         padding: 0;
 
@@ -105,7 +123,7 @@
     } 
 }
 
-@container my-page-layout (width < 500px) or (height < 500px) and (block-size > 12em) {
+@container my-page-layout ((width < 500px) or (height < 500px)) and (block-size > 12em) {
     .card-content p {
         padding: 0;
 
@@ -115,7 +133,7 @@
     } 
 }
 
-@container (width < 500px) or (height < 500px) and (aspect-ratio: 3/2) {
+@container ((width < 500px) or (height < 500px)) and (aspect-ratio: 3/2) {
     .card-content p {
         padding: 0;
 
@@ -125,7 +143,7 @@
     } 
 }
 
-@container (width < 500px) or (height < 500px) and (orientation: portrait) {
+@container ((width < 500px) or (height < 500px)) and (orientation: portrait) {
     .card-content p {
         padding: 0;
 
@@ -159,55 +177,7 @@
     }
 }
 
-@container card (width > 400px), style(--responsive: true), scroll-state(stuck: top) {
-    h2 {
-        font-size: 1.5em;
-    }
-}
-
-@container style(--theme) {
-    .style-query {
-        color: red;
-    }
-}
-
-@container style((--theme: one) or (--theme: two)) {
-    .style-query-list {
-        color: blue;
-    }
-}
-
-@container contactBody (min-width: 1300px) {
-    .named-container {
-        width: 25%;
-    }
-}
-
-@container _body (min-width: 1300px) {
-    .underscored-container {
-        width: 25%;
-    }
-}
-
-@container --body (min-width: 1300px) {
-    .custom-ident-container {
-        width: 25%;
-    }
-}
-
-@container contact\.body (min-width: 1300px) {
-    .escaped-container {
-        width: 25%;
-    }
-}
-
-@container café (min-width: 1300px) {
-    .nonascii-container {
-        width: 25%;
-    }
-}
-
-@container ( width < 500px ) or (height<500px) and (orientation: portrait) {
+@container ((width < 500px) or (height < 500px)) and (orientation: portrait) {
     .card-content p {
         padding: 0;
 
@@ -217,7 +187,7 @@
     } 
 }
 
-@container my-page-layout ( width< 500px) or ( height<500px) and ( block-size>12em ) {
+@container my-page-layout (( width< 500px) or ( height<500px)) and ( block-size>12em ) {
     .card-content p {
         padding: 0;
 
@@ -367,12 +337,6 @@
     }
 }
 
-@container sidebar (min-width: 400px), scroll-state(stuck: top) {
-    #sticky-child {
-      font-size: 80%;
-    }
-}
-
 @varfoo: foo;
 @threshold: 400px;
 @container @{varfoo} (min-width: @threshold) {
@@ -383,7 +347,8 @@
 
 // Regression test: mixin with variable container name and variable query condition
 // Issue: mixins with parameters using @container @name (condition < @var) failed
-// with "variable @bp is undefined" error in older versions
+// with "variable @bp is undefined" error in older versions. Less 5 keeps the
+// at-rule name on interpolation form because bare @var there is deprecated.
 @issue-width: 125px;
 
 .container-query-mixin(@container-name; @bp) {
@@ -404,22 +369,3 @@
 .header-test {
     .container-query-mixin(header, 800px);
 }
-
-// Range/comparison syntax in @container style() queries (issue #4460)
-@container style(var(--n) = 3) {
-    .style-query-eq {
-        color: red;
-    }
-}
-
-@container style(calc(6 / 2) = var(--n)) {
-    .style-query-calc-eq {
-        color: blue;
-    }
-}
-
-@container style(var(--size) > 1lh) {
-    .style-query-gt {
-        color: green;
-    }
-}