fix: keep space between deep selector `>>>` (#3792)

src/language-css/printer-postcss.js

@@ -262,7 +262,12 @@ function genericPrint(path, options, print) {
       ]);
     }
     case "selector-combinator": {
-      if (n.value === "+" || n.value === ">" || n.value === "~") {
+      if (
+        n.value === "+" ||
+        n.value === ">" ||
+        n.value === "~" ||
+        n.value === ">>>"
+      ) {
         const parent = path.getParentNode();
         const leading =
           parent.type === "selector-selector" && parent.nodes[0] === n

tests/css_selector_list/__snapshots__/jsfmt.spec.js.snap

@@ -10,6 +10,20 @@ exports[`selectors.css 1`] = `
 
 .asdasldaskdhjkashdahsdkjahskdjhakjsdkjahsdhkas .asdasldaskdhjkashdahsdkjahskdjhakjsdkjahsdhkas,
 .asdasldaskdhjkashdahsdkjahskdjhakjsdkjahsdhkas .asdasldaskdhjkashdahsdkjahskdjhakjsdkjahsdhkas {}
+.asdasldaskdhjkashdahsdkjahskdjhakjsdkjahsdhkas
+.asdasldaskdhjkashdahsdkjahskdjhakjsdkjahsdhkas,
+.asdasldaskdhjkashdahsdkjahskdjhakjsdkjahsdhkas
+.asdasldaskdhjkashdahsdkjahskdjhakjsdkjahsdhkas
+{}
+.asdasldaskdhjkashdahsdkjahskdjhakjsdkjahsdhkas
+
+.asdasldaskdhjkashdahsdkjahskdjhakjsdkjahsdhkas,
+
+.asdasldaskdhjkashdahsdkjahskdjhakjsdkjahsdhkas
+
+.asdasldaskdhjkashdahsdkjahskdjhakjsdkjahsdhkas
+
+{}
 
 .parent,.another-parent{}
 .parent ,.another-parent{}
@@ -36,6 +50,10 @@ exports[`selectors.css 1`] = `
   .child-one  {}
   .child-two  {}
 }
+.parent   {
+   .child-one  {}
+   .child-two  {}
+}
 .parent
 {
   .child-one
@@ -89,6 +107,26 @@ exports[`selectors.css 1`] = `
 
   {}
 }
+.parent {
+>.child-one {}
+>.child-two {}
+}
+.parent {
+ > .child-one {}
+ > .child-two {}
+}
+.parent {
+  > .child-one {}
+  > .child-two {}
+}
+.parent {
+  >  .child-one {}
+  >  .child-two {}
+}
+.parent {
+   >   .child-one {}
+   >   .child-two {}
+}
 
 .parent+.child {}
 .parent + .child {}
@@ -125,6 +163,26 @@ exports[`selectors.css 1`] = `
 
   {}
 }
+.parent {
++.child-one {}
++.child-two {}
+}
+.parent {
+ + .child-one {}
+ + .child-two {}
+}
+.parent {
+  + .child-one {}
+  + .child-two {}
+}
+.parent {
+  +  .child-one {}
+  +  .child-two {}
+}
+.parent {
+   +   .child-one {}
+   +   .child-two {}
+}
 
 .parent~.child {}
 .parent ~ .child {}
@@ -161,6 +219,82 @@ exports[`selectors.css 1`] = `
 
   {}
 }
+.parent {
+~.child-one {}
+~.child-two {}
+}
+.parent {
+ ~ .child-one {}
+ ~ .child-two {}
+}
+.parent {
+  ~ .child-one {}
+  ~ .child-two {}
+}
+.parent {
+  ~  .child-one {}
+  ~  .child-two {}
+}
+.parent {
+   ~   .child-one {}
+   ~   .child-two {}
+}
+
+.parent>>>.child {}
+.parent >>> .child {}
+.parent  >>>  .child {}
+.parent>>>{
+  .child-one {}
+  .child-two {}
+}
+.parent >>> {
+  .child-one {}
+  .child-two {}
+}
+.parent  >>>  {
+  .child-one {}
+  .child-two {}
+}
+.parent
+>>>
+{
+  .child-one
+  {}
+  .child-two
+  {}
+}
+.parent
+
+>>>
+
+{
+  .child-one
+
+  {}
+  .child-two
+
+  {}
+}
+.parent {
+>>>.child-one {}
+>>>.child-two {}
+}
+.parent {
+ >>> .child-one {}
+ >>> .child-two {}
+}
+.parent {
+  >>> .child-one {}
+  >>> .child-two {}
+}
+.parent {
+  >>>  .child-one {}
+  >>>  .child-two {}
+}
+.parent {
+   >>>   .child-one {}
+   >>>   .child-two {}
+}
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 .a,
 .b,
@@ -180,6 +314,16 @@ exports[`selectors.css 1`] = `
   }
 }
 
