feat(html): handle pre with interpolation (#5400)

src/language-html/printer-html.js

@@ -200,7 +200,11 @@ function genericPrint(path, options, print) {
                         : node.firstChild.type === "text" &&
                           node.firstChild.isWhitespaceSensitive &&
                           node.firstChild.isIndentationSensitive
-                        ? node.firstChild.value.indexOf("\n") === -1
+                        ? (node.children.length === 1 &&
+                            node.firstChild.type === "text" &&
+                            node.firstChild.value.indexOf("\n") === -1) ||
+                          node.firstChild.sourceSpan.start.line ===
+                            node.lastChild.sourceSpan.end.line
                           ? ""
                           : literalline
                         : node.firstChild.hasLeadingSpaces &&

src/language-html/utils.js

@@ -43,7 +43,9 @@ function hasPrettierIgnore(path) {
   // TODO: handle non-text children in <pre>
   if (
     isPreLikeNode(node) &&
-    node.children.some(child => child.type !== "text")
+    node.children.some(
+      child => child.type !== "text" && child.type !== "interpolation"
+    )
   ) {
     return true;
   }

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

@@ -833,6 +833,19 @@ exports[`pre-child.vue - vue-verify 1`] = `
     <code class="d-block">{{ code }}</code>
   </pre>
 </template>
+
+<template>
+<pre class='woot'>
+  {{ stuff }}
+  </pre>
+</template>
+
+<template>
+<pre class='woot'>
+  123{{ wqeqwwqwqweqweqwewwq || wqeqwwqwqweqweqwewwq || wqeqwwqwqweqweqwewwq || wqeqwwqwqweqweqwewwq }}123
+  123{{ wqeqwwqwqweqweqwewwq || wqeqwwqwqweqweqwewwq || wqeqwwqwqweqweqwewwq || wqeqwwqwqweqweqwewwq }}123
+    </pre>
+</template>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <!--
   copied from https://github.com/gitlabhq/gitlabhq/blob/master/app/assets/javascripts/ide/components/jobs/detail.vue
@@ -867,6 +880,30 @@ exports[`pre-child.vue - vue-verify 1`] = `
   </pre>
 </template>
 
+<template>
+  <pre class="woot">
+  {{ stuff }}
+  </pre>
+</template>
+
+<template>
+  <pre class="woot">
+  123{{
+      wqeqwwqwqweqweqwewwq ||
+        wqeqwwqwqweqweqwewwq ||
+        wqeqwwqwqweqweqwewwq ||
+        wqeqwwqwqweqweqwewwq
+    }}123
+  123{{
+      wqeqwwqwqweqweqwewwq ||
+        wqeqwwqwqweqweqwewwq ||
+        wqeqwwqwqweqweqwewwq ||
+        wqeqwwqwqweqweqwewwq
+    }}123
+    </pre
+  >
+</template>
+
 `;
 
 exports[`pre-child.vue - vue-verify 2`] = `
@@ -898,6 +935,19 @@ exports[`pre-child.vue - vue-verify 2`] = `
     <code class="d-block">{{ code }}</code>
   </pre>
 </template>
+
+<template>
+<pre class='woot'>
+  {{ stuff }}
+  </pre>
+</template>
+
+<template>
+<pre class='woot'>
+  123{{ wqeqwwqwqweqweqwewwq || wqeqwwqwqweqweqwewwq || wqeqwwqwqweqweqwewwq || wqeqwwqwqweqweqwewwq }}123
+  123{{ wqeqwwqwqweqweqwewwq || wqeqwwqwqweqweqwewwq || wqeqwwqwqweqweqwewwq || wqeqwwqwqweqweqwewwq }}123
+    </pre>
+</template>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <!--
   copied from https://github.com/gitlabhq/gitlabhq/blob/master/app/assets/javascripts/ide/components/jobs/detail.vue
@@ -932,6 +982,30 @@ exports[`pre-child.vue - vue-verify 2`] = `
   </pre>
 </template>
 
+<template>
+  <pre class="woot">
+  {{ stuff }}
+  </pre>
+</template>
+
+<template>
+  <pre class="woot">
+  123{{
+      wqeqwwqwqweqweqwewwq ||
+        wqeqwwqwqweqweqwewwq ||
+        wqeqwwqwqweqweqwewwq ||
+        wqeqwwqwqweqweqwewwq
+    }}123
+  123{{
+      wqeqwwqwqweqweqwewwq ||
+        wqeqwwqwqweqweqwewwq ||
+        wqeqwwqwqweqweqwewwq ||
+        wqeqwwqwqweqweqwewwq
+    }}123
+    </pre
+  >
+</template>
+
 `;
 
 exports[`script_src.vue - vue-verify 1`] = `

tests/html_vue/pre-child.vue

@@ -26,3 +26,16 @@
     <code class="d-block">{{ code }}</code>
   </pre>
 </template>
+
+<template>
+<pre class='woot'>
+  {{ stuff }}
+  </pre>
+</template>
+
+<template>
+<pre class='woot'>
+  123{{ wqeqwwqwqweqweqwewwq || wqeqwwqwqweqweqwewwq || wqeqwwqwqweqweqwewwq || wqeqwwqwqweqweqwewwq }}123
+  123{{ wqeqwwqwqweqweqwewwq || wqeqwwqwqweqweqwewwq || wqeqwwqwqweqweqwewwq || wqeqwwqwqweqweqwewwq }}123
+    </pre>
+</template>