Force template literals to break after ` for sytled-components (#2926)

Force template literals to break after ` for styled-components

src/multiparser.js

@@ -177,6 +177,13 @@ function fromHtmlParser2(path, options) {
 
 function transformCssDoc(quasisDoc, parent) {
   const parentNode = parent.path.getValue();
+
+  const isEmpty =
+    parentNode.quasis.length === 1 && !parentNode.quasis[0].value.raw.trim();
+  if (isEmpty) {
+    return "``";
+  }
+
   const expressionDocs = parentNode.expressions
     ? parent.path.map(parent.print, "expressions")
     : [];
@@ -187,7 +194,7 @@ function transformCssDoc(quasisDoc, parent) {
   }
   return concat([
     "`",
-    indent(concat([softline, stripTrailingHardline(newDoc)])),
+    indent(concat([hardline, stripTrailingHardline(newDoc)])),
     softline,
     "`"
   ]);

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

@@ -1,6 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`styled-components.js 1`] = `
+const ListItem = styled.li\`\`;
+
+const ListItem = styled.li\` \`;
+
+const Dropdown = styled.div\`position: relative;\`
+
 const Button = styled.button\`
 	  color:   palevioletred ;
 
@@ -22,6 +28,14 @@ styled(ExistingComponent)\`
 styled.button.attr({})\`
 border : rebeccapurple\`;
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+const ListItem = styled.li\`\`;
+
+const ListItem = styled.li\`\`;
+
+const Dropdown = styled.div\`
+  position: relative;
+\`;
+
 const Button = styled.button\`
   color: palevioletred;
 

tests/multiparser_js_css/styled-components.js

@@ -1,3 +1,9 @@
+const ListItem = styled.li``;
+
+const ListItem = styled.li` `;
+
+const Dropdown = styled.div`position: relative;`
+
 const Button = styled.button`
 	  color:   palevioletred ;