+.asdasldaskdhjkashdahsdkjahskdjhakjsdkjahsdhkas
+  .asdasldaskdhjkashdahsdkjahskdjhakjsdkjahsdhkas,
+.asdasldaskdhjkashdahsdkjahskdjhakjsdkjahsdhkas
+  .asdasldaskdhjkashdahsdkjahskdjhakjsdkjahsdhkas {
+}
+.asdasldaskdhjkashdahsdkjahskdjhakjsdkjahsdhkas
+  .asdasldaskdhjkashdahsdkjahskdjhakjsdkjahsdhkas,
+.asdasldaskdhjkashdahsdkjahskdjhakjsdkjahsdhkas
+  .asdasldaskdhjkashdahsdkjahskdjhakjsdkjahsdhkas {
+}
 .asdasldaskdhjkashdahsdkjahskdjhakjsdkjahsdhkas
   .asdasldaskdhjkashdahsdkjahskdjhakjsdkjahsdhkas,
 .asdasldaskdhjkashdahsdkjahskdjhakjsdkjahsdhkas
@@ -241,6 +385,12 @@ exports[`selectors.css 1`] = `
   .child-two {
   }
 }
+.parent {
+  .child-one {
+  }
+  .child-two {
+  }
+}
 
 .parent > .child {
 }
@@ -278,6 +428,36 @@ exports[`selectors.css 1`] = `
   .child-two {
   }
 }
+.parent {
+  > .child-one {
+  }
+  > .child-two {
+  }
+}
+.parent {
+  > .child-one {
+  }
+  > .child-two {
+  }
+}
+.parent {
+  > .child-one {
+  }
+  > .child-two {
+  }
+}
+.parent {
+  > .child-one {
+  }
+  > .child-two {
+  }
+}
+.parent {
+  > .child-one {
+  }
+  > .child-two {
+  }
+}
 
 .parent + .child {
 }
@@ -315,6 +495,36 @@ exports[`selectors.css 1`] = `
   .child-two {
   }
 }
+.parent {
+  + .child-one {
+  }
+  + .child-two {
+  }
+}
+.parent {
+  + .child-one {
+  }
+  + .child-two {
+  }
+}
+.parent {
+  + .child-one {
+  }
+  + .child-two {
+  }
+}
+.parent {
+  + .child-one {
+  }
+  + .child-two {
+  }
+}
+.parent {
+  + .child-one {
+  }
+  + .child-two {
+  }
+}
 
 .parent ~ .child {
 }
@@ -352,5 +562,102 @@ exports[`selectors.css 1`] = `
   .child-two {
   }
 }
