From f150c18016e1d50bcf41c985c2bd957563476329 Mon Sep 17 00:00:00 2001
From: Matthew Dean <matthew-dean@users.noreply.github.com>
Date: Sat, 9 Aug 2025 17:36:19 -0700
Subject: [PATCH] Migrate Less to use valid CSS

---
 packages/less/package.json                       |  1 +
 packages/test-data/css/_main/comments.css        |  2 +-
 packages/test-data/css/_main/container.css       | 16 ++++++++++++----
 packages/test-data/css/_main/css-3.css           | 12 ++++++------
 packages/test-data/css/_main/css-escapes.css     |  2 +-
 .../test-data/css/_main/extract-and-length.css   |  2 +-
 packages/test-data/css/_main/functions.css       |  2 +-
 .../test-data/css/_main/import-reference.css     |  4 ++--
 packages/test-data/css/_main/javascript.css      |  2 +-
 packages/test-data/css/_main/media.css           |  5 -----
 .../test-data/css/_main/mixins-interpolated.css  |  2 +-
 packages/test-data/css/_main/selectors.css       |  3 +--
 packages/test-data/css/_main/strings.css         |  3 ---
 packages/test-data/less/_main/comments.less      |  2 +-
 packages/test-data/less/_main/container.less     | 16 +++++++++++-----
 packages/test-data/less/_main/css-3.less         | 12 ++++++------
 packages/test-data/less/_main/css-escapes.less   |  2 +-
 .../test-data/less/_main/extract-and-length.less |  2 +-
 packages/test-data/less/_main/functions.less     |  2 +-
 packages/test-data/less/_main/javascript.less    |  2 +-
 packages/test-data/less/_main/media.less         |  6 ------
 .../less/_main/mixins-interpolated.less          |  4 ++--
 packages/test-data/less/_main/selectors.less     |  3 +--
 packages/test-data/less/_main/strings.less       |  3 ---
 packages/test-data/package.json                  |  2 +-
 25 files changed, 54 insertions(+), 58 deletions(-)

diff --git a/packages/less/package.json b/packages/less/package.json
index 012b3da63..9cac1dbc5 100644
--- a/packages/less/package.json
+++ b/packages/less/package.json
@@ -35,6 +35,7 @@
 		"node": ">=14"
 	},
 	"scripts": {
+		"quicktest": "grunt quicktest",
 		"test": "grunt test",
 		"grunt": "grunt",
 		"lint": "eslint '**/*.{ts,js}'",
diff --git a/packages/test-data/css/_main/comments.css b/packages/test-data/css/_main/comments.css
index 3a24255a1..03a41eaad 100644
--- a/packages/test-data/css/_main/comments.css
+++ b/packages/test-data/css/_main/comments.css
@@ -78,6 +78,6 @@
 /* } */
 /*by block */
 #output-block {
-  comment: /* // Not commented out // */;
+  --comment: /* // Not commented out // */;
 }
 /*comment on last line*/
