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

package/tests-unit/at-rules-bubbling/legacy/at-rules-bubbling.css

@@ -0,0 +1,122 @@
+/* Less 4.x output, recorded when this fixture graduated to v5.
+   Historical record only — no test reads this file. */
+
+.parent {
+  color: green;
+}
+@document url-prefix() {
+  .parent .child {
+    color: red;
+  }
+}
+@supports (sandwitch: butter) {
+  .inside .top {
+    property: value;
+  }
+}
+@supports (sandwitch: bread) {
+  .in1 .in2 {
+    property: value;
+  }
+}
+@supports (sandwitch: ham) {
+  .inside .top {
+    property: value;
+  }
+}
+@supports (font-family: weirdFont) {
+  @font-face {
+    font-family: something;
+    src: made-up-url;
+  }
+}
+@font-face {
+  @supports not (-webkit-font-smoothing: subpixel-antialiased) {
+    font-family: something;
+    src: made-up-url;
+  }
+}
+@supports (property: value) {
+  @media (max-size: 2px) {
+    @supports (whatever: something) {
+      .outOfMedia  {
+        property: value;
+      }
+    }
+  }
+}
+@supports (property: value) {
+  @media (max-size: 2px) {
+    @supports (whatever: something) {
+      .onTop  {
+        property: value;
+      }
+    }
+  }
+}
+@media print {
+  html {
+    in-html: visible;
+  }
+  @supports (upper: test) {
+    html {
+      in-supports: first;
+    }
+    html div {
+      in-div: visible;
+    }
+    @supports not (-webkit-font-smoothing: subpixel-antialiased) {
+      html div {
+        in-supports: second;
+      }
+      @media screen {
+        html div {
+          font-weight: 400;
+        }
+        html div nested {
+          property: value;
+        }
+      }
+    }
+  }
+}
+@media print and (max-size: 2px) {
+  .in1 {
+    stay: here;
+  }
+  @supports not (-webkit-font-smoothing: subpixel-antialiased) {
+    @supports (whatever: something) {
+      .in2 .in1 {
+        property: value;
+      }
+    }
+  }
+}
+html {
+  font-weight: 300;
+  -webkit-font-smoothing: subpixel-antialiased;
+}
+@supports not (-webkit-font-smoothing: subpixel-antialiased) {
+  html {
+    font-weight: 400;
+  }
+  html nested {
+    property: value;
+  }
+}
+.onTop {
+  animation: "textscale";
+  font-family: something;
+}
+@font-face {
+  font-family: something;
+  src: made-up-url;
+}
+@keyframes "textscale" {
+  0% {
+    font-size: 1em;
+  }
+  100% {
+    font-size: 2em;
+  }
+}

package/tests-unit/at-rules-keyword-comments/at-rules-keyword-comments.css

@@ -1,9 +1,6 @@
-@import "test.css" screen, print;
-@media screen, print, handheld {
-  /* comment */
-  /* another */
+@import "test.css" screen /* comment */, print;
+@media screen /* comment */, print /* another */, handheld {
   body {
     font-size: 12pt;
   }
 }
-/* comment */

package/tests-unit/at-rules-keyword-comments/legacy/at-rules-keyword-comments.css

@@ -0,0 +1,12 @@
+/* Less 4.x output, recorded when this fixture graduated to v5.
+   Historical record only — no test reads this file. */
+
+@import "test.css" screen, print;
+@media screen, print, handheld {
+  /* comment */
+  /* another */
+  body {
+    font-size: 12pt;
+  }
+}
+/* comment */

package/tests-unit/at-rules-targeted/at-rules-targeted.css

@@ -19,9 +19,11 @@
   margin: 2cm;
   size: A4;
 }
