@less/test-data 3.12.2 → 4.2.0

package/errors/eval/svg-gradient3.txt

@@ -1,4 +1,4 @@
-ArgumentError: error evaluating function `svg-gradient`: svg-gradient direction must be 'to bottom', 'to right', 'to bottom right', 'to top right' or 'ellipse at center' in {path}svg-gradient3.less on line 2, column 6:
+ArgumentError: Error evaluating function `svg-gradient`: svg-gradient direction must be 'to bottom', 'to right', 'to bottom right', 'to top right' or 'ellipse at center' in {path}svg-gradient3.less on line 2, column 6:
 1 .a {
 2   a: svg-gradient(black, orange);
 3 }

package/errors/eval/svg-gradient4.txt

@@ -1,4 +1,4 @@
-ArgumentError: error evaluating function `svg-gradient`: svg-gradient direction must be 'to bottom', 'to right', 'to bottom right', 'to top right' or 'ellipse at center' in {path}svg-gradient4.less on line 2, column 6:
+ArgumentError: Error evaluating function `svg-gradient`: svg-gradient direction must be 'to bottom', 'to right', 'to bottom right', 'to top right' or 'ellipse at center' in {path}svg-gradient4.less on line 2, column 6:
 1 .a {
 2   a: svg-gradient(horizontal, @colors);
 3 }

package/errors/eval/svg-gradient5.txt

@@ -1,4 +1,4 @@
-ArgumentError: error evaluating function `svg-gradient`: svg-gradient expects direction, start_color [start_position], [color position,]..., end_color [end_position] or direction, color list in {path}svg-gradient5.less on line 2, column 6:
+ArgumentError: Error evaluating function `svg-gradient`: svg-gradient expects direction, start_color [start_position], [color position,]..., end_color [end_position] or direction, color list in {path}svg-gradient5.less on line 2, column 6:
 1 .a {
 2   a: svg-gradient(to bottom, @colors);
 3 }

package/errors/eval/svg-gradient6.txt

@@ -1,4 +1,4 @@
-ArgumentError: error evaluating function `svg-gradient`: svg-gradient direction must be 'to bottom', 'to right', 'to bottom right', 'to top right' or 'ellipse at center' in {path}svg-gradient6.less on line 2, column 6:
+ArgumentError: Error evaluating function `svg-gradient`: svg-gradient direction must be 'to bottom', 'to right', 'to bottom right', 'to top right' or 'ellipse at center' in {path}svg-gradient6.less on line 2, column 6:
 1 .a {
 2   a: svg-gradient(black, @colors);
 3 }

package/errors/eval/unit-function.txt

@@ -1,4 +1,4 @@
-ArgumentError: error evaluating function `unit`: the first argument to unit must be a number. Have you forgotten parenthesis? in {path}unit-function.less on line 2, column 14:
+ArgumentError: Error evaluating function `unit`: the first argument to unit must be a number. Have you forgotten parenthesis? in {path}unit-function.less on line 2, column 14:
 1 .a {
 2   font-size: unit(80/16,rem);
 3 }

package/less/_main/colors.less

@@ -44,16 +44,16 @@
   color: rgb(200, 200, 200);
 }
 
-#333333 {
-  color: rgb(20%, 20%, 20%);
+#aa3333 {
+  color: rgb(66.66%, 20%, 20%);
 }
 
-#808080 {
-  color: hsl(50, 0%, 50%);
+#bb8080 {
+  color: hsl(0deg, 30%, 62%);
 }
 
