From 0e268598c8327b9e8d36d9bb2edfde95d8d787be Mon Sep 17 00:00:00 2001
From: Matthew Dean <matthew-dean@users.noreply.github.com>
Date: Tue, 28 Jul 2020 17:48:59 -0700
Subject: [PATCH] Examples contain more valid CSS, to test with a new parser
 (#3550)

* Make Less tests contain more valid CSS
---
 packages/test-data/css/_main/colors.css             | 12 ++++++------
 packages/test-data/css/_main/css-3.css              | 13 +++++--------
 packages/test-data/css/_main/css-guards.css         |  2 +-
 packages/test-data/css/_main/detached-rulesets.css  |  8 ++++----
 packages/test-data/css/_main/extend-chaining.css    |  4 ++--
 packages/test-data/css/_main/extend-media.css       |  4 ++--
 packages/test-data/css/_main/javascript.css         |  6 +++---
 packages/test-data/css/_main/media.css              | 10 +++++-----
 .../css/_main/mixins-guards-default-func.css        |  8 ++++----
 packages/test-data/css/_main/selectors.css          |  8 ++++----
 packages/test-data/less/_main/colors.less           | 12 ++++++------
 packages/test-data/less/_main/css-3.less            | 11 +++++------
 packages/test-data/less/_main/css-guards.less       |  2 +-
 .../test-data/less/_main/detached-rulesets.less     |  8 ++++----
 packages/test-data/less/_main/extend-chaining.less  |  4 ++--
 packages/test-data/less/_main/extend-media.less     |  4 ++--
 packages/test-data/less/_main/javascript.less       |  6 +++---
 packages/test-data/less/_main/media.less            | 10 +++++-----
 .../less/_main/mixins-guards-default-func.less      | 10 +++++-----
 packages/test-data/less/_main/selectors.less        | 11 ++++++-----
 20 files changed, 75 insertions(+), 78 deletions(-)

diff --git a/packages/test-data/css/_main/colors.css b/packages/test-data/css/_main/colors.css
index 25d1e1cd9..eb391ff06 100644
--- 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
index 046190a35..95725b870 100644
--- 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
index fe5e2809d..d4649084f 100644
--- 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
index fdd1035a4..9c9091eaa 100644
--- 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
index 15028167d..b75ca1565 100644
--- 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
index 0fbaed9c6..1bebabea5 100644
--- 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
index a0df43b72..9a1682700 100644
--- 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
index 5c9a3cb9b..2016c0e7a 100644
--- a/packages/test-data/css/_main/media.css
+++ b/packages/test-data/css/_main/media.css
@@ -53,7 +53,7 @@
     width: 500px;
   }
 }
-@media a and b {
+@media a and (b) {
   .first .second .third {
     width: 300px;
   }
@@ -61,17 +61,17 @@
     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
index 798059164..3a11c6572 100644
--- 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
index 046e59a77..10716d45c 100644
--- 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
index dd4d1bf92..9c7d17efb 100644
--- 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
index 480a98826..6ffac725d 100644
--- 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
index 95cd3d60b..f082ace02 100644
--- 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
index 967f0edf6..0d84337c9 100644
--- a/packages/test-data/less/_main/detached-rulesets.less
+++ b/packages/test-data/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();
diff --git a/packages/test-data/less/_main/extend-chaining.less b/packages/test-data/less/_main/extend-chaining.less
index e62b67651..8aae8730c 100644
--- 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
index b54427363..ead3be4fd 100644
--- 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
index 61049dbb0..b535dd99d 100644
--- 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
index e5eb3022c..51bebb568 100644
--- a/packages/test-data/less/_main/media.less
+++ b/packages/test-data/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;
diff --git a/packages/test-data/less/_main/mixins-guards-default-func.less b/packages/test-data/less/_main/mixins-guards-default-func.less
index a71f78f5c..1bf7203eb 100644
--- a/packages/test-data/less/_main/mixins-guards-default-func.less
+++ b/packages/test-data/less/_main/mixins-guards-default-func.less
@@ -158,7 +158,7 @@ guard-default-multi-4 {
     .m(2);
 }
 
-guard-default-not-ambiguos-2 {
+guard-default-not-ambiguous-2 {
     .m(@x)                     {case:         1}
     .m(@x) when (default())    {default:     @x}
     .m(@x) when not(default()) {not-default: @x}
@@ -166,7 +166,7 @@ guard-default-not-ambiguos-2 {
     .m(2);
 }
 
-guard-default-not-ambiguos-3 {
+guard-default-not-ambiguous-3 {
     .m(@x)                     {case:           1}
     .m(@x) when not(default()) {not-default-1: @x}
     .m(@x) when not(default()) {not-default-2: @x}
@@ -177,9 +177,9 @@ guard-default-not-ambiguos-3 {
 // default & scope
 
 guard-default-scopes {
-    .s1() {.m(@v)                  {1: no condition}}
-    .s2() {.m(@v) when (@v)        {2: when true}}
-    .s3() {.m(@v) when (default()) {3: when default}}
+    .s1() {.m(@v)                  {one: no condition}}
+    .s2() {.m(@v) when (@v)        {two: when true}}
+    .s3() {.m(@v) when (default()) {three: when default}}
 
     &-3 {
         .s2();
diff --git a/packages/test-data/less/_main/selectors.less b/packages/test-data/less/_main/selectors.less
index 1b3cf769e..005524cc5 100644
--- a/packages/test-data/less/_main/selectors.less
+++ b/packages/test-data/less/_main/selectors.less
@@ -132,17 +132,18 @@ a {
   &:nth-child(odd):not(:nth-child(3)) {
     color: #ff0000;
   }
- }
+}
+@prop: p;
 [prop],
 [prop=10%],
-[prop="value@{num}"],
+[prop|="value@{num}"],
 [prop*="val@{num}"],
 [|prop~="val@{num}"],
 [*|prop$="val@{num}"],
 [ns|prop^="val@{num}"],
-[@{num}^="val@{num}"],
-[@{num}=@{num}],
-[@{num}] {
+[@{prop}^="val@{num}"],
+[@{prop}=@{num}],
+[@{prop}] {
   attributes: yes;
 }