+.parent {
+  ~ .child-one {
+  }
+  ~ .child-two {
+  }
+}
+.parent {
+  ~ .child-one {
+  }
+  ~ .child-two {
+  }
+}
+.parent {
+  ~ .child-one {
+  }
+  ~ .child-two {
+  }
+}
+.parent {
+  ~ .child-one {
+  }
+  ~ .child-two {
+  }
+}
+.parent {
+  ~ .child-one {
+  }
+  ~ .child-two {
+  }
+}
+
+.parent >>> .child {
+}
+.parent >>> .child {
+}
+.parent >>> .child {
+}
+.parent >>> {
+  .child-one {
+  }
+  .child-two {
+  }
+}
+.parent >>> {
+  .child-one {
+  }
+  .child-two {
+  }
+}
+.parent >>> {
+  .child-one {
+  }
+  .child-two {
+  }
+}
+.parent >>> {
+  .child-one {
+  }
+  .child-two {
+  }
+}
+.parent >>> {
+  .child-one {
+  }
+  .child-two {
+  }
+}
+.parent {
+  >>> .child-one {
+  }
+  >>> .child-two {
+  }
+}
+.parent {
+  >>> .child-one {
+  }
+  >>> .child-two {
+  }
+}
+.parent {
+  >>> .child-one {
+  }
+  >>> .child-two {
+  }
+}
+.parent {
+  >>> .child-one {
+  }
+  >>> .child-two {
+  }
+}
+.parent {
+  >>> .child-one {
+  }
+  >>> .child-two {
+  }
+}
 
 `;

tests/css_selector_list/selectors.css

@@ -7,6 +7,20 @@
 
 .asdasldaskdhjkashdahsdkjahskdjhakjsdkjahsdhkas .asdasldaskdhjkashdahsdkjahskdjhakjsdkjahsdhkas,
 .asdasldaskdhjkashdahsdkjahskdjhakjsdkjahsdhkas .asdasldaskdhjkashdahsdkjahskdjhakjsdkjahsdhkas {}
+.asdasldaskdhjkashdahsdkjahskdjhakjsdkjahsdhkas
+.asdasldaskdhjkashdahsdkjahskdjhakjsdkjahsdhkas,
+.asdasldaskdhjkashdahsdkjahskdjhakjsdkjahsdhkas
+.asdasldaskdhjkashdahsdkjahskdjhakjsdkjahsdhkas
+{}
+.asdasldaskdhjkashdahsdkjahskdjhakjsdkjahsdhkas
+
+.asdasldaskdhjkashdahsdkjahskdjhakjsdkjahsdhkas,
+
+.asdasldaskdhjkashdahsdkjahskdjhakjsdkjahsdhkas
+
+.asdasldaskdhjkashdahsdkjahskdjhakjsdkjahsdhkas
+
+{}
 
 .parent,.another-parent{}
 .parent ,.another-parent{}
@@ -33,6 +47,10 @@
   .child-one  {}
   .child-two  {}
 }
+.parent   {
+   .child-one  {}
+   .child-two  {}
+}
 .parent
 {
   .child-one
@@ -86,6 +104,26 @@
 
   {}
 }
+.parent {
+>.child-one {}
+>.child-two {}
+}
+.parent {
+ > .child-one {}
+ > .child-two {}
+}
+.parent {
+  > .child-one {}
+  > .child-two {}
+}
+.parent {
+  >  .child-one {}
+  >  .child-two {}
+}
+.parent {
+   >   .child-one {}
+   >   .child-two {}
+}
 
 .parent+.child {}
 .parent + .child {}
@@ -122,6 +160,26 @@
 
   {}
 }
+.parent {
++.child-one {}
++.child-two {}
+}
+.parent {
+ + .child-one {}
+ + .child-two {}
+}
+.parent {
+  + .child-one {}
+  + .child-two {}
+}
+.parent {
+  +  .child-one {}
+  +  .child-two {}
+}
+.parent {
+   +   .child-one {}
+   +   .child-two {}
+}
 
 .parent~.child {}
 .parent ~ .child {}
@@ -158,3 +216,79 @@
 
   {}
 }
+.parent {
+~.child-one {}
+~.child-two {}
+}
+.parent {
+ ~ .child-one {}
+ ~ .child-two {}
+}
+.parent {
+  ~ .child-one {}
+  ~ .child-two {}
+}
+.parent {
+  ~  .child-one {}
+  ~  .child-two {}
+}
+.parent {
+   ~   .child-one {}
+   ~   .child-two {}
+}
+
+.parent>>>.child {}
+.parent >>> .child {}
+.parent  >>>  .child {}
+.parent>>>{
+  .child-one {}
+  .child-two {}
+}
+.parent >>> {
+  .child-one {}
+  .child-two {}
+}
+.parent  >>>  {
+  .child-one {}
+  .child-two {}
+}
+.parent
+>>>
+{
+  .child-one
+  {}
+  .child-two
+  {}
+}
+.parent
+
+>>>
+
+{
+  .child-one
+
+  {}
+  .child-two
+
+  {}
+}
+.parent {
+>>>.child-one {}
+>>>.child-two {}
+}
+.parent {
+ >>> .child-one {}
+ >>> .child-two {}
+}
+.parent {
+  >>> .child-one {}
+  >>> .child-two {}
+}
+.parent {
+  >>>  .child-one {}
+  >>>  .child-two {}
+}
+.parent {
+   >>>   .child-one {}
+   >>>   .child-two {}
+}