-#00ff00 {
-  color: hsl(120, 100%, 50%);
+#ccff00 {
+  color: hsl(72deg, 100%, 50%);
 }
 
 .lightenblue {

package/less/_main/colors2.less

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

package/less/_main/container.less

@@ -0,0 +1,180 @@
+.widget.discoverresults, .widget.repositoriesresults {
+    container-type: inline-size;
+
+    @container (max-width: 350px) {           
+        .cite {
+            .wdr-authors {
+                display: none;
+            }
+        }
+    }
+}
+
+@container (min-width: 700px) {
+    .card h2 {
+        font-size: 2em;
+    }
+}
+
+@container sidebar (min-width: 700px) {
+    .card {
+        font-size: 2em;
+    }
+}
+
+@container (min-width: 60ch) {
+    .container:nth-child(odd) > article {
+        border: 1px solid grey;
+    }
+}
+
+@container size(min-width: 60ch) {
+    .article--post header {
+        grid-template-areas:
+            "avatar name"
+            "avatar headline";
+        align-items: start;
+    }
+  
+    .article--post {
+        grid-template-areas: "header header" ". stats" ". content";
+        grid-auto-columns: 5rem 1fr;
+        column-gap: 1rem;
+    }
+  
+    .article--post__title {
+        font-size: 1.75rem;
+    }
+}
+
+.card h2 {
+    container-type: inline-size;
+    margin: 0;
+    padding: 10px;
+
+    @container (min-width: 500px) {
+        .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) and (height >= 500px) {
+    .card-content h2 {
+        padding: 0;
+        margin: 0.5em 0 0 0;
+    } 
+}
+
+@container (width > 760px) not (height > 670px) {
+    .card-content h2 {
+        padding: 0;
+        margin: 0.5em 0 0 0;
+    } 
+}
+
+@container not (height <= 1080px) {
+    .card-content h2 {
+        padding: 0;
+        margin: 0.5em 0 0 0;
+    } 
+}
+
+@container (width < 500px) or (height < 500px) {
+    .card-content h2 {
+        padding: 0;
+        margin: 0.5em 0 0 0;
+    } 
+}
+
+@container (width < 500px) or (height < 500px) and (inline-size >= 0px) {
+    .card-content p {
+        padding: 0;
+
+        h2 {
+            margin: 0.5em 0 0 0;
+        }
+    } 
+}
+
+@container my-page-layout (width < 500px) or (height < 500px) and (block-size > 12em) {
+    .card-content p {
+        padding: 0;
+
+        h2 {
+            margin: 0.5em 0 0 0;
+        }
+    } 
+}
+
+@container (width < 500px) or (height < 500px) and (aspect-ratio: 3/2) {
+    .card-content p {
+        padding: 0;
+
+        h2 {
+            margin: 0.5em 0 0 0;
+        }
+    } 
+}
+
+@container (width < 500px) or (height < 500px) and (orientation: portrait) {
+    .card-content p {
+        padding: 0;
+
+        h2 {
+            margin: 0.5em 0 0 0;
+        }
+    } 
+}
+
+@container card (inline-size > 30em) {
+    .card-content p {
+        padding: 0;
+
+        h2 {
+            margin: 0.5em 0 0 0;
+        }
+    }
+    
+    @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) {
+    .card-content p {
+        padding: 0;
+
+        h2 {
+            margin: 0.5em 0 0 0;
+        }
+    } 
+}
+
+@container my-page-layout ( width< 500px) or ( height<500px) and ( block-size>12em ) {
+    .card-content p {
+        padding: 0;
+
+        h2 {
+            margin: 0.5em 0 0 0;
+        }
+    } 
+}

package/less/_main/css-3.less

@@ -100,7 +100,6 @@ p::before {
 
 foo|h1 { color: blue; }
 foo|* { color: yellow; }
-|h1 { color: red; }
 *|h1 { color: green; }
 h1 { color: green; }
 .upper-test {
@@ -114,18 +113,18 @@ h1 { color: green; }
 ::distributed(input::placeholder) {
   color: #b3b3b3;
 }
-.shadow ^ .dom,
-body ^^ .shadow {
+.shadow > .dom,
+body > .shadow {
   display: done;
 }
 
 :host(.sel .a),
 :host-context(.sel .b),
-.sel /deep/ .b,
+.sel > .b,
 ::content .sel {
   type: shadow-dom;
 }
-/deep/ b {
+* b {
  c: 'd';
  &[e]{
    f: 'g';
@@ -147,7 +146,7 @@ body ^^ .shadow {
 }
 
 @unknown foo 42 (bar) {
-    x {y: z}    
+    x {y: z}
 }
 
 @unknown foo 43;

package/less/_main/css-escapes.less

@@ -14,7 +14,7 @@
 
     strong {
         color: @ugly;
-        .mixin\!tUp;
+        .mixin\!tUp();
     }
 }
 

package/less/_main/css-guards.less

@@ -80,7 +80,7 @@
   & when (@c = 3) {
     height: 1px;
   }
-  + & when (@c = 3) { // creates invalid css but tests that we don't fold it in
+  * & when (@c = 3) {
     sibling: true;
   }
 }

package/less/_main/detached-rulesets.less

@@ -67,7 +67,7 @@ header {
 }
 @my-ruleset: {
     .my-selector {
-      @media tv {
+      @media (tv) {
         background-color: black;
       }
     }
@@ -75,7 +75,7 @@ header {
 @media (orientation:portrait) {
     @my-ruleset();
     .wrap-media-mixin({
-      @media tv {
+      @media (tv) {
         .triple-wrapped-mq {
           triple: true;
         }
@@ -83,8 +83,8 @@ header {
     });
 }
 .wrap-media-mixin(@ruleset) {
-  @media widescreen {
-    @media print {
+  @media (widescreen) {
+    @media (print) {
       @ruleset();
     }
     @ruleset();

package/less/_main/directives-bubling.less

@@ -122,7 +122,7 @@
 }
 
 html {
-    .nestedSupportsMixin;
+    .nestedSupportsMixin();
 }
 
 // selectors should not propagate into all directive types

package/less/_main/extend-chaining.less

@@ -73,14 +73,14 @@
 
 // media queries - don't extend outside, do extend inside
 
-@media tv {
+@media (tv) {
   .ma:extend(.a,.b,.c,.d,.e,.f,.g,.h,.i,.j,.k,.l,.m,.n,.o,.p,.q,.r,.s,.t,.u,.v,.w,.x,.y,.z,.md) {
     color: black;
   }
   .md {
     color: inherit;
   }
-  @media plasma {
+  @media (plasma) {
     .me, .mf {
       &:extend(.mb,.md);
       background: red;

package/less/_main/extend-media.less

@@ -2,14 +2,14 @@
   background: black;
 }
 
-@media tv {
+@media (tv) {
   .ext1 .ext3 {
     color: inherit;
   }
   .tv-lowres :extend(.ext1 all) {
     background: blue;
   }
-  @media hires {
+  @media (hires) {
     .ext1 .ext4 {
       color: green;
     }

package/less/_main/extract-and-length.less

@@ -5,12 +5,12 @@
 .a(@i: length(@cols)) when (@i > 0) {
   @divider: e(extract(@cols, @i));
 }
-.a;
+.a();
 
 .b(@j: 1) when (@j < length(@cols)) {
   @divider: e(extract(@cols, @j));
 }
-.b;
+.b();
 
 // simple array/list:
 

package/less/_main/functions.less

@@ -116,8 +116,11 @@
   min: min(6, 5);
   min: min(1pt, 3pt);
   min: min(1cm, 3mm);
+  min: min(6em, 5, 4ex, 3, 2pt, 1);
   max: max(1, 3);
   max: max(3em, 1em, 2em, 5em);
+  max: max(1px, 2, 3em, 4, 5m, 6);
+  max-native: max(10vw, 100px);
   percentage: percentage((10px / 50));
   color-quoted-digit: color("#dda0dd");
   color-quoted-keyword: color("plum");
@@ -134,11 +137,11 @@
 
   fade-out: fadeout(red, 5%); // support fadeOut and fadeout
   fade-in: fadein(fadeout(red, 10%), 5%);
-  fade-out-relative: fadeout(red, 5%,relative); 
+  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:  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);
 
@@ -152,6 +155,8 @@
     @rules: {
       color: red;
     };
+    rules-defined: isdefined(@rules);
+    foo-defined: isdefined(@foo);
     ruleset: isruleset(@rules);
     color: iscolor(#ddd);
     color1: iscolor(red);
@@ -266,7 +271,7 @@ html {
   // 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 */
 
@@ -282,3 +287,17 @@ html {
   });
   @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/less/_main/impor.less

@@ -0,0 +1,5 @@
+// https://github.com/less/less.js/issues/3660
+// const dir = parserInput.$re(/^@import?\s+/);
+// correct regexp is /^@import\s+/
+// so follow code will change nothing, parse result is same with raw less code
+@impor "impor-typo-dont-parse-as-@import.less";

package/less/_main/import/import-and-relative-paths-test.less

@@ -12,6 +12,6 @@
 }
 
 #imported-relative-path {
-    .unquoted-relative-path-bg;
-    .quoted-relative-path-border-image;
+    .unquoted-relative-path-bg();
+    .quoted-relative-path-border-image();
 }

package/less/_main/import-reference-issues/comments-2991.less

@@ -0,0 +1,25 @@
+.referenced {
+	// This file should not output anything if referenced.
+    @media (hover) {
+        // This file should not output anything if referenced.
+    }
+	// This file should not output anything if referenced.
+    @media (hover) {
+		// This file should not output anything if referenced.
+    }
+	// This file should not output anything if referenced.
+    @media (hover) {
+        /* This file should not output anything if referenced. */
+    }
+	// This file should not output anything if referenced.
+    @media (hover) {
+        color: #000000;
+    }
+}
+// This file should not output anything if referenced.
+@media (hover) {
+	// This file should not output anything if referenced.
+}
+@media (hover) {
+	/* This file should not output anything if referenced. */
+}

package/less/_main/import-reference-issues.less

@@ -5,6 +5,7 @@
 // * #2716 - A file imported by reference and then normally - multiple imports should be independent
 // * #1968 - When using an @import (reference), mixins that contain an & selector get added to the compiled output improperly
 // * #2162 - Cannot put import by reference inside of a mixin (also doubles #1896)
+// * #2991 - Empty @media queries generated through line comments when compiling less file with (reference)
 
 // #1878: extend inside referenced file should not extend outside selectors
 @import (reference) "import-reference-issues/global-scope-import.less";
@@ -48,3 +49,5 @@ show-all-content {
 call-mixin-with-import-by-reference-inside {
   .mixin-with-import-by-reference-inside();
 }
+
+@import (reference) "import-reference-issues/comments-2991.less";

package/less/_main/import-remote.less

@@ -1,8 +1,8 @@
 // https://github.com/less/less.js/issues/3541
 @import (reference) url(https://cdn.jsdelivr.net/npm/@less/test-data/less/_main/selectors.less);
-@import (reference) url("https://cdn.jsdelivr.net/npm/@less/test-data/less/_main/scope.less");
+@import (reference) url("https://cdn.jsdelivr.net/npm/@less/test-data/less/_main/media.less");
 @import (reference) url("https://cdn.jsdelivr.net/npm/@less/test-data/less/_main/empty.less?arg");
 
 .test {
-  color: @x;
+  color: @var;
 }

package/less/_main/import.less

@@ -9,7 +9,7 @@
 @import url("//ha.com/file.css") (min-width:@var);
 
 #import-test {
-  .mixin;
+  .mixin();
   width: 10px;
   height: (@a + 10%);
   value: pi-anon();

package/less/_main/javascript.less

@@ -30,9 +30,9 @@
 }
 .transitions(...) {
   @arg: ~`"@{arguments}".replace(/[\[\]]*/g, '')`;
-  1: @arg;              // rounded to integers
-  2: ~`"@{arguments}"`; // rounded to integers
-  3: @arguments;        // OK
+  one: @arg;              // rounded to integers
+  two: ~`"@{arguments}"`; // rounded to integers
+  three: @arguments;        // OK
 }
 .test-rule-tran {
   .transitions(opacity 0.3s ease-in 0.3s, max-height 0.6s linear, margin-bottom 0.4s linear;);

package/less/_main/media.less

@@ -62,11 +62,11 @@
 
 @media a {
   .first {
-    @media b {
+    @media (b) {
       .second {
         .third {
           width: 300px;
-          @media c {
+          @media (c) {
             width: 500px;
           }
         }
@@ -79,10 +79,10 @@
 }
 
 .body {
-    @media a, b and c {
+    @media a, (b) and (c) {
         width: 95%;
 
-        @media x, y {
+        @media (x), (y) {
             width: 100%;
         }
     }
@@ -226,7 +226,7 @@
   }
 }
 @all: ~"all";
-@tv: ~"tv";
+@tv: ~"(tv)";
 @media @all and @tv {
   .all-and-tv-variables {
     var: all-and-tv;
@@ -238,4 +238,62 @@
   .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 (example, all,), speech { 
+  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) {
+    .test-range-syntax {
+        padding: 0;
+    }
+  }
+}

package/less/_main/mixin-noparens.less

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

package/less/_main/mixins-closure.less

@@ -6,12 +6,12 @@
 }
 
 .class {
-    .scope > .mixin;
+    .scope > .mixin();
 }
 
 .overwrite {
     @var: 0px;
-    .scope > .mixin;
+    .scope > .mixin();
 }
 
 .nested {
@@ -21,6 +21,6 @@
     }
     .class {
         @var: 10px;
-       .mixin;
+       .mixin();
     }
 }