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

prettier · Nov 10, 2018 · cc6899e · cc6899e
1 parent d4c248b
commit cc6899e
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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
+  }
+`;