From 2466ce11a5233a88b1682ef70b04c1993c2bdda0 Mon Sep 17 00:00:00 2001
From: Lucas Duailibe <lucasds@gmail.com>
Date: Mon, 2 Oct 2017 12:55:42 -0300
Subject: [PATCH] Force template literals to break after ` for
 sytled-components (#2926)

Force template literals to break after ` for styled-components
---
 src/multiparser.js                                 |  9 ++++++++-
 .../__snapshots__/jsfmt.spec.js.snap               | 14 ++++++++++++++
 tests/multiparser_js_css/styled-components.js      |  6 ++++++
 3 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/src/multiparser.js b/src/multiparser.js
index e803bf9b..4d616252 100644
--- a/src/multiparser.js
+++ b/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,
     "`"
   ]);
diff --git a/tests/multiparser_js_css/__snapshots__/jsfmt.spec.js.snap b/tests/multiparser_js_css/__snapshots__/jsfmt.spec.js.snap
index a723126c..d5cbad9a 100644
--- a/tests/multiparser_js_css/__snapshots__/jsfmt.spec.js.snap
+++ b/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;
 
diff --git a/tests/multiparser_js_css/styled-components.js b/tests/multiparser_js_css/styled-components.js
index e6d67329..dae51edb 100644
--- a/tests/multiparser_js_css/styled-components.js
+++ b/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 ;