Migrate Less to use valid CSS (#4357)

matthew-dean · web-flow · commit 9c0615936e8c · 2025-08-10T10:59:31.000-07:00
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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*/
diff --git 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
@@ -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,16 +110,16 @@ h1 { color: green; }
     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/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');
+e('/* anything to unquote */');
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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": [

Original file line number	Diff line number	Diff line change
`@@ -78,6 +78,6 @@`
`78`	`78`	`/* } */`
`79`	`79`	`/by block /`
`80`	`80`	`#output-block {`
`81`		`- comment: /* // Not commented out // */;`
	`81`	`+ --comment: /* // Not commented out // */;`
`82`	`82`	`}`
`83`	`83`	`/comment on last line/`
Original file line number	Diff line number	Diff line change
`@@ -204,7 +204,9 @@`
`204`	`204`	`font-size: 1rem;`
`205`	`205`	`}`
`206`	`206`	`@media (hover: hover) {`
`207`		`- font-size: 1.75rem;`
	`207`	`+ .foo {`
	`208`	`+ font-size: 1.75rem;`
	`209`	`+ }`
`208`	`210`	`}`
`209`	`211`	`}`
`210`	`212`	`.media-2 {`
`@@ -220,9 +222,13 @@`
`220`	`222`	`font-size: 1rem;`
`221`	`223`	`}`
`222`	`224`	`@media (hover: hover) {`
`223`		`- font-size: 1.75rem;`
	`225`	`+ .foo {`
	`226`	`+ font-size: 1.75rem;`
	`227`	`+ }`
`224`	`228`	`@media not all and (hover: hover) {`
`225`		`- color: limegreen;`
	`229`	`+ .foo {`
	`230`	`+ color: limegreen;`
	`231`	`+ }`
`226`	`232`	`}`
`227`	`233`	`.media-3 {`
`228`	`234`	`padding: 0.5rem;`
`@@ -235,7 +241,9 @@`
`235`	`241`	`}`
`236`	`242`	`@container (min-width: 768px) {`
`237`	`243`	`@media only screen and (min-width: 768px) {`
`238`		`- color: aliceblue;`
	`244`	`+ .foo {`
	`245`	`+ color: aliceblue;`
	`246`	`+ }`
`239`	`247`	`}`
`240`	`248`	`.container-1 {`
`241`	`249`	`color: purple;`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+@namespace foo url(http://www.example.com);`
`1`	`2`	`.comma-delimited {`
`2`	`3`	`text-shadow: -1px -1px 1px red, 6px 5px 5px yellow;`
`3`	`4`	`-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 @@`
`17`	`18`	`p:not([class*="lead"]) {`
`18`	`19`	`color: black;`
`19`	`20`	`}`
`20`		`-input[type="text"].class#id[attr=32]:not(1) {`
	`21`	`+input[type="text"].class#id[attr=i32]:not(.one) {`
`21`	`22`	`color: inherit;`
`22`	`23`	`}`
`23`		`-div#id.class[a=1][b=2].class:not(1) {`
	`24`	`+div#id.class[a=one][b=two].class:not(.one) {`
`24`	`25`	`color: inherit;`
`25`	`26`	`}`
`26`	`27`	`ul.comma > li:not(:only-child)::after {`
`@@ -88,7 +89,6 @@ p::before {`
`88`	`89`	`@viewport {`
`89`	`90`	`font-size: 10px;`
`90`	`91`	`}`
`91`		`-@namespace foo url(http://www.example.com);`
`92`	`92`	`foo\|h1 {`
`93`	`93`	`color: blue;`
`94`	`94`	`}`
`@@ -109,15 +109,15 @@ h1 {`
`109`	`109`	`display: block;`
`110`	`110`	`}`
`111`	`111`	`}`
`112`		`-::distributed(input::placeholder) {`
	`112`	`+:not(input::placeholder) {`
`113`	`113`	`color: #b3b3b3;`
`114`	`114`	`}`
`115`	`115`	`.shadow > .dom,`
`116`	`116`	`body > .shadow {`
`117`	`117`	`display: done;`
`118`	`118`	`}`
`119`		`-:host(.sel .a),`
`120`		`-:host-context(.sel .b),`
	`119`	`+:host(.sel.a),`
	`120`	`+:host-context(.sel.b),`
`121`	`121`	`.sel > .b,`
`122`	`122`	`::content .sel {`
`123`	`123`	`type: shadow-dom;`
Original file line number	Diff line number	Diff line change
`@@ -28,4 +28,4 @@ ng\:form {`
`28`	`28`	`textarea {`
`29`	`29`	`font-family: 'helvetica neue', 'wenquanyi micro hei', \5FAE\8F6F\96C5\9ED1, \5B8B\4F53, sans-serif;`
`30`	`30`	`}`
`31`		`-anything to unquote`
	`31`	`+/* anything to unquote */`
-Original file line number
+Diff line change
   a: 1;
   b: 2;
   c: 3;
 -  e: ;
 +  --e: ;
   f: 6;
   g: 3;
   h: 5;
Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`		`-input[type="text"].class#id[attr=32]:not(1) {`
	`1`	`+input[type="text"].class#id[attr=i32]:not(.one) {`
`2`	`2`	`color: inherit;`
`3`	`3`	`}`
`4`		`-div#id.class[a=1][b=2].class:not(1) {`
	`4`	`+div#id.class[a=one][b=two].class:not(.one) {`
`5`	`5`	`color: inherit;`
`6`	`6`	`}`
`7`	`7`	`@media print {`
Original file line number	Diff line number	Diff line change
`@@ -8,7 +8,7 @@`
`8`	`8`	`multiline: 2;`
`9`	`9`	`}`
`10`	`10`	`.scope {`
`11`		`- empty: ;`
	`11`	`+ --empty: ;`
`12`	`12`	`var: 42;`
`13`	`13`	`escaped: 7px;`
`14`	`14`	`}`
Original file line number	Diff line number	Diff line change
`@@ -241,11 +241,6 @@`
`241`	`241`	`background: green;`
`242`	`242`	`}`
`243`	`243`	`}`
`244`		`-@media (example, all), speech {`
`245`		`- body {`
`246`		`- background: green;`
`247`		`- }`
`248`		`-}`
`249`	`244`	`@media (min-orientation: portrait) {`
`250`	`245`	`body {`
`251`	`246`	`background: green;`