fix(css-in-js) Keep newlines in CSS-in-JS Templates (Fixes: #5147) (#5240)

* fix(css-in-js) Keep newlines in CSS-in-JS Templates (Fixes: #5147)

* Add more tests

* Do not add semicolon when CSS prop is a template variable

* Fix deletion of original semicolon

* Prettify long line

src/language-css/printer-postcss.js

@@ -58,6 +58,8 @@ const {
   hasEmptyRawBefore,
   isKeyValuePairNode,
   isDetachedRulesetCallNode,
+  isTemplatePlaceholderNode,
+  isTemplatePropNode,
   isPostcssSimpleVarNode,
   isSCSSMapItemNode,
   isInlineValueCommentNode,
@@ -145,6 +147,8 @@ function genericPrint(path, options, print) {
       ]);
     }
     case "css-decl": {
+      const parentNode = path.getParentNode();
+
       return concat([
         node.raws.before.replace(/[\s;]/g, ""),
         insideICSSRuleNode(path) ? node.prop : maybeToLowerCase(node.prop),
@@ -177,10 +181,14 @@ function genericPrint(path, options, print) {
               softline,
               "}"
             ])
-          : ";"
+          : isTemplatePropNode(node) && !parentNode.raws.semicolon
+            ? ""
+            : ";"
       ]);
     }
     case "css-atrule": {
+      const parentNode = path.getParentNode();
+
       return concat([
         "@",
         // If a Less file ends up being parsed with the SCSS parser, Less
@@ -191,7 +199,11 @@ function genericPrint(path, options, print) {
           : maybeToLowerCase(node.name),
         node.params
           ? concat([
-              isDetachedRulesetCallNode(node) ? "" : " ",
+              isDetachedRulesetCallNode(node)
+                ? ""
+                : isTemplatePlaceholderNode(node)
+                  ? node.raws.afterName
+                  : " ",
               path.call(print, "params")
             ])
           : "",
@@ -226,7 +238,9 @@ function genericPrint(path, options, print) {
               softline,
               "}"
             ])
-          : ";"
+          : isTemplatePlaceholderNode(node) && !parentNode.raws.semicolon
+            ? ""
+            : ";"
       ]);
     }
     // postcss-media-query-parser

src/language-css/utils.js

@@ -253,6 +253,14 @@ function isDetachedRulesetCallNode(node) {
   return node.raws && node.raws.params && /^\(\s*\)$/.test(node.raws.params);
 }
 
+function isTemplatePlaceholderNode(node) {
+  return node.name.startsWith("prettier-placeholder");
+}
+
+function isTemplatePropNode(node) {
+  return node.prop.startsWith("@prettier-placeholder");
+}
+
 function isPostcssSimpleVarNode(currentNode, nextNode) {
   return (
     currentNode.value === "$$" &&
@@ -415,6 +423,8 @@ module.exports = {
   hasEmptyRawBefore,
   isSCSSNestedPropertyNode,
   isDetachedRulesetCallNode,
+  isTemplatePlaceholderNode,
+  isTemplatePropNode,
   isPostcssSimpleVarNode,
   isKeyValuePairNode,
   isKeyValuePairInParenGroupNode,

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

@@ -77,7 +77,60 @@ styled.div\`
     margin: 0;
   }
 \`
-~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+styled.div\`
+  \${bar}
+  baz
+\`
+
+styled.span\`
+  foo
+  \${bar}
+  baz
+\`
+
+styled.div\`
+  foo
+  \${bar}
+  \${baz}
+\`
+
+styled.span\`
+  \${foo}
+  \${bar}
+\`
+
+styled.div\`
+  \${foo} bar
+\`
+
+styled.span\`
+  \${foo} \${bar}
+  baz: \${foo}
+\`
+
+styled.span\`
+\${foo};
+\${bar};
+\`
+
+styled.span\`
+\${foo}: \${bar};
+\`
+
+styled.span\`
+\${foo}: \${bar}
+\`
+
+styled.span\`
+\${foo}:
+\${bar}
+\`
+
+styled.span\`
+\${foo}:
+\${bar};
+\`~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 const ListItem = styled.li\`\`;
 
 const ListItem = styled.li\`\`;
@@ -158,4 +211,56 @@ styled.div\`
   }
 \`;
 
+styled.div\`
+  \${bar}
+  baz
+\`;
+
+styled.span\`
+  foo
+  \${bar}
+  baz
+\`;
+
+styled.div\`
+  foo
+  \${bar}
+  \${baz}
+\`;
+
+styled.span\`
+  \${foo}
+  \${bar}
+\`;
+
+styled.div\`
+  \${foo} bar
+\`;
+
+styled.span\`
+  \${foo} \${bar}
+  baz: \${foo}
+\`;
+
+styled.span\`
+  \${foo};
+  \${bar};
+\`;
+
+styled.span\`
+  \${foo}: \${bar};
+\`;
+
+styled.span\`
+  \${foo}: \${bar}
+\`;
+
+styled.span\`
+  \${foo}: \${bar}
+\`;
+
+styled.span\`
+  \${foo}: \${bar};
+\`;
+
 `;

tests/multiparser_js_css/styled-components.js

@@ -74,3 +74,57 @@ styled.div`
     margin: 0;
   }
 `
+
+styled.div`
+  ${bar}
+  baz
+`
+
+styled.span`
+  foo
+  ${bar}
+  baz
+`
+
+styled.div`
+  foo
+  ${bar}
+  ${baz}
+`
+
+styled.span`
+  ${foo}
+  ${bar}
+`
+
+styled.div`
+  ${foo} bar
+`
+
+styled.span`
+  ${foo} ${bar}
+  baz: ${foo}
+`
+
+styled.span`
+${foo};
+${bar};
+`
+
+styled.span`
+${foo}: ${bar};
+`
+
+styled.span`
+${foo}: ${bar}
+`
+
+styled.span`
+${foo}:
+${bar}
+`
+
+styled.span`
+${foo}:
+${bar};
+`

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

@@ -395,7 +395,7 @@ exports[`styled-jsx-with-expressions.js - flow-verify 1`] = `
     }
   }
   @font-face {
-    \${expr};
+    \${expr}
   }
 \`}</style>;
 

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

@@ -322,7 +322,7 @@ export const RedBox = styled.div<{foo: string}>\`
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 export const RedBox = styled.div<{ foo: string }>\`
   background: red;
-  \${props => props.foo};
+  \${props => props.foo}
 \`;
 
 `;