Fix broken closing tag of pre-like elements (#19046)

changelog_unreleased/html/19046.md

@@ -0,0 +1,26 @@
+#### Fix closing tag of pre-like elements being split across lines (#19046 by @kovsu)
+
+<!-- prettier-ignore -->
+```html
+<!-- Input -->
+<div>
+<pre>
+  Content
+</pre>
+</div>
+
+<!-- Prettier stable -->
+<div>
+  <pre>
+  Content
+</pre
+  >
+</div>
+
+<!-- Prettier main -->
+<div>
+  <pre>
+  Content
+</pre>
+</div>
+```

src/language-html/print/element.js

@@ -12,6 +12,7 @@ import {
 import getNodeContent from "../get-node-content.js";
 import {
   forceBreakContent,
+  isPreLikeNode,
   isScriptLikeTag,
   isVueCustomBlock,
   shouldPreserveContent,
@@ -19,6 +20,7 @@ import {
 import { printChildren } from "./children.js";
 import {
   needsToBorrowLastChildClosingTagEndMarker,
+  needsToBorrowParentClosingTagStartMarker,
   needsToBorrowPrevClosingTagEndMarker,
   printClosingTag,
   printClosingTagSuffix,
@@ -124,6 +126,12 @@ function printElement(path, options, print) {
       }
       return "";
     }
+    if (
+      isPreLikeNode(node) &&
+      needsToBorrowParentClosingTagStartMarker(node.lastChild)
+    ) {
+      return "";
+    }
     if (shouldHugContent) {
       return ifBreak(softline, "", { groupId: attrGroupId });
     }

tests/format/angular/angular/__snapshots__/format.test.js.snap

@@ -2104,45 +2104,37 @@ parsers: ["angular"]
 <textarea>    {{ generatedDiscountCodes }}</textarea>
 <textarea>
   
-{{ generatedDiscountCodes }}</textarea
->
+{{ generatedDiscountCodes }}</textarea>
 <textarea>
   
-    {{ generatedDiscountCodes }}</textarea
->
+    {{ generatedDiscountCodes }}</textarea>
 <textarea>{{ generatedDiscountCodes }}123</textarea>
 <textarea>{{ generatedDiscountCodes }}123</textarea>
 <textarea>    {{ generatedDiscountCodes }}123</textarea>
 <textarea>
   
-{{ generatedDiscountCodes }}123</textarea
->
+{{ generatedDiscountCodes }}123</textarea>
 <textarea>
   
-    {{ generatedDiscountCodes }}123</textarea
->
+    {{ generatedDiscountCodes }}123</textarea>
 <textarea type="text">{{ generatedDiscountCodes }}</textarea>
 <textarea type="text">{{ generatedDiscountCodes }}</textarea>
 <textarea type="text">    {{ generatedDiscountCodes }}</textarea>
 <textarea type="text">
   
-{{ generatedDiscountCodes }}</textarea
->
+{{ generatedDiscountCodes }}</textarea>
 <textarea type="text">
   
-    {{ generatedDiscountCodes }}</textarea
->
+    {{ generatedDiscountCodes }}</textarea>
 <textarea type="text">{{ generatedDiscountCodes }}123</textarea>
 <textarea type="text">{{ generatedDiscountCodes }}123</textarea>
 <textarea type="text">    {{ generatedDiscountCodes }}123</textarea>
 <textarea type="text">
   
-{{ generatedDiscountCodes }}123</textarea
->
+{{ generatedDiscountCodes }}123</textarea>
 <textarea type="text">
   
-    {{ generatedDiscountCodes }}123</textarea
->
+    {{ generatedDiscountCodes }}123</textarea>
 
 ================================================================================
 `;
@@ -2196,45 +2188,37 @@ parsers: ["angular"]
 <textarea>    {{ generatedDiscountCodes }}</textarea>
 <textarea>
   
-{{ generatedDiscountCodes }}</textarea
->
+{{ generatedDiscountCodes }}</textarea>
 <textarea>
   
-    {{ generatedDiscountCodes }}</textarea
->
+    {{ generatedDiscountCodes }}</textarea>
 <textarea>{{ generatedDiscountCodes }}123</textarea>
 <textarea>{{ generatedDiscountCodes }}123</textarea>
 <textarea>    {{ generatedDiscountCodes }}123</textarea>
 <textarea>
   
-{{ generatedDiscountCodes }}123</textarea
->
+{{ generatedDiscountCodes }}123</textarea>
 <textarea>
   
-    {{ generatedDiscountCodes }}123</textarea
->
+    {{ generatedDiscountCodes }}123</textarea>
 <textarea type="text">{{ generatedDiscountCodes }}</textarea>
 <textarea type="text">{{ generatedDiscountCodes }}</textarea>
 <textarea type="text">    {{ generatedDiscountCodes }}</textarea>
 <textarea type="text">
   
-{{ generatedDiscountCodes }}</textarea
->
+{{ generatedDiscountCodes }}</textarea>
 <textarea type="text">
   
-    {{ generatedDiscountCodes }}</textarea
->
+    {{ generatedDiscountCodes }}</textarea>
 <textarea type="text">{{ generatedDiscountCodes }}123</textarea>
 <textarea type="text">{{ generatedDiscountCodes }}123</textarea>
 <textarea type="text">    {{ generatedDiscountCodes }}123</textarea>
 <textarea type="text">
   
-{{ generatedDiscountCodes }}123</textarea
->
+{{ generatedDiscountCodes }}123</textarea>
 <textarea type="text">
   
-    {{ generatedDiscountCodes }}123</textarea
->
+    {{ generatedDiscountCodes }}123</textarea>
 
 ================================================================================
 `;
@@ -2286,127 +2270,107 @@ printWidth: 1
 <textarea
   >{{
     generatedDiscountCodes
-  }}</textarea
->
+  }}</textarea>
 <textarea
   >{{
     generatedDiscountCodes
-  }}</textarea
->
+  }}</textarea>
 <textarea>
     {{
     generatedDiscountCodes
-  }}</textarea
->
+  }}</textarea>
 <textarea>
   
 {{
     generatedDiscountCodes
-  }}</textarea
->
+  }}</textarea>
 <textarea>
   
     {{
     generatedDiscountCodes
-  }}</textarea
->
+  }}</textarea>
 <textarea
   >{{
     generatedDiscountCodes
-  }}123</textarea
->
+  }}123</textarea>
 <textarea
   >{{
     generatedDiscountCodes
-  }}123</textarea
->
+  }}123</textarea>
 <textarea>
     {{
     generatedDiscountCodes
-  }}123</textarea
->
+  }}123</textarea>
 <textarea>
   
 {{
     generatedDiscountCodes
-  }}123</textarea
->
+  }}123</textarea>
 <textarea>
   
     {{
     generatedDiscountCodes
-  }}123</textarea
->
+  }}123</textarea>
 <textarea
   type="text"
   >{{
     generatedDiscountCodes
-  }}</textarea
->
+  }}</textarea>
 <textarea
   type="text"
   >{{
     generatedDiscountCodes
-  }}</textarea
->
+  }}</textarea>
 <textarea
   type="text"
 >
     {{
     generatedDiscountCodes
-  }}</textarea
->
+  }}</textarea>
 <textarea
   type="text"
 >
   
 {{
     generatedDiscountCodes
-  }}</textarea
->
+  }}</textarea>
 <textarea
   type="text"
 >
   
     {{
     generatedDiscountCodes
-  }}</textarea
->
+  }}</textarea>
 <textarea
   type="text"
   >{{
     generatedDiscountCodes
-  }}123</textarea
->
+  }}123</textarea>
 <textarea
   type="text"
   >{{
     generatedDiscountCodes
-  }}123</textarea
->
+  }}123</textarea>
 <textarea
   type="text"
 >
     {{
     generatedDiscountCodes
-  }}123</textarea
->
+  }}123</textarea>
 <textarea
   type="text"
 >
   
 {{
     generatedDiscountCodes
-  }}123</textarea
->
+  }}123</textarea>
 <textarea
   type="text"
 >
   
     {{
     generatedDiscountCodes
-  }}123</textarea
->
+  }}123</textarea>
 
 ================================================================================
 `;
@@ -2460,45 +2424,37 @@ trailingComma: "es5"
 <textarea>    {{ generatedDiscountCodes }}</textarea>
 <textarea>
   
-{{ generatedDiscountCodes }}</textarea
->
+{{ generatedDiscountCodes }}</textarea>
 <textarea>
   
-    {{ generatedDiscountCodes }}</textarea
->
+    {{ generatedDiscountCodes }}</textarea>
 <textarea>{{ generatedDiscountCodes }}123</textarea>
 <textarea>{{ generatedDiscountCodes }}123</textarea>
 <textarea>    {{ generatedDiscountCodes }}123</textarea>
 <textarea>
   
-{{ generatedDiscountCodes }}123</textarea
->
+{{ generatedDiscountCodes }}123</textarea>
 <textarea>
   
-    {{ generatedDiscountCodes }}123</textarea
->
+    {{ generatedDiscountCodes }}123</textarea>
 <textarea type="text">{{ generatedDiscountCodes }}</textarea>
 <textarea type="text">{{ generatedDiscountCodes }}</textarea>
 <textarea type="text">    {{ generatedDiscountCodes }}</textarea>
 <textarea type="text">
   
-{{ generatedDiscountCodes }}</textarea
->
+{{ generatedDiscountCodes }}</textarea>
 <textarea type="text">
   
-    {{ generatedDiscountCodes }}</textarea
->
+    {{ generatedDiscountCodes }}</textarea>
 <textarea type="text">{{ generatedDiscountCodes }}123</textarea>
 <textarea type="text">{{ generatedDiscountCodes }}123</textarea>
 <textarea type="text">    {{ generatedDiscountCodes }}123</textarea>
 <textarea type="text">
   
-{{ generatedDiscountCodes }}123</textarea
->
+{{ generatedDiscountCodes }}123</textarea>
 <textarea type="text">
   
-    {{ generatedDiscountCodes }}123</textarea
->
+    {{ generatedDiscountCodes }}123</textarea>
 
 ================================================================================
 `;
