From cc6899e5c53858ea0b7a2c87ea075dca1166a2d5 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Sat, 10 Nov 2018 16:43:59 +0800
Subject: [PATCH] fix(css-in-js): do not duplicate comments (#5416)

---
 src/language-css/printer-postcss.js           |  7 +++-
 .../__snapshots__/jsfmt.spec.js.snap          | 38 +++++++++++++++++++
 tests/multiparser_js_css/styled-components.js | 19 ++++++++++
 3 files changed, 62 insertions(+), 2 deletions(-)

diff --git a/src/language-css/printer-postcss.js b/src/language-css/printer-postcss.js
index a8535654fb7e..2027952a695d 100644
--- a/src/language-css/printer-postcss.js
+++ b/src/language-css/printer-postcss.js
@@ -207,8 +207,11 @@ function genericPrint(path, options, print) {
           ? concat([
               isDetachedRulesetCallNode(node)
                 ? ""
-                : isTemplatePlaceholderNode(node)
-                ? node.raws.afterName
+                : isTemplatePlaceholderNode(node) &&
+                  /^\s*\n/.test(node.raws.afterName)
+                ? /^\s*\n\s*\n/.test(node.raws.afterName)
+                  ? concat([hardline, hardline])
+                  : hardline
                 : " ",
               path.call(print, "params")
             ])
diff --git a/tests/multiparser_js_css/__snapshots__/jsfmt.spec.js.snap b/tests/multiparser_js_css/__snapshots__/jsfmt.spec.js.snap
index 50e1b7c5cb70..9695c6c1a74d 100644
--- a/tests/multiparser_js_css/__snapshots__/jsfmt.spec.js.snap
+++ b/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;
+  }
+\`;
+
 `;
diff --git a/tests/multiparser_js_css/styled-components.js b/tests/multiparser_js_css/styled-components.js
index 7b590feeffab..54d2cf0252e4 100644
--- a/tests/multiparser_js_css/styled-components.js
+++ b/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
+  }
+`;