-@media screen and (max-width: 768px) {
-  .nested {
-    display: block;
+@media screen {
+  @media (max-width: 768px) {
+    .nested {
+      display: block;
+    }
   }
 }
 @media screen {

package/tests-unit/at-rules-targeted/legacy/at-rules-targeted.css

@@ -0,0 +1,55 @@
+/* Less 4.x output, recorded when this fixture graduated to v5.
+   Historical record only — no test reads this file. */
+
+@charset "UTF-8";
+@media screen {
+  .test {
+    color: red;
+  }
+}
+@media screen, print, handheld {
+  body {
+    font-size: 12pt;
+  }
+}
+@supports (display: grid) {
+  .grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+  }
+}
+@page {
+  margin: 2cm;
+  size: A4;
+}
+@media screen and (max-width: 768px) {
+  .nested {
+    display: block;
+  }
+}
+@media screen {
+  .container {
+    color: red;
+  }
+  .container .child {
+    color: blue;
+  }
+}
+@media screen {
+  .test-var-access {
+    color: value;
+  }
+}
+@layer base {
+  body {
+    margin: 0;
+  }
+  p {
+    padding: 0;
+  }
+}
+@media screen {
+  body {
+    color: black;
+  }
+}

package/tests-unit/calc/calc.css

@@ -1,7 +1,7 @@
 .calc-basic {
   width: calc(100% - 30px);
   height: calc(50% + 20px);
-  margin: calc(10px * 2);
+  margin: 20px;
   padding: calc(100vh - 50px);
 }
 .calc-variables {
@@ -11,19 +11,19 @@
   height: calc(50% + (25vh - 20px));
 }
 .calc-nested {
-  min-height: calc(10vh + calc(5vh));
-  nested: calc(calc(2.25rem + 2px) - 1px * 2);
+  min-height: 15vh;
+  nested: calc((2.25rem + 2px) - 2px);
 }
 .calc-functions {
   one: calc(100% - 20px);
-  two: calc(100% - (10px + 10px));
+  two: calc(100% - 20px);
   bar: calc(1 + 20%);
 }
 .calc-escape {
-  three: calc(100% - (3 * 1));
-  four: calc(100% - (3 * 1));
+  three: calc(100% - 3);
+  four: calc(100% - 3);
 }
 .calc-mixed {
-  foo: 3 calc(3 + 4) 11;
-  height: calc(100% - ((10px * 3) + (10px * 2)));
+  foo: 3 7 11;
+  height: calc(100% - 50px);
 }

package/tests-unit/calc/calc.less

@@ -1,3 +1,4 @@
+// Less v5 can further simplify a number of these calc expressions
 @val: 10px;
 @var: 50vh/2;
 

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

@@ -0,0 +1,32 @@
+/* Less 4.x output, recorded when this fixture graduated to v5.
+   Historical record only — no test reads this file. */
+
+.calc-basic {
+  width: calc(100% - 30px);
+  height: calc(50% + 20px);
+  margin: 20px;
+  padding: calc(100vh - 50px);
+}
+.calc-variables {
+  root: calc(100% - 30px);
+  root2: calc(100% - 40px);
+  width: calc(50% + (25vh - 20px));
+  height: calc(50% + (25vh - 20px));
+}
+.calc-nested {
+  min-height: calc(10vh + calc(5vh));
+  nested: calc(calc(2.25rem + 2px) - 1px * 2);
+}
+.calc-functions {
+  one: calc(100% - 20px);
+  two: calc(100% - (10px + 10px));
+  bar: calc(1 + 20%);
+}
+.calc-escape {
+  three: calc(100% - (3 * 1));
+  four: calc(100% - (3 * 1));
+}
+.calc-mixed {
+  foo: 3 calc(3 + 4) 11;
+  height: calc(100% - ((10px * 3) + (10px * 2)));
+}

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

@@ -14,5 +14,5 @@
 }
 #percentage {
   color: 255;
-  border-color: rgba(255, 0, 0, 0.5);
+  border-color: rgba(100%, 0, 0, 50%);
 }

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

@@ -29,17 +29,17 @@
 }
 #percentage {
   color: 255;
-  border-color: rgba(255, 0, 0, 0.5);
+  border-color: rgba(100%, 0, 0, 50%);
 }
 #grey {
-  color: #c8c8c8;
+  color: rgb(200, 200, 200);
 }
 #aa3333 {
