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

* Make Less tests contain more valid CSS

Author: matthew-dean

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;

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 {

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 {

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;
   }

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;

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 {

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;
 }

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;
   }

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;
 }

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;
 }
 /*

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 {

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;

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;
   }
 }

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();

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;

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;
     }

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;);