From b01591770a2407513af31b59377e87d0892a66a9 Mon Sep 17 00:00:00 2001
From: fisker Cheung <lionkay@gmail.com>
Date: Mon, 6 Jul 2020 14:18:22 +0800
Subject: [PATCH] HTML: Don't preserve line breaks around text-only content
 (#8614)

* Fix inconsistent formatting on Vue interpolation

* Fix text

* Update changelog

* Fix snapshot

* Add an explanation to the changelog

Co-authored-by: Georgii Dolzhykov <thorn.mailbox@gmail.com>
---
 changelog_unreleased/html/pr-8614.md          | 26 +++++++++++++++++
 src/language-html/utils.js                    |  1 +
 .../angular/__snapshots__/jsfmt.spec.js.snap  | 16 +++-------
 .../__snapshots__/jsfmt.spec.js.snap          |  4 +--
 .../html/svg/__snapshots__/jsfmt.spec.js.snap |  8 ++---
 .../tags/__snapshots__/jsfmt.spec.js.snap     |  8 ++---
 .../__snapshots__/jsfmt.spec.js.snap          | 12 ++------
 .../mjml/__snapshots__/jsfmt.spec.js.snap     |  4 +--
 .../__snapshots__/jsfmt.spec.js.snap          | 29 +++++++++++++++++++
 tests/vue/interpolation/jsfmt.spec.js         |  1 +
 tests/vue/interpolation/template.vue          | 10 +++++++
 .../vue/vue/__snapshots__/jsfmt.spec.js.snap  | 24 ++++-----------
 12 files changed, 86 insertions(+), 57 deletions(-)
 create mode 100644 changelog_unreleased/html/pr-8614.md
 create mode 100644 tests/vue/interpolation/__snapshots__/jsfmt.spec.js.snap
 create mode 100644 tests/vue/interpolation/jsfmt.spec.js
 create mode 100644 tests/vue/interpolation/template.vue

diff --git a/changelog_unreleased/html/pr-8614.md b/changelog_unreleased/html/pr-8614.md
new file mode 100644
index 000000000..19d77a66a
--- /dev/null
+++ b/changelog_unreleased/html/pr-8614.md
@@ -0,0 +1,26 @@
+#### Don't preserve line breaks around text-only content ([#8614](https://github.com/prettier/prettier/pull/8614) by [@fisker](https://github.com/fisker))
+
+Previously, Prettier always [preserved line breaks][#5596] around inline nodes (i.e. inline elements, text, interpolations). In general, Prettier, as much as possible, tries to avoid relying on original formatting, but there are at least two cases when collapsing inline nodes into a single line is undesirable, namely list-like content and conditional constructions (e.g. `v-if`/`v-else` in Vue). A good way to detect those cases couldn't be found, so such a trade-off was made. It turned out, however, for text-only content, this relaxation of rules was unnecessary and only led to confusingly inconsistent formatting.
+
+<!-- prettier-ignore -->
+```html
+<!-- Input -->
+<div>
+  Hello, world!
+</div>
+<div>
+  Hello, {{ username }}!
+</div>
+
+<!-- Prettier stable -->
+<div>
+  Hello, world!
+</div>
+<div>Hello, {{ username }}!</div>
+
+<!-- Prettier master -->
+<div>Hello, world!</div>
+<div>Hello, {{ username }}!</div>
+```
+
+[#5596]: https://prettier.io/blog/2019/01/20/1.16.0.html#respect-surrounding-linebreaks-5596-by-ikatyang
diff --git a/src/language-html/utils.js b/src/language-html/utils.js
index c818de2c5..bbba9923f 100644
--- a/src/language-html/utils.js
+++ b/src/language-html/utils.js
@@ -283,6 +283,7 @@ function forceBreakContent(node) {
         node.children.some((child) => hasNonTextChild(child)))) ||
     (node.firstChild &&
       node.firstChild === node.lastChild &&
+      node.firstChild.type !== "text" &&
       hasLeadingLineBreak(node.firstChild) &&
       (!node.lastChild.isTrailingSpaceSensitive ||
         hasTrailingLineBreak(node.lastChild)))
diff --git a/tests/angular/angular/__snapshots__/jsfmt.spec.js.snap b/tests/angular/angular/__snapshots__/jsfmt.spec.js.snap
index dac2d08b4..2eb34a77d 100644
--- a/tests/angular/angular/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/angular/angular/__snapshots__/jsfmt.spec.js.snap
@@ -4791,9 +4791,7 @@ can be found in the LICENSE file at http://angular.io/license
 <div [class.special]="isSpecial">Special</div>
 <br /><br />
 
-<button [style.color]="isSpecial ? 'red' : 'green'">
-  button
-</button>
+<button [style.color]="isSpecial ? 'red' : 'green'">button</button>
 
 <a class="to-toc" href="#toc">top</a>
 
@@ -6359,9 +6357,7 @@ can be found in the LICENSE file at http://angular.io/license
 <br />
 <br />
 
-<button [style.color]="isSpecial ? 'red' : 'green'">
-  button
-</button>
+<button [style.color]="isSpecial ? 'red' : 'green'">button</button>
 
 <a class="to-toc" href="#toc">top</a>
 
@@ -11403,9 +11399,7 @@ can be found in the LICENSE file at http://angular.io/license
 <div [class.special]="isSpecial">Special</div>
 <br /><br />
 
-<button [style.color]="isSpecial ? 'red' : 'green'">
-  button
-</button>
+<button [style.color]="isSpecial ? 'red' : 'green'">button</button>
 
 <a class="to-toc" href="#toc">top</a>
 
@@ -12931,9 +12925,7 @@ can be found in the LICENSE file at http://angular.io/license
 <div [class.special]="isSpecial">Special</div>
 <br /><br />
 
-<button [style.color]="isSpecial ? 'red' : 'green'">
-  button
-</button>
+<button [style.color]="isSpecial ? 'red' : 'green'">button</button>
 
 <a class="to-toc" href="#toc">top</a>
 
diff --git a/tests/html/front-matter/__snapshots__/jsfmt.spec.js.snap b/tests/html/front-matter/__snapshots__/jsfmt.spec.js.snap
index 99cacfb82..b79cca5d1 100644
--- a/tests/html/front-matter/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html/front-matter/__snapshots__/jsfmt.spec.js.snap
@@ -24,9 +24,7 @@ slug: home
 
 ---
 
-<h1>
-  Hello world!
-</h1>
+<h1>Hello world!</h1>
 
 ================================================================================
 `;
diff --git a/tests/html/svg/__snapshots__/jsfmt.spec.js.snap b/tests/html/svg/__snapshots__/jsfmt.spec.js.snap
index ff1301896..46c9a4ff4 100644
--- a/tests/html/svg/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html/svg/__snapshots__/jsfmt.spec.js.snap
@@ -99,12 +99,8 @@ printWidth: 80
       In the context of SVG embeded into HTML, the XHTML namespace could be avoided, but it is mandatory in the context of an SVG document
     -->
     <div xmlns="http://www.w3.org/1999/xhtml">
-      <p>
-        123
-      </p>
-      <span>
-        123
-      </span>
+      <p>123</p>
+      <span> 123 </span>
     </div>
   </foreignObject>
 </svg>
diff --git a/tests/html/tags/__snapshots__/jsfmt.spec.js.snap b/tests/html/tags/__snapshots__/jsfmt.spec.js.snap
index be33704fa..2716a14bb 100644
--- a/tests/html/tags/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html/tags/__snapshots__/jsfmt.spec.js.snap
@@ -1431,9 +1431,7 @@ ___________________________
              ||     ||
 ___________________________
   </pre>
-  <figcaption id="cow-caption">
-    A cow saying, "I'm an expert in my field." The cow is illustrated using preformatted text characters.
-  </figcaption>
+  <figcaption id="cow-caption">A cow saying, "I'm an expert in my field." The cow is illustrated using preformatted text characters.</figcaption>
 </figure>
 <pre data-attr-1="foo" data-attr-2="foo" data-attr-3="foo" data-attr-4="foo" data-attr-5="foo" data-attr-6="foo">
      Foo     Bar
@@ -2812,9 +2810,7 @@ printWidth: Infinity
   <app-footer [input]="something"></app-footer>
 </div>
 <x:root><span>tag name in other namespace should also lower cased</span></x:root>
-<div>
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit, "<strong>seddoeiusmod</strong>".
-</div>
+<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, "<strong>seddoeiusmod</strong>".</div>
 <div>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit,
   <strong>seddoeiusmod</strong>.
diff --git a/tests/html/whitespace/__snapshots__/jsfmt.spec.js.snap b/tests/html/whitespace/__snapshots__/jsfmt.spec.js.snap
index 7176eac75..9441233f7 100644
--- a/tests/html/whitespace/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html/whitespace/__snapshots__/jsfmt.spec.js.snap
@@ -517,18 +517,12 @@ printWidth: 80
 <span>123</span>
 <span> 123</span>
 <span>123 </span>
-<span>
-  123
-</span>
+<span> 123 </span>
 
 <div>123</div>
-<div>
-  123
-</div>
 <div>123</div>
-<div>
-  123
-</div>
+<div>123</div>
+<div>123</div>
 
 ================================================================================
 `;
diff --git a/tests/mjml/mjml/__snapshots__/jsfmt.spec.js.snap b/tests/mjml/mjml/__snapshots__/jsfmt.spec.js.snap
index aabb76351..297ff67b0 100644
--- a/tests/mjml/mjml/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/mjml/mjml/__snapshots__/jsfmt.spec.js.snap
@@ -48,9 +48,7 @@ printWidth: 80
 =====================================output=====================================
 <mjml>
   <mj-head>
-    <mj-title>
-      The green fix eats mango.
-    </mj-title>
+    <mj-title> The green fix eats mango. </mj-title>
     <mj-breakpoint width="600px" />
     <mj-preview>Do you like cheese? We do!</mj-preview>
     <mj-attributes>
diff --git a/tests/vue/interpolation/__snapshots__/jsfmt.spec.js.snap b/tests/vue/interpolation/__snapshots__/jsfmt.spec.js.snap
new file mode 100644
index 000000000..3b930d98f
--- /dev/null
+++ b/tests/vue/interpolation/__snapshots__/jsfmt.spec.js.snap
@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`template.vue format 1`] = `
+====================================options=====================================
+parsers: ["vue"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<template>
+  <root>
+<div class="red">
+    We are going to add this simple card here
+  </div>
+  <div class="red">
+    What is going on {{ prop1 }} and {{ prop2 }}
+  </div>
+  </root>
+</template>
+
+=====================================output=====================================
+<template>
+  <root>
+    <div class="red">We are going to add this simple card here</div>
+    <div class="red">What is going on {{ prop1 }} and {{ prop2 }}</div>
+  </root>
+</template>
+
+================================================================================
+`;
diff --git a/tests/vue/interpolation/jsfmt.spec.js b/tests/vue/interpolation/jsfmt.spec.js
new file mode 100644
index 000000000..2fd7eede9
--- /dev/null
+++ b/tests/vue/interpolation/jsfmt.spec.js
@@ -0,0 +1 @@
+run_spec(__dirname, ["vue"]);
diff --git a/tests/vue/interpolation/template.vue b/tests/vue/interpolation/template.vue
new file mode 100644
index 000000000..26f7b0381
--- /dev/null
+++ b/tests/vue/interpolation/template.vue
@@ -0,0 +1,10 @@
+<template>
+  <root>
+<div class="red">
+    We are going to add this simple card here
+  </div>
+  <div class="red">
+    What is going on {{ prop1 }} and {{ prop2 }}
+  </div>
+  </root>
+</template>
diff --git a/tests/vue/vue/__snapshots__/jsfmt.spec.js.snap b/tests/vue/vue/__snapshots__/jsfmt.spec.js.snap
index 5c3ca3a34..06754d65f 100644
--- a/tests/vue/vue/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/vue/vue/__snapshots__/jsfmt.spec.js.snap
@@ -1914,9 +1914,7 @@ semi: false
     <template>
       <div></div>
     </template>
-    <div>
-      Do not go out, you'll got yourself cloned by bad bad people.
-    </div>
+    <div>Do not go out, you'll got yourself cloned by bad bad people.</div>
   </div>
 </template>
 
@@ -1947,9 +1945,7 @@ trailingComma: "none"
     <template>
       <div></div>
     </template>
-    <div>
-      Do not go out, you'll got yourself cloned by bad bad people.
-    </div>
+    <div>Do not go out, you'll got yourself cloned by bad bad people.</div>
   </div>
 </template>
 
@@ -1979,9 +1975,7 @@ printWidth: 80
     <template>
       <div></div>
     </template>
-    <div>
-      Do not go out, you'll got yourself cloned by bad bad people.
-    </div>
+    <div>Do not go out, you'll got yourself cloned by bad bad people.</div>
   </div>
 </template>
 
@@ -3127,9 +3121,7 @@ semi: false
         <template v-if="fileSize > 0">
           {{ fileSizeReadable }}
         </template>
-        <template v-if="fileSize > 0 && width && height">
-          |
-        </template>
+        <template v-if="fileSize > 0 && width && height"> | </template>
         <template v-if="width && height">
           W: {{ width }} | H: {{ height }}
         </template>
@@ -3193,9 +3185,7 @@ trailingComma: "none"
         <template v-if="fileSize > 0">
           {{ fileSizeReadable }}
         </template>
-        <template v-if="fileSize > 0 && width && height">
-          |
-        </template>
+        <template v-if="fileSize > 0 && width && height"> | </template>
         <template v-if="width && height">
           W: {{ width }} | H: {{ height }}
         </template>
@@ -3258,9 +3248,7 @@ printWidth: 80
         <template v-if="fileSize > 0">
           {{ fileSizeReadable }}
         </template>
-        <template v-if="fileSize > 0 && width && height">
-          |
-        </template>
+        <template v-if="fileSize > 0 && width && height"> | </template>
         <template v-if="width && height">
           W: {{ width }} | H: {{ height }}
         </template>