From 974b27dac25be0f8e6d368f3d511dccaaa4b282e Mon Sep 17 00:00:00 2001
From: Lucas Duailibe <lucasds@gmail.com>
Date: Wed, 21 Feb 2018 10:52:30 -0300
Subject: [PATCH] Break JSX element if a string literal prop has a newline
 (#4011)

---
 src/language-js/printer-estree.js             | 15 ++++++-
 .../__snapshots__/jsfmt.spec.js.snap          | 45 +++++++++++++++++++
 .../single_prop_multiline_string.js           |  6 +++
 3 files changed, 65 insertions(+), 1 deletion(-)
 create mode 100644 tests/jsx_last_line/single_prop_multiline_string.js

diff --git a/src/language-js/printer-estree.js b/src/language-js/printer-estree.js
index bc2bdf393..075503a36 100644
--- a/src/language-js/printer-estree.js
+++ b/src/language-js/printer-estree.js
@@ -1776,6 +1776,7 @@ function printPathNoParens(path, options, print, args) {
         n.attributes.length === 1 &&
         n.attributes[0].value &&
         isStringLiteral(n.attributes[0].value) &&
+        !n.attributes[0].value.value.includes("\n") &&
         // We should break for the following cases:
         // <div
         //   // comment
@@ -1815,6 +1816,17 @@ function printPathNoParens(path, options, print, args) {
         (!nameHasComments || n.attributes.length) &&
         !lastAttrHasTrailingComments;
 
+      // We should print the opening element expanded if any prop value is a
+      // string literal with newlines
+      const shouldBreak =
+        n.attributes &&
+        n.attributes.some(
+          attr =>
+            attr.value &&
+            isStringLiteral(attr.value) &&
+            attr.value.value.includes("\n")
+        );
+
       return group(
         concat([
           "<",
@@ -1828,7 +1840,8 @@ function printPathNoParens(path, options, print, args) {
             n.selfClosing ? line : bracketSameLine ? ">" : softline
           ]),
           n.selfClosing ? "/>" : bracketSameLine ? "" : ">"
-        ])
+        ]),
+        { shouldBreak }
       );
     }
     case "JSXClosingElement":
diff --git a/tests/jsx_last_line/__snapshots__/jsfmt.spec.js.snap b/tests/jsx_last_line/__snapshots__/jsfmt.spec.js.snap
index 0ac630489..369b11045 100644
--- a/tests/jsx_last_line/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/jsx_last_line/__snapshots__/jsfmt.spec.js.snap
@@ -48,3 +48,48 @@ exports[`last_line.js 2`] = `
 </SomeHighlyConfiguredComponent>;
 
 `;
+
+exports[`single_prop_multiline_string.js 1`] = `
+<path d="M4.765 16.829l3.069-2.946 5.813 5.748
+  11.33-11.232 3.006 3.18-14.36 14.080z" />;
+
+<Component text="Text
+  with
+  newlines">Content</Component>;
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<path
+  d="M4.765 16.829l3.069-2.946 5.813 5.748
+  11.33-11.232 3.006 3.18-14.36 14.080z"
+/>;
+
+<Component
+  text="Text
+  with
+  newlines">
+  Content
+</Component>;
+
+`;
+
+exports[`single_prop_multiline_string.js 2`] = `
+<path d="M4.765 16.829l3.069-2.946 5.813 5.748
+  11.33-11.232 3.006 3.18-14.36 14.080z" />;
+
+<Component text="Text
+  with
+  newlines">Content</Component>;
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<path
+  d="M4.765 16.829l3.069-2.946 5.813 5.748
+  11.33-11.232 3.006 3.18-14.36 14.080z"
+/>;
+
+<Component
+  text="Text
+  with
+  newlines"
+>
+  Content
+</Component>;
+
+`;
diff --git a/tests/jsx_last_line/single_prop_multiline_string.js b/tests/jsx_last_line/single_prop_multiline_string.js
new file mode 100644
index 000000000..541733229
--- /dev/null
+++ b/tests/jsx_last_line/single_prop_multiline_string.js
@@ -0,0 +1,6 @@
+<path d="M4.765 16.829l3.069-2.946 5.813 5.748
+  11.33-11.232 3.006 3.18-14.36 14.080z" />;
+
+<Component text="Text
+  with
+  newlines">Content</Component>;