-  color: #aa3333;
+  color: rgb(66.66%, 20%, 20%);
 }
 #bb8080 {
-  color: hsl(0, 30%, 62%);
+  color: hsl(0deg, 30%, 62%);
 }
 #ccff00 {
-  color: hsl(72, 100%, 50%);
+  color: hsl(72deg, 100%, 50%);
 }

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

@@ -1,4 +1,5 @@
 // Comprehensive color function tests - all color functions without problematic nesting
+// Less v5 preserves original color expressions when possible
 .lightenblue {
     color: lighten(blue, 10%);
 }

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

@@ -25,15 +25,3 @@
 #alpha #hsla {
   color: hsla(11, 20%, 20%, 0.6);
 }
-#grey {
-  color: #c8c8c8;
-}
-#aa3333 {
-  color: #aa3333;
-}
-#bb8080 {
-  color: hsl(0, 30%, 62%);
-}
-#ccff00 {
-  color: hsl(72, 100%, 50%);
-}

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

@@ -29,18 +29,3 @@
     color: hsla(11, 20%, 20%, 0.6);
 }
 
-#grey {
-  color: rgb(200, 200, 200);
-}
-
-#aa3333 {
-  color: rgb(66.66%, 20%, 20%);
-}
-
-#bb8080 {
-  color: hsl(0deg, 30%, 62%);
-}
-
-#ccff00 {
-  color: hsl(72deg, 100%, 50%);
-}

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

@@ -0,0 +1,21 @@
+/* Less 4.x output, recorded when this fixture graduated to v5.
+   Historical record only — no test reads this file. */
+
+.lightenblue {
+  color: #3333ff;
+}
+.darkenblue {
+  color: #0000cc;
+}
+.unknowncolors {
+  color: blue2;
+  border: 2px solid superred;
+}
+.transparent {
+  color: transparent;
+  background-color: rgba(0, 0, 0, 0);
+}
+#percentage {
+  color: 255;
+  border-color: rgba(255, 0, 0, 0.5);
+}

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

@@ -0,0 +1,48 @@
+/* Less 4.x output, recorded when this fixture graduated to v5.
+   Historical record only — no test reads this file. */
+
+.lightenblue {
+  color: #3333ff;
+}
+.darkenblue {
+  color: #0000cc;
+}
+.unknowncolors {
+  color: blue2;
+  border: 2px solid superred;
+}
+.transparent {
+  color: transparent;
+  background-color: rgba(0, 0, 0, 0);
+}
+#alpha #fromvar {
+  opacity: 0.7;
+}
+#alpha #short {
+  opacity: 1;
+}
+#alpha #long {
+  opacity: 1;
+}
+#alpha #rgba {
+  opacity: 0.2;
+}
+#alpha #hsl {
+  opacity: 1;
+}
+#percentage {
+  color: 255;
+  border-color: rgba(255, 0, 0, 0.5);
+}
+#grey {
+  color: #c8c8c8;
+}
+#aa3333 {
+  color: #aa3333;
+}
+#bb8080 {
+  color: hsl(0, 30%, 62%);
+}
+#ccff00 {
+  color: hsl(72, 100%, 50%);
+}

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

@@ -0,0 +1,9 @@
+/* Less 4.x output, recorded when this fixture graduated to v5.
+   Historical record only — no test reads this file. */
+
+foo {
+  color: #0080ff;
+  color: rgba(0, 128, 255, 0.5);
+  color: hsl(198, 28%, 50%);
+  color: hsla(198, 28%, 50%, 0.5);
+}

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

@@ -0,0 +1,18 @@
+/* Less 4.x output, recorded when this fixture graduated to v5.
+   Historical record only — no test reads this file. */
+
+#overflow .a {
+  color: #000000;
+}
+#overflow .b {
+  color: #ffffff;
+}
+#overflow .c {
+  color: #ffffff;
+}
+#overflow .d {
+  color: #00ff00;
+}
+#overflow .e {
+  color: rgba(0, 31, 255, 0.42);
+}

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;