Examples contain more valid CSS, to test with a new parser (#3550)

matthew-dean · web-flow · commit 0e268598c832 · 2020-07-28T17:48:59.000-07:00
* Make Less tests contain more valid CSS
diff --git a/packages/test-data/css/_main/colors.css b/packages/test-data/css/_main/colors.css
@@ -43,14 +43,14 @@
 #grey {
   color: #c8c8c8;
 }
-#333333 {
-  color: #333333;
+#aa3333 {
+  color: #aa3333;
 }
-#808080 {
-  color: hsl(0, 0%, 50%);
+#bb8080 {
+  color: hsl(0, 30%, 62%);
 }
-#00ff00 {
-  color: hsl(120, 100%, 50%);
+#ccff00 {
+  color: hsl(72, 100%, 50%);
 }
 .lightenblue {
   color: #3333ff;
diff --git a/packages/test-data/css/_main/css-3.css b/packages/test-data/css/_main/css-3.css
@@ -95,9 +95,6 @@ foo|h1 {
 foo|* {
   color: yellow;
 }
-|h1 {
-  color: red;
-}
 *|h1 {
   color: green;
 }
@@ -115,20 +112,20 @@ h1 {
 ::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';
 }
- /deep/ b[e] {
+* b[e] {
   f: 'g';
 }
 #issue2066 {
diff --git a/packages/test-data/css/_main/css-guards.css b/packages/test-data/css/_main/css-guards.css
@@ -24,7 +24,7 @@
   color: red;
   height: 1px;
 }
- + .dont-split-me-up {
+* .dont-split-me-up {
   sibling: true;
 }
 .scope-check {
diff --git a/packages/test-data/css/_main/detached-rulesets.css b/packages/test-data/css/_main/detached-rulesets.css
@@ -46,22 +46,22 @@ html.lt-ie9 header {
 .without-mixins {
   b: 1;
 }
-@media (orientation: portrait) and tv {
+@media (orientation: portrait) and (tv) {
   .my-selector {
     background-color: black;
   }
 }
-@media (orientation: portrait) and widescreen and print and tv {
+@media (orientation: portrait) and (widescreen) and (print) and (tv) {
   .triple-wrapped-mq {
     triple: true;
   }
 }
-@media (orientation: portrait) and widescreen and tv {
+@media (orientation: portrait) and (widescreen) and (tv) {
   .triple-wrapped-mq {
     triple: true;
   }
 }
-@media (orientation: portrait) and tv {
+@media (orientation: portrait) and (tv) {
   .triple-wrapped-mq {
     triple: true;
   }
diff --git a/packages/test-data/css/_main/extend-chaining.css b/packages/test-data/css/_main/extend-chaining.css
@@ -60,7 +60,7 @@
 .vc {
   color: inherit;
 }
-@media tv {
+@media (tv) {
   .ma,
   .mb,
   .mc {
@@ -73,7 +73,7 @@
     color: inherit;
   }
 }
-@media tv and plasma {
+@media (tv) and (plasma) {
   .me,
   .mf {
     background: red;
diff --git a/packages/test-data/css/_main/extend-media.css b/packages/test-data/css/_main/extend-media.css
@@ -2,7 +2,7 @@
 .all .ext2 {
   background: black;
 }
-@media tv {
+@media (tv) {
   .ext1 .ext3,
   .tv-lowres .ext3,
   .all .ext3 {
@@ -12,7 +12,7 @@
     background: blue;
   }
 }
-@media tv and hires {
+@media (tv) and (hires) {
   .ext1 .ext4,
   .tv-hires .ext4,
   .all .ext4 {
diff --git a/packages/test-data/css/_main/javascript.css b/packages/test-data/css/_main/javascript.css
@@ -23,7 +23,7 @@
   ary1: "1, 2, 3";
 }
 .test-rule-tran {
-  1: opacity 0.3s ease-in 0.3s, max-height 0.6s linear, margin-bottom 0.4s linear;
-  2: [opacity 0.3s ease-in 0.3s, max-height 0.6s linear, margin-bottom 0.4s linear];
-  3: opacity 0.3s ease-in 0.3s, max-height 0.6s linear, margin-bottom 0.4s linear;
+  one: opacity 0.3s ease-in 0.3s, max-height 0.6s linear, margin-bottom 0.4s linear;
+  two: [opacity 0.3s ease-in 0.3s, max-height 0.6s linear, margin-bottom 0.4s linear];
+  three: opacity 0.3s ease-in 0.3s, max-height 0.6s linear, margin-bottom 0.4s linear;
 }
diff --git a/packages/test-data/css/_main/media.css b/packages/test-data/css/_main/media.css
@@ -53,25 +53,25 @@
     width: 500px;
   }
 }
-@media a and b {
+@media a and (b) {
   .first .second .third {
     width: 300px;
   }
   .first .second .fourth {
     width: 3;
   }
 }
-@media a and b and c {
+@media a and (b) and (c) {
   .first .second .third {
     width: 500px;
   }
 }
-@media a, b and c {
+@media a, (b) and (c) {
   .body {
     width: 95%;
   }
 }
-@media a and x, b and c and x, a and y, b and c and y {
+@media a and (x), (b) and (c) and (x), a and (y), (b) and (c) and (y) {
   .body {
     width: 100%;
   }
@@ -211,7 +211,7 @@
     display: table-cell;
   }
 }
-@media all and tv {
+@media all and (tv) {
   .all-and-tv-variables {
     var: all-and-tv;
   }
diff --git a/packages/test-data/css/_main/mixins-guards-default-func.css b/packages/test-data/css/_main/mixins-guards-default-func.css
@@ -112,18 +112,18 @@ guard-default-multi-4 {
   always: 2;
   case: 2;
 }
-guard-default-not-ambiguos-2 {
+guard-default-not-ambiguous-2 {
   case: 1;
   not-default: 2;
 }
-guard-default-not-ambiguos-3 {
+guard-default-not-ambiguous-3 {
   case: 1;
   not-default-1: 2;
   not-default-2: 2;
 }
 guard-default-scopes-3 {
-  3: when default;
+  three: when default;
 }
 guard-default-scopes-1 {
-  1: no condition;
+  one: no condition;
 }
diff --git a/packages/test-data/css/_main/selectors.css b/packages/test-data/css/_main/selectors.css
@@ -133,14 +133,14 @@ p a span {
 }
 [prop],
 [prop=10%],
-[prop="value3"],
+[prop|="value3"],
 [prop*="val3"],
 [|prop~="val3"],
 [*|prop$="val3"],
 [ns|prop^="val3"],
-[3^="val3"],
-[3=3],
-[3] {
+[p^="val3"],
+[p=3],
+[p] {
   attributes: yes;
 }
 /*
diff --git a/packages/test-data/less/_main/colors.less b/packages/test-data/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 {
diff --git a/packages/test-data/less/_main/css-3.less b/packages/test-data/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;
diff --git a/packages/test-data/less/_main/css-guards.less b/packages/test-data/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;
   }
 }
diff --git a/packages/test-data/less/_main/detached-rulesets.less b/packages/test-data/less/_main/detached-rulesets.less
@@ -67,24 +67,24 @@ header {
 }
 @my-ruleset: {
     .my-selector {
-      @media tv {
+      @media (tv) {
         background-color: black;
       }
     }
   };
 @media (orientation:portrait) {
     @my-ruleset();
     .wrap-media-mixin({
-      @media tv {
+      @media (tv) {
         .triple-wrapped-mq {
           triple: true;
         }
       }
     });
 }
 .wrap-media-mixin(@ruleset) {
-  @media widescreen {
-    @media print {
+  @media (widescreen) {
+    @media (print) {
       @ruleset();
     }
     @ruleset();
diff --git a/packages/test-data/less/_main/extend-chaining.less b/packages/test-data/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;
diff --git a/packages/test-data/less/_main/extend-media.less b/packages/test-data/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;
     }
diff --git a/packages/test-data/less/_main/javascript.less b/packages/test-data/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;);
diff --git a/packages/test-data/less/_main/media.less b/packages/test-data/less/_main/media.less
diff --git a/packages/test-data/less/_main/mixins-guards-default-func.less b/packages/test-data/less/_main/mixins-guards-default-func.less
diff --git a/packages/test-data/less/_main/selectors.less b/packages/test-data/less/_main/selectors.less

Original file line number	Diff line number	Diff line change
`@@ -43,14 +43,14 @@`
`43`	`43`	`#grey {`
`44`	`44`	`color: #c8c8c8;`
`45`	`45`	`}`
`46`		`-#333333 {`
`47`		`- color: #333333;`
	`46`	`+#aa3333 {`
	`47`	`+ color: #aa3333;`
`48`	`48`	`}`
`49`		`-#808080 {`
`50`		`- color: hsl(0, 0%, 50%);`
	`49`	`+#bb8080 {`
	`50`	`+ color: hsl(0, 30%, 62%);`
`51`	`51`	`}`
`52`		`-#00ff00 {`
`53`		`- color: hsl(120, 100%, 50%);`
	`52`	`+#ccff00 {`
	`53`	`+ color: hsl(72, 100%, 50%);`
`54`	`54`	`}`
`55`	`55`	`.lightenblue {`
`56`	`56`	`color: #3333ff;`
Original file line number	Diff line number	Diff line change
`@@ -95,9 +95,6 @@ foo\|h1 {`
`95`	`95`	`foo\|* {`
`96`	`96`	`color: yellow;`
`97`	`97`	`}`
`98`		`-\|h1 {`
`99`		`- color: red;`
`100`		`-}`
`101`	`98`	`*\|h1 {`
`102`	`99`	`color: green;`
`103`	`100`	`}`
`@@ -115,20 +112,20 @@ h1 {`
`115`	`112`	`::distributed(input::placeholder) {`
`116`	`113`	`color: #b3b3b3;`
`117`	`114`	`}`
`118`		`-.shadow ^ .dom,`
`119`		`-body ^^ .shadow {`
	`115`	`+.shadow > .dom,`
	`116`	`+body > .shadow {`
`120`	`117`	`display: done;`
`121`	`118`	`}`
`122`	`119`	`:host(.sel .a),`
`123`	`120`	`:host-context(.sel .b),`
`124`		`-.sel /deep/ .b,`
	`121`	`+.sel > .b,`
`125`	`122`	`::content .sel {`
`126`	`123`	`type: shadow-dom;`
`127`	`124`	`}`
`128`		`- /deep/ b {`
	`125`	`+* b {`
`129`	`126`	`c: 'd';`
`130`	`127`	`}`
`131`		`- /deep/ b[e] {`
	`128`	`+* b[e] {`
`132`	`129`	`f: 'g';`
`133`	`130`	`}`
`134`	`131`	`#issue2066 {`
Original file line number	Diff line number	Diff line change
`@@ -24,7 +24,7 @@`
`24`	`24`	`color: red;`
`25`	`25`	`height: 1px;`
`26`	`26`	`}`
`27`		`- + .dont-split-me-up {`
	`27`	`+* .dont-split-me-up {`
`28`	`28`	`sibling: true;`
`29`	`29`	`}`
`30`	`30`	`.scope-check {`
Original file line number	Diff line number	Diff line change
`@@ -46,22 +46,22 @@ html.lt-ie9 header {`
`46`	`46`	`.without-mixins {`
`47`	`47`	`b: 1;`
`48`	`48`	`}`
`49`		`-@media (orientation: portrait) and tv {`
	`49`	`+@media (orientation: portrait) and (tv) {`
`50`	`50`	`.my-selector {`
`51`	`51`	`background-color: black;`
`52`	`52`	`}`
`53`	`53`	`}`
`54`		`-@media (orientation: portrait) and widescreen and print and tv {`
	`54`	`+@media (orientation: portrait) and (widescreen) and (print) and (tv) {`
`55`	`55`	`.triple-wrapped-mq {`
`56`	`56`	`triple: true;`
`57`	`57`	`}`
`58`	`58`	`}`
`59`		`-@media (orientation: portrait) and widescreen and tv {`
	`59`	`+@media (orientation: portrait) and (widescreen) and (tv) {`
`60`	`60`	`.triple-wrapped-mq {`
`61`	`61`	`triple: true;`
`62`	`62`	`}`
`63`	`63`	`}`
`64`		`-@media (orientation: portrait) and tv {`
	`64`	`+@media (orientation: portrait) and (tv) {`
`65`	`65`	`.triple-wrapped-mq {`
`66`	`66`	`triple: true;`
`67`	`67`	`}`
Original file line number	Diff line number	Diff line change
`@@ -60,7 +60,7 @@`
`60`	`60`	`.vc {`
`61`	`61`	`color: inherit;`
`62`	`62`	`}`
`63`		`-@media tv {`
	`63`	`+@media (tv) {`
`64`	`64`	`.ma,`
`65`	`65`	`.mb,`
`66`	`66`	`.mc {`
`@@ -73,7 +73,7 @@`
`73`	`73`	`color: inherit;`
`74`	`74`	`}`
`75`	`75`	`}`
`76`		`-@media tv and plasma {`
	`76`	`+@media (tv) and (plasma) {`
`77`	`77`	`.me,`
`78`	`78`	`.mf {`
`79`	`79`	`background: red;`
Original file line number	Diff line number	Diff line change
`@@ -2,7 +2,7 @@`
`2`	`2`	`.all .ext2 {`
`3`	`3`	`background: black;`
`4`	`4`	`}`
`5`		`-@media tv {`
	`5`	`+@media (tv) {`
`6`	`6`	`.ext1 .ext3,`
`7`	`7`	`.tv-lowres .ext3,`
`8`	`8`	`.all .ext3 {`
`@@ -12,7 +12,7 @@`
`12`	`12`	`background: blue;`
`13`	`13`	`}`
`14`	`14`	`}`
`15`		`-@media tv and hires {`
	`15`	`+@media (tv) and (hires) {`
`16`	`16`	`.ext1 .ext4,`
`17`	`17`	`.tv-hires .ext4,`
`18`	`18`	`.all .ext4 {`
Original file line number	Diff line number	Diff line change
`@@ -23,7 +23,7 @@`
`23`	`23`	`ary1: "1, 2, 3";`
`24`	`24`	`}`
`25`	`25`	`.test-rule-tran {`
`26`		`- 1: opacity 0.3s ease-in 0.3s, max-height 0.6s linear, margin-bottom 0.4s linear;`
`27`		`- 2: [opacity 0.3s ease-in 0.3s, max-height 0.6s linear, margin-bottom 0.4s linear];`
`28`		`- 3: opacity 0.3s ease-in 0.3s, max-height 0.6s linear, margin-bottom 0.4s linear;`
	`26`	`+ one: opacity 0.3s ease-in 0.3s, max-height 0.6s linear, margin-bottom 0.4s linear;`
	`27`	`+ two: [opacity 0.3s ease-in 0.3s, max-height 0.6s linear, margin-bottom 0.4s linear];`
	`28`	`+ three: opacity 0.3s ease-in 0.3s, max-height 0.6s linear, margin-bottom 0.4s linear;`
`29`	`29`	`}`
Original file line number	Diff line number	Diff line change
`@@ -53,25 +53,25 @@`
`53`	`53`	`width: 500px;`
`54`	`54`	`}`
`55`	`55`	`}`
`56`		`-@media a and b {`
	`56`	`+@media a and (b) {`
`57`	`57`	`.first .second .third {`
`58`	`58`	`width: 300px;`
`59`	`59`	`}`
`60`	`60`	`.first .second .fourth {`
`61`	`61`	`width: 3;`
`62`	`62`	`}`
`63`	`63`	`}`
`64`		`-@media a and b and c {`
	`64`	`+@media a and (b) and (c) {`
`65`	`65`	`.first .second .third {`
`66`	`66`	`width: 500px;`
`67`	`67`	`}`
`68`	`68`	`}`
`69`		`-@media a, b and c {`
	`69`	`+@media a, (b) and (c) {`
`70`	`70`	`.body {`
`71`	`71`	`width: 95%;`
`72`	`72`	`}`
`73`	`73`	`}`
`74`		`-@media a and x, b and c and x, a and y, b and c and y {`
	`74`	`+@media a and (x), (b) and (c) and (x), a and (y), (b) and (c) and (y) {`
`75`	`75`	`.body {`
`76`	`76`	`width: 100%;`
`77`	`77`	`}`
`@@ -211,7 +211,7 @@`
`211`	`211`	`display: table-cell;`
`212`	`212`	`}`
`213`	`213`	`}`
`214`		`-@media all and tv {`
	`214`	`+@media all and (tv) {`
`215`	`215`	`.all-and-tv-variables {`
`216`	`216`	`var: all-and-tv;`
`217`	`217`	`}`
Original file line number	Diff line number	Diff line change
`@@ -112,18 +112,18 @@ guard-default-multi-4 {`
`112`	`112`	`always: 2;`
`113`	`113`	`case: 2;`
`114`	`114`	`}`
`115`		`-guard-default-not-ambiguos-2 {`
	`115`	`+guard-default-not-ambiguous-2 {`
`116`	`116`	`case: 1;`
`117`	`117`	`not-default: 2;`
`118`	`118`	`}`
`119`		`-guard-default-not-ambiguos-3 {`
	`119`	`+guard-default-not-ambiguous-3 {`
`120`	`120`	`case: 1;`
`121`	`121`	`not-default-1: 2;`
`122`	`122`	`not-default-2: 2;`
`123`	`123`	`}`
`124`	`124`	`guard-default-scopes-3 {`
`125`		`- 3: when default;`
	`125`	`+ three: when default;`
`126`	`126`	`}`
`127`	`127`	`guard-default-scopes-1 {`
`128`		`- 1: no condition;`
	`128`	`+ one: no condition;`
`129`	`129`	`}`