@less/test-data 4.3.0 → 4.4.2

package/css/_main/colors.css

@@ -102,3 +102,39 @@
   --semi-transparent-dark-background: #001e00ee;
   --semi-transparent-dark-background-2: #001e00;
 }
+.color-oklch-sub {
+  background: oklch(from #0000FF calc(l - 0.1) c h);
+}
+.color-oklch-add {
+  background: oklch(from #0000FF calc(l + 0.1) c h);
+}
+.color-oklch-mult {
+  background: oklch(from #0000FF calc(l * 0.1) c h);
+}
+.color-oklch-div {
+  background: oklch(from #0000FF calc(l / 2) c h);
+}
+.color-hsl-sub {
+  background: hsl(from #0000FF calc(h - 1) s l);
+}
+.color-hsl-add {
+  background: hsl(from #0000FF calc(h + 1) s l);
+}
+.color-hsl-mult {
+  background: hsl(from #0000FF calc(h * 1) s l);
+}
+.color-hsl-div {
+  background: hsl(from #0000FF calc(h / 2) s l);
+}
+.color-rgb-sub {
+  background: rgb(from #0000FF calc(r - 1) g b);
+}
+.color-rgb-add {
+  background: rgb(from #0000FF calc(r + 1) g b);
+}
+.color-rgb-mult {
+  background: rgb(from #0000FF calc(r * 1) g b);
+}
+.color-rgb-div {
+  background: rgb(from #0000FF calc(r / 2) g b);
+}

package/css/_main/comments.css

@@ -78,6 +78,6 @@
 /* } */
 /*by block */
 #output-block {
-  comment: /* // Not commented out // */;
+  --comment: /* // Not commented out // */;
 }
 /*comment on last line*/

package/css/_main/container.css

@@ -204,7 +204,9 @@
       font-size: 1rem;
     }
     @media (hover: hover) {
-      font-size: 1.75rem;
+      .foo {
+        font-size: 1.75rem;
+      }
     }
   }
   .media-2 {
@@ -220,9 +222,13 @@
       font-size: 1rem;
     }
     @media (hover: hover) {
-      font-size: 1.75rem;
+      .foo {
+        font-size: 1.75rem;
+      }
       @media not all and (hover: hover) {
-        color: limegreen;
+        .foo {
+          color: limegreen;
+        }
       }
       .media-3 {
         padding: 0.5rem;
@@ -235,9 +241,30 @@
 }
 @container (min-width: 768px) {
   @media only screen and (min-width: 768px) {
-    color: aliceblue;
+    .foo {
+      color: aliceblue;
+    }
   }
   .container-1 {
     color: purple;
   }
 }
+#sticky {
+  position: sticky;
+  container-type: scroll-state;
+}
+@container scroll-state(stuck: top) {
+  #sticky-child {
+    font-size: 75%;
+  }
+}
+@container scroll-state(snapped: x) {
+  #sticky-child {
+    font-size: 75%;
+  }
+}
+@container scroll-state(scrollable: top) {
+  #sticky-child {
+    font-size: 75%;
+  }
+}

package/css/_main/css-3.css

@@ -1,3 +1,4 @@
+@namespace foo url(http://www.example.com);
 .comma-delimited {
   text-shadow: -1px -1px 1px red, 6px 5px 5px yellow;
   -moz-box-shadow: 0pt 0pt 2px rgba(255, 255, 255, 0.4) inset, 0pt 4px 6px rgba(255, 255, 255, 0.4) inset;
@@ -17,10 +18,10 @@
 p:not([class*="lead"]) {
   color: black;
 }
-input[type="text"].class#id[attr=32]:not(1) {
+input[type="text"].class#id[attr=i32]:not(.one) {
   color: inherit;
 }
-div#id.class[a=1][b=2].class:not(1) {
+div#id.class[a=one][b=two].class:not(.one) {
   color: inherit;
 }
 ul.comma > li:not(:only-child)::after {
@@ -88,7 +89,6 @@ p::before {
 @viewport {
   font-size: 10px;
 }
-@namespace foo url(http://www.example.com);
 foo|h1 {
   color: blue;
 }
@@ -109,15 +109,15 @@ h1 {
     display: block;
   }
 }
-::distributed(input::placeholder) {
+:not(input::placeholder) {
   color: #b3b3b3;
 }
 .shadow > .dom,
 body > .shadow {
   display: done;
 }
-:host(.sel .a),
-:host-context(.sel .b),
+:host(.sel.a),
+:host-context(.sel.b),
 .sel > .b,
 ::content .sel {
   type: shadow-dom;

package/css/_main/css-escapes.css

@@ -28,4 +28,4 @@ ng\:form {
 textarea {
   font-family: 'helvetica neue', 'wenquanyi micro hei', \5FAE\8F6F\96C5\9ED1, \5B8B\4F53, sans-serif;
 }
-anything to unquote
+/* anything to unquote */

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

@@ -15,7 +15,7 @@
   number-value: 12345678;
   color-value: blue;
   rgba-value: rgba(80, 160, 240, 0.67);
-  empty-value: ;
+  --empty-value: ;
   name-length: 1;
   string-length: 1;
   number-length: 1;

package/css/_main/functions.css

@@ -229,7 +229,7 @@ html {
   a: 1;
   b: 2;
   c: 3;
-  e: ;
+  --e: ;
   f: 6;
   g: 3;
   h: 5;

package/css/_main/import-reference.css

@@ -1,7 +1,7 @@
-input[type="text"].class#id[attr=32]:not(1) {
+input[type="text"].class#id[attr=i32]:not(.one) {
   color: inherit;
 }
-div#id.class[a=1][b=2].class:not(1) {
+div#id.class[a=one][b=two].class:not(.one) {
   color: inherit;
 }
 @media print {

package/css/_main/javascript.css

@@ -8,7 +8,7 @@
   multiline: 2;
 }
 .scope {
-  empty: ;
+  --empty: ;
   var: 42;
   escaped: 7px;
 }

package/css/_main/layer.css

@@ -0,0 +1,93 @@
+@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;
+  }
+}

package/css/_main/media.css

@@ -241,11 +241,6 @@
     background: green;
   }
 }
-@media (example, all), speech {
-  body {
-    background: green;
-  }
-}
 @media (min-orientation: portrait) {
   body {
     background: green;

package/css/_main/mixins-interpolated.css

@@ -1,4 +1,4 @@
-.123 {
+.\123 {
   a: 0;
 }
 .foo {

package/css/_main/selectors.css

@@ -132,14 +132,13 @@ p a span {
   color: #ff0000;
 }
 [prop],
-[prop=10%],
+[prop=ten-percent],
 [prop|="value3"],
 [prop*="val3"],
 [|prop~="val3"],
 [*|prop$="val3"],
 [ns|prop^="val3"],
 [p^="val3"],
-[p=3],
 [p] {
   attributes: yes;
 }

package/css/_main/strings.css

@@ -16,9 +16,6 @@
   empty: '';
   semi-colon: ';';
 }
-#escaped {
-  filter: DX.Transform.MS.BS.filter(opacity=50);
-}
 #one-line {
   image: url(http://tooks.com);
 }

package/less/_main/colors.less

@@ -114,3 +114,51 @@
   --semi-transparent-dark-background: #001e00ee;
   --semi-transparent-dark-background-2: rgba(0, 30, 0, 238); // invalid opacity will be capped
 }
+
+.color-oklch-sub {
+  background: oklch(from #0000FF calc(l - 0.1) c h); 
+}
+
+.color-oklch-add {
+  background: oklch(from #0000FF calc(l + 0.1) c h);
+}
+
+.color-oklch-mult {
+  background: oklch(from #0000FF calc(l * 0.1) c h);
+}
+
+.color-oklch-div {
+  background: oklch(from #0000FF calc(l / 2) c h);
+}
+
+.color-hsl-sub {
+  background: hsl(from #0000FF calc(h - 1) s l);
+}
+
+.color-hsl-add {
+  background: hsl(from #0000FF calc(h + 1) s l);
+}
+
+.color-hsl-mult {
+  background: hsl(from #0000FF calc(h * 1) s l);
+}
+
+.color-hsl-div {
+  background: hsl(from #0000FF calc(h / 2) s l);
+}
+
+.color-rgb-sub {
+  background: rgb(from #0000FF calc(r - 1) g b);
+}
+
+.color-rgb-add {
+  background: rgb(from #0000FF calc(r + 1) g b);
+}
+
+.color-rgb-mult {
+  background: rgb(from #0000FF calc(r * 1) g b);
+}
+
+.color-rgb-div {
+  background: rgb(from #0000FF calc(r / 2) g b);
+}

package/less/_main/comments.less

@@ -98,5 +98,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/less/_main/container.less

@@ -243,7 +243,9 @@
         }
 
         @media (hover: hover) {
-            font-size: 1.75rem;
+            .foo {
+                font-size: 1.75rem;
+            }
         }
     }
 
@@ -263,10 +265,12 @@
         }
 
         @media (hover: hover) {
-            font-size: 1.75rem;
+            .foo {
+                font-size: 1.75rem;
 
-            @media not all and (hover: hover) {
-                color: limegreen;
+                @media not all and (hover: hover) {
+                    color: limegreen;
+                }
             }
 
             .media-3 {
@@ -282,10 +286,35 @@
 
 @container (min-width: 768px) {
     @media only screen and (min-width: 768px) {
-        color: aliceblue;
+        .foo {
+            color: aliceblue;
+        }
     }
 
     .container-1 {
         color: purple;
     }
 }
+
+#sticky {
+    position: sticky;
+    container-type: scroll-state;
+}
+
+@container scroll-state(stuck: top) {
+    #sticky-child {
+      font-size: 75%;
+    }
+}
+
+@container scroll-state(snapped: x) {
+    #sticky-child {
+      font-size: 75%;
+    }
+}
+
+@container scroll-state(scrollable: top) {
+    #sticky-child {
+      font-size: 75%;
+    }
+}

package/less/_main/css-3.less

@@ -1,3 +1,4 @@
+@namespace foo url(http://www.example.com);
 .comma-delimited {
   text-shadow: -1px -1px 1px red, 6px 5px 5px yellow;
   -moz-box-shadow: 0pt 0pt 2px rgba(255, 255, 255, 0.4) inset,
@@ -19,11 +20,11 @@ p:not([class*="lead"]) {
   color: black;
 }
 
-input[type="text"].class#id[attr=32]:not(1) {
+input[type="text"].class#id[attr=i32]:not(.one) {
   color: inherit;
 }
 
-div#id.class[a=1][b=2].class:not(1) {
+div#id.class[a=one][b=two].class:not(.one) {
   color: inherit;
 }
 
@@ -96,7 +97,6 @@ p::before {
 @viewport {
   font-size: 10px;
 }
-@namespace foo url(http://www.example.com);
 
 foo|h1 { color: blue; }
 foo|* { color: yellow; }
@@ -110,7 +110,7 @@ h1 { color: green; }
     display: block;
   }
 }
-::distributed(input::placeholder) {
+:not(input::placeholder) {
   color: #b3b3b3;
 }
 .shadow > .dom,
@@ -118,8 +118,8 @@ body > .shadow {
   display: done;
 }
 
-:host(.sel .a),
-:host-context(.sel .b),
+:host(.sel.a),
+:host-context(.sel.b),
 .sel > .b,
 ::content .sel {
   type: shadow-dom;

package/less/_main/css-escapes.less

@@ -41,4 +41,4 @@ textarea {
     font-family: 'helvetica neue','wenquanyi micro hei',\5FAE\8F6F\96C5\9ED1, \5B8B\4F53, sans-serif;
 }
 
-e('anything to unquote');
+e('/* anything to unquote */');

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

@@ -38,7 +38,7 @@
     number-value:  extract(12345678, 1);
     color-value:   extract(blue, 1);
     rgba-value:    extract(rgba(80, 160, 240, 0.67), 1);
-    empty-value:   extract(~'', 1);
+    --empty-value:   extract(~'', 1);
 
     name-length:   length(name);
     string-length: length("string");

package/less/_main/functions.less

@@ -263,7 +263,7 @@ html {
   b: if(not(true), 1, 2);
   @1: if(not(false), {c: 3}, {d: 4}); @1();
 
-  e: if(not(true), 5);
+  --e: if(not(true), 5);
   @f: boolean(3 = 4);
   f: if(not(@f), 6);
   g: if(true, 3, 5);

package/less/_main/import/layer-import-2.css

@@ -0,0 +1,5 @@
+.sub-rule {
+    ul {
+        color: white;
+    }
+}

package/less/_main/import/layer-import-4.css

@@ -0,0 +1,5 @@
+.sub-rule {
+    ul {
+        color: white;
+    }
+}

package/less/_main/import/layer-import-5.css

@@ -0,0 +1,5 @@
+.sub-rule {
+    ul {
+        color: white;
+    }
+}

package/less/_main/import/layer-import.less

@@ -0,0 +1,5 @@
+.sub-rule {
+    ul {
+        color: white;
+    }
+}

package/less/_main/javascript.less

@@ -9,7 +9,7 @@
            return x})()`;
 }
 .scope {
-    empty: `+function(){}`;
+    --empty: `+function(){}`;
     @foo: 42;
     var: `parseInt(this.foo.toJS())`;
     escaped: ~`2 + 5 + 'px'`;

package/less/_main/layer.less

@@ -0,0 +1,112 @@
+.main {
+    @layer {
+        &::before {
+            color: #f00;
+        }
+    }
+}
+
+@layer legacy {
+    @import "./import/layer-import.less";
+}
+
+@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-name: primevue;
+
+@layer @layer-name {
+    .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;
+
+        header {
+            background-color: #f0f0f0;
+            padding: 1rem;
+        }
+    }
+}
+
+@layer components {
+    .button {
+        display: inline-block;
+        padding: 0.5rem 1rem;
+        background-color: blue;
+        color: white;
+
+        &:hover {
+            background-color: darkblue;
+        }
+    }
+}
+
+@layer utilities {
+    .text-center {
+        text-align: center;
+    }
+
+    .responsive {
+        width: 100%;
+
+        @media (min-width: 768px) {
+            width: 50%;
+        }
+    }
+}
+
+.parent {
+    color: black;
+
+    .child {
+        color: red;
+    }
+
+    &: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;
+    }
+}

package/less/_main/media.less

@@ -264,12 +264,6 @@
   }
 }
 
-@media (example, all,), speech { 
-  body { 
-    background: green; 
-  }
-}
-
 @media (min-orientation:portrait) {
   body { 
     background: green; 

package/less/_main/mixins-interpolated.less

@@ -1,5 +1,5 @@
 
-@a0: 123;
+@a0: \123;
 @a1: foo;
 @a2: ~".foo";
 @a4: ~"#foo";
@@ -25,7 +25,7 @@
 }
 
 mi-test-a {
-    .123();
+    .\123();
     .foo();
     #foo();
 }

package/less/_main/selectors.less

@@ -135,14 +135,13 @@ a {
 }
 @prop: p;
 [prop],
-[prop=10%],
+[prop=ten-percent],
 [prop|="value@{num}"],
 [prop*="val@{num}"],
 [|prop~="val@{num}"],
 [*|prop$="val@{num}"],
 [ns|prop^="val@{num}"],
 [@{prop}^="val@{num}"],
-[@{prop}=@{num}],
 [@{prop}] {
   attributes: yes;
 }

package/less/_main/strings.less

@@ -16,9 +16,6 @@
   empty: '';
   semi-colon: ';';
 }
-#escaped {
-  filter: ~"DX.Transform.MS.BS.filter(opacity=50)";
-}
 #one-line { image: url(http://tooks.com) }
 #crazy { image: url(http://), "}", url("http://}") }
 #interpolation {

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "4.3.0",
+  "version": "4.4.2",
   "description": "Less files and CSS results",
   "author": "Alexis Sellier <self@cloudhead.net>",
   "contributors": [