@@ -2552,45 +2508,37 @@ trailingComma: "none"
 <textarea>    {{ generatedDiscountCodes }}</textarea>
 <textarea>
   
-{{ generatedDiscountCodes }}</textarea
->
+{{ generatedDiscountCodes }}</textarea>
 <textarea>
   
-    {{ generatedDiscountCodes }}</textarea
->
+    {{ generatedDiscountCodes }}</textarea>
 <textarea>{{ generatedDiscountCodes }}123</textarea>
 <textarea>{{ generatedDiscountCodes }}123</textarea>
 <textarea>    {{ generatedDiscountCodes }}123</textarea>
 <textarea>
   
-{{ generatedDiscountCodes }}123</textarea
->
+{{ generatedDiscountCodes }}123</textarea>
 <textarea>
   
-    {{ generatedDiscountCodes }}123</textarea
->
+    {{ generatedDiscountCodes }}123</textarea>
 <textarea type="text">{{ generatedDiscountCodes }}</textarea>
 <textarea type="text">{{ generatedDiscountCodes }}</textarea>
 <textarea type="text">    {{ generatedDiscountCodes }}</textarea>
 <textarea type="text">
   
-{{ generatedDiscountCodes }}</textarea
->
+{{ generatedDiscountCodes }}</textarea>
 <textarea type="text">
   