diff --git a/packages/test-data/css/_main/container.css b/packages/test-data/css/_main/container.css
index 39aa6af87..2d518f871 100644
--- a/packages/test-data/css/_main/container.css
+++ b/packages/test-data/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,7 +241,9 @@
 }
 @container (min-width: 768px) {
   @media only screen and (min-width: 768px) {
-    color: aliceblue;
+    .foo {
+      color: aliceblue;
+    }
   }
   .container-1 {
     color: purple;
diff --git a/packages/test-data/css/_main/css-3.css b/packages/test-data/css/_main/css-3.css
index d1316defb..032eeb3f2 100644
--- a/packages/test-data/css/_main/css-3.css
+++ b/packages/test-data/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;
diff --git a/packages/test-data/css/_main/css-escapes.css b/packages/test-data/css/_main/css-escapes.css
index 82471cb58..f48e0c857 100644
--- a/packages/test-data/css/_main/css-escapes.css
+++ b/packages/test-data/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 */
diff --git a/packages/test-data/css/_main/extract-and-length.css b/packages/test-data/css/_main/extract-and-length.css
index dc69341c1..626ae4d06 100644
--- a/packages/test-data/css/_main/extract-and-length.css
+++ b/packages/test-data/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;
diff --git a/packages/test-data/css/_main/functions.css b/packages/test-data/css/_main/functions.css
index 2e0a5b325..4876f5874 100644
--- a/packages/test-data/css/_main/functions.css
+++ b/packages/test-data/css/_main/functions.css
@@ -229,7 +229,7 @@ html {
   a: 1;
   b: 2;
   c: 3;
-  e: ;
+  --e: ;
   f: 6;
   g: 3;
   h: 5;
diff --git a/packages/test-data/css/_main/import-reference.css b/packages/test-data/css/_main/import-reference.css
index a0d712457..eb14b783f 100644
--- a/packages/test-data/css/_main/import-reference.css
+++ b/packages/test-data/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 {
diff --git a/packages/test-data/css/_main/javascript.css b/packages/test-data/css/_main/javascript.css
index 9a1682700..9172f812f 100644
--- a/packages/test-data/css/_main/javascript.css
+++ b/packages/test-data/css/_main/javascript.css
@@ -8,7 +8,7 @@
   multiline: 2;
 }
 .scope {
-  empty: ;
+  --empty: ;
   var: 42;
   escaped: 7px;
 }
diff --git a/packages/test-data/css/_main/media.css b/packages/test-data/css/_main/media.css
index 83b241bab..62cffe6a6 100644
--- a/packages/test-data/css/_main/media.css
+++ b/packages/test-data/css/_main/media.css
@@ -241,11 +241,6 @@
     background: green;
   }
 }
-@media (example, all), speech {
-  body {
-    background: green;
-  }
-}
 @media (min-orientation: portrait) {
   body {
     background: green;
diff --git a/packages/test-data/css/_main/mixins-interpolated.css b/packages/test-data/css/_main/mixins-interpolated.css
index 0d511fc67..9a87c35f9 100644
--- a/packages/test-data/css/_main/mixins-interpolated.css
+++ b/packages/test-data/css/_main/mixins-interpolated.css
@@ -1,4 +1,4 @@
-.123 {
+.\123 {
   a: 0;
 }
 .foo {
diff --git a/packages/test-data/css/_main/selectors.css b/packages/test-data/css/_main/selectors.css
index 92c8b824f..1ac271954 100644
--- a/packages/test-data/css/_main/selectors.css
+++ b/packages/test-data/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;
 }
diff --git a/packages/test-data/css/_main/strings.css b/packages/test-data/css/_main/strings.css
index b40cf6abb..e889cc0dc 100644
--- a/packages/test-data/css/_main/strings.css
+++ b/packages/test-data/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);
 }
diff --git a/packages/test-data/less/_main/comments.less b/packages/test-data/less/_main/comments.less
index 900d77da3..bdf3b2960 100644
--- a/packages/test-data/less/_main/comments.less
+++ b/packages/test-data/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*/
\ No newline at end of file
diff --git a/packages/test-data/less/_main/container.less b/packages/test-data/less/_main/container.less
index d592eafd4..6dcdd6068 100644
--- a/packages/test-data/less/_main/container.less
+++ b/packages/test-data/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,7 +286,9 @@
 
 @container (min-width: 768px) {
     @media only screen and (min-width: 768px) {
-        color: aliceblue;
+        .foo {
+            color: aliceblue;
+        }
     }
 
     .container-1 {
diff --git a/packages/test-data/less/_main/css-3.less b/packages/test-data/less/_main/css-3.less
index 6ffac725d..9fc0abc84 100644
--- a/packages/test-data/less/_main/css-3.less
+++ b/packages/test-data/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;
diff --git a/packages/test-data/less/_main/css-escapes.less b/packages/test-data/less/_main/css-escapes.less
index cf42940e7..31e1c2264 100644
--- a/packages/test-data/less/_main/css-escapes.less
+++ b/packages/test-data/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');
\ No newline at end of file
+e('/* anything to unquote */');
\ No newline at end of file
diff --git a/packages/test-data/less/_main/extract-and-length.less b/packages/test-data/less/_main/extract-and-length.less
index 8de68d1e8..f7c8adbfb 100644
--- a/packages/test-data/less/_main/extract-and-length.less
+++ b/packages/test-data/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");
diff --git a/packages/test-data/less/_main/functions.less b/packages/test-data/less/_main/functions.less
index 593f32aa7..bc476b6e2 100644
--- a/packages/test-data/less/_main/functions.less
+++ b/packages/test-data/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);
diff --git a/packages/test-data/less/_main/javascript.less b/packages/test-data/less/_main/javascript.less
index b535dd99d..522feeb13 100644
--- a/packages/test-data/less/_main/javascript.less
+++ b/packages/test-data/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'`;
diff --git a/packages/test-data/less/_main/media.less b/packages/test-data/less/_main/media.less
index 82e9e7cc3..c66802747 100644
--- a/packages/test-data/less/_main/media.less
+++ b/packages/test-data/less/_main/media.less
@@ -264,12 +264,6 @@
   }
 }
 
-@media (example, all,), speech { 
-  body { 
-    background: green; 
-  }
-}
-
 @media (min-orientation:portrait) {
   body { 
     background: green; 
diff --git a/packages/test-data/less/_main/mixins-interpolated.less b/packages/test-data/less/_main/mixins-interpolated.less
index 4be88c991..afd960075 100644
--- a/packages/test-data/less/_main/mixins-interpolated.less
+++ b/packages/test-data/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();
 }
diff --git a/packages/test-data/less/_main/selectors.less b/packages/test-data/less/_main/selectors.less
index c976380a8..3ad7c68fa 100644
--- a/packages/test-data/less/_main/selectors.less
+++ b/packages/test-data/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;
 }
diff --git a/packages/test-data/less/_main/strings.less b/packages/test-data/less/_main/strings.less
index 43746053d..28abb5467 100644
--- a/packages/test-data/less/_main/strings.less
+++ b/packages/test-data/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 {
diff --git a/packages/test-data/package.json b/packages/test-data/package.json
index 590d2f3cd..5ffd7a101 100644
--- a/packages/test-data/package.json
+++ b/packages/test-data/package.json
@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "4.4.1",
+  "version": "4.4.2",
   "description": "Less files and CSS results",
   "author": "Alexis Sellier <self@cloudhead.net>",
   "contributors": [