fix(css-in-js): do not duplicate comments (#5416)

src/language-css/printer-postcss.js

@@ -207,8 +207,11 @@ function genericPrint(path, options, print) {
           ? concat([
               isDetachedRulesetCallNode(node)
                 ? ""
-                : isTemplatePlaceholderNode(node)
+                : isTemplatePlaceholderNode(node) &&
-                ? node.raws.afterName
+                  /^\s*\n/.test(node.raws.afterName)
+                ? /^\s*\n\s*\n/.test(node.raws.afterName)
+                  ? concat([hardline, hardline])
+                  : hardline
                 : " ",
               path.call(print, "params")
             ])

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

@@ -140,6 +140,25 @@ styled.a\`
     margin: 0;
   }
 \`
+
+const StyledComponent = styled.div\`
+  \${anInterpolation}
+  /* a comment */
+
+  .aRule {
+    color: red
+  }
+\`;
+
+const StyledComponent = styled.div\`
+  \${anInterpolation}
+
+  /* a comment */
+
+  .aRule {
+    color: red
+  }
+\`;
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 const ListItem = styled.li\`\`;
 
@@ -282,4 +301,23 @@ styled.a\`
   }
 \`;
 
+const StyledComponent = styled.div\`
+  \${anInterpolation}
+  /* a comment */
+
+  .aRule {
+    color: red;
+  }
+\`;
+
+const StyledComponent = styled.div\`
+  \${anInterpolation}
+
+  /* a comment */
+
+  .aRule {
+    color: red;
+  }
+\`;
+
 `;

tests/multiparser_js_css/styled-components.js

@@ -137,3 +137,22 @@ styled.a`
     margin: 0;
   }
 `
+
+const StyledComponent = styled.div`
+  ${anInterpolation}
+  /* a comment */
+
+  .aRule {
+    color: red
+  }
+`;
+
+const StyledComponent = styled.div`
+  ${anInterpolation}
+
+  /* a comment */
+
+  .aRule {
+    color: red
+  }
+`;