-    {{ generatedDiscountCodes }}</textarea
->
+    {{ generatedDiscountCodes }}</textarea>
 <textarea type="text">{{ generatedDiscountCodes }}123</textarea>
 <textarea type="text">{{ generatedDiscountCodes }}123</textarea>
 <textarea type="text">    {{ generatedDiscountCodes }}123</textarea>
 <textarea type="text">
   
-{{ generatedDiscountCodes }}123</textarea
->
+{{ generatedDiscountCodes }}123</textarea>
 <textarea type="text">
   
-    {{ generatedDiscountCodes }}123</textarea
->
+    {{ generatedDiscountCodes }}123</textarea>
 
 ================================================================================
 `;

tests/format/html/basics/__snapshots__/format.test.js.snap

@@ -718,12 +718,10 @@ e-wrap </html:textarea>
     <div>block</div>
     <pre>
  pre pr
-e</pre
-    >
+e</pre>
     <textarea>
  pre-wrap pr
-e-wrap </textarea
-    >
+e-wrap </textarea>
     <span>
       looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline
     </span>
@@ -758,12 +756,10 @@ e-wrap </textarea
     <div>block</div>
     <pre>
  pre pr
-e</pre
-    >
+e</pre>
     <textarea>
  pre-wrap pr
-e-wrap </textarea
-    >
+e-wrap </textarea>
     <span>
       looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline
     </span>
@@ -798,12 +794,10 @@ e-wrap </textarea
     <div>block</div>
     <pre>
  pre pr
-e</pre
-    >
+e</pre>
     <textarea>
  pre-wrap pr
-e-wrap </textarea
-    >
+e-wrap </textarea>
     <span>
       looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline
     </span>
@@ -838,12 +832,10 @@ e-wrap </textarea
     <div>block</div>
     <pre>
  pre pr
-e</pre
-    >
+e</pre>
     <textarea>
  pre-wrap pr
-e-wrap </textarea
-    >
+e-wrap </textarea>
     <span>
       looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline
     </span>
@@ -878,12 +870,10 @@ e-wrap </textarea
     <div>block</div>
     <pre>
  pre pr
-e</pre
-    >
+e</pre>
     <textarea>
  pre-wrap pr
-e-wrap </textarea
-    >
+e-wrap </textarea>
     <span>
       looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline
     </span>

tests/format/html/tags/__snapshots__/format.test.js.snap

@@ -1307,6 +1307,13 @@ ___________________________
 <pre><br/>long long long text long long long text long long long text long long long text <br></pre>
 <pre><br>long long long text long long long text long long long text long long long text <BR/></pre>
 
+<!-- #15982 -->
+<div>
+<pre>
+  Content
+</pre>
+</div>
+
 =====================================output=====================================
 <pre>
 --------------------------------------------------------------------------------
@@ -1420,6 +1427,13 @@ ___________________________
 <pre><br/>long long long text long long long text long long long text long long long text <br></pre>
 <pre><br>long long long text long long long text long long long text long long long text <BR/></pre>
 
+<!-- #15982 -->
+<div>
+  <pre>
+  Content
+</pre>
+</div>
+
 ================================================================================
 `;
 
@@ -1531,6 +1545,13 @@ ___________________________
 <pre><br/>long long long text long long long text long long long text long long long text <br></pre>
 <pre><br>long long long text long long long text long long long text long long long text <BR/></pre>
 
+<!-- #15982 -->
+<div>
+<pre>
+  Content
+</pre>
+</div>
+
 =====================================output=====================================
 <pre>
 --------------------------------------------------------------------------------
@@ -1644,6 +1665,13 @@ ___________________________
 <pre><br/>long long long text long long long text long long long text long long long text <br></pre>
 <pre><br>long long long text long long long text long long long text long long long text <BR/></pre>
 
+<!-- #15982 -->
+<div>
+  <pre>
+  Content
+</pre>
+</div>
+
 ================================================================================
 `;
 
@@ -1754,6 +1782,13 @@ ___________________________
 <pre><br/>long long long text long long long text long long long text long long long text <br></pre>
 <pre><br>long long long text long long long text long long long text long long long text <BR/></pre>
 
+<!-- #15982 -->
+<div>
+<pre>
+  Content
+</pre>
+</div>
+
 =====================================output=====================================
 <pre>
 --------------------------------------------------------------------------------
@@ -1857,6 +1892,13 @@ ___________________________
 <pre><br/>long long long text long long long text long long long text long long long text <br></pre>
 <pre><br>long long long text long long long text long long long text long long long text <BR/></pre>
 
+<!-- #15982 -->
+<div>
+  <pre>
+  Content
+</pre>
+</div>
+
 ================================================================================
 `;
 
@@ -1968,6 +2010,13 @@ ___________________________
 <pre><br/>long long long text long long long text long long long text long long long text <br></pre>
 <pre><br>long long long text long long long text long long long text long long long text <BR/></pre>
 
+<!-- #15982 -->
+<div>
+<pre>
+  Content
+</pre>
+</div>
+
 =====================================output=====================================
 <pre>
 --------------------------------------------------------------------------------
@@ -2007,8 +2056,7 @@ ___________________________
 
 </pre>
 <pre>
-     Foo     Bar     </pre
->
+     Foo     Bar     </pre>
 <pre>
      Foo     Bar
 </pre>
@@ -2016,8 +2064,7 @@ ___________________________
 Foo     Bar
 </pre>
 <pre>
-     Foo     Bar</pre
->
+     Foo     Bar</pre>
 <figure
   role="img"
   aria-labelledby="cow-caption"
@@ -2105,6 +2152,13 @@ ___________________________
 <pre><br/>long long long text long long long text long long long text long long long text <br></pre>
 <pre><br>long long long text long long long text long long long text long long long text <BR/></pre>
 
+<!-- #15982 -->
+<div>
+  <pre>
+  Content
+</pre>
+</div>
+
 ================================================================================
 `;
 
@@ -2215,6 +2269,13 @@ ___________________________
 <pre><br/>long long long text long long long text long long long text long long long text <br></pre>
 <pre><br>long long long text long long long text long long long text long long long text <BR/></pre>
 
+<!-- #15982 -->
+<div>
+<pre>
+  Content
+</pre>
+</div>
+
 =====================================output=====================================
 <pre>
 --------------------------------------------------------------------------------
@@ -2328,6 +2389,13 @@ ___________________________
 <pre><br/>long long long text long long long text long long long text long long long text <br></pre>
 <pre><br>long long long text long long long text long long long text long long long text <BR/></pre>
 
+<!-- #15982 -->
+<div>
+  <pre>
+  Content
+</pre>
+</div>
+
 ================================================================================
 `;
 
@@ -5119,8 +5187,7 @@ printWidth: 1
 
 <div>
   <textarea>
-lorem ipsum</textarea
-  >
+lorem ipsum</textarea>
 </div>
 
 ================================================================================

tests/format/html/tags/pre.html

@@ -99,3 +99,10 @@ ___________________________
 <PRE><DIV></DIV></PRE>
 <pre><br/>long long long text long long long text long long long text long long long text <br></pre>
 <pre><br>long long long text long long long text long long long text long long long text <BR/></pre>
+
+<!-- #15982 -->
+<div>
+<pre>
+  Content
+</pre>
+</div>

tests/format/vue/vue/__snapshots__/format.test.js.snap

@@ -2996,8 +2996,7 @@ semi: false
       wqeqwwqwqweqweqwewwq ||
       wqeqwwqwqweqweqwewwq
     }}123
-    </pre
-  >
+    </pre>
 </template>
 
 ================================================================================
@@ -3101,8 +3100,7 @@ trailingComma: "es5"
       wqeqwwqwqweqweqwewwq ||
       wqeqwwqwqweqweqwewwq
     }}123
-    </pre
-  >
+    </pre>
 </template>
 
 ================================================================================
@@ -3206,8 +3204,7 @@ trailingComma: "none"
       wqeqwwqwqweqweqwewwq ||
       wqeqwwqwqweqweqwewwq
     }}123
-    </pre
-  >
+    </pre>
 </template>
 
 ================================================================================