feat(html): self-closing for void tags (#5116)

XHTML compatibility.

src/language-html/printer-htmlparser2.js

@@ -188,7 +188,7 @@ function printOpeningTag(path, print, isVoid) {
 
   // Don't break self-closing elements with no attributes
   if (isVoid && !n.attributes.length) {
-    return concat(["<", n.name, ">"]);
+    return concat(["<", n.name, " />"]);
   }
 
   // Don't break up opening elements with a single long text attribute
@@ -202,13 +202,10 @@ function printOpeningTag(path, print, isVoid) {
     concat([
       "<",
       n.name,
-      concat([
-        indent(
-          concat(path.map(attr => concat([line, print(attr)]), "attributes"))
-        ),
-        softline
-      ]),
-      ">"
+      indent(
+        concat(path.map(attr => concat([line, print(attr)]), "attributes"))
+      ),
+      isVoid ? concat([line, "/>"]) : concat([softline, ">"])
     ])
   );
 }

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

@@ -62,9 +62,9 @@ and HTML5 Apps. It also documents Mozilla products, like Firefox OS.">
 
 </article>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-<input name="address" maxlength="200">
-<input name="address" maxlength="200">
-<input name="address" maxlength="200">
+<input name="address" maxlength="200" />
+<input name="address" maxlength="200" />
+<input name="address" maxlength="200" />
 <div class="foo"></div>
 <div class="foo"></div>
 <div class="foo bar"></div>
@@ -77,7 +77,7 @@ and HTML5 Apps. It also documents Mozilla products, like Firefox OS.">
   content="The Mozilla Developer Network (MDN) provides
 information about Open Web technologies including HTML, CSS, and APIs for both Web sites
 and HTML5 Apps. It also documents Mozilla products, like Firefox OS."
->
+/>
 <div attribute>String</div>
 <div attribute="">String</div>
 <div attribute="">String</div>
@@ -187,9 +187,9 @@ exports[`boolean.html - parse5-verify 1`] = `
 <button type="submit" disabled="hahah">
   This is valid. This will be disabled.
 </button>
-<input type="checkbox" checked disabled name="cheese">
-<input type="checkbox" checked="checked" disabled="disabled" name="cheese">
-<input type="checkbox" checked disabled name="cheese">
+<input type="checkbox" checked disabled name="cheese" />
+<input type="checkbox" checked="checked" disabled="disabled" name="cheese" />
+<input type="checkbox" checked disabled name="cheese" />
 <div lang=""></div>
 
 `;
@@ -197,14 +197,14 @@ exports[`boolean.html - parse5-verify 1`] = `
 exports[`dobule-quotes.html - parse5-verify 1`] = `
 <img src="test.png" alt="John 'ShotGun' Nelson">
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-<img src="test.png" alt="John 'ShotGun' Nelson">
+<img src="test.png" alt="John 'ShotGun' Nelson" />
 
 `;
 
 exports[`single-quotes.html - parse5-verify 1`] = `
 <img src="test.png" alt='John "ShotGun" Nelson'>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-<img src="test.png" alt="John &quot;ShotGun&quot; Nelson">
+<img src="test.png" alt="John &quot;ShotGun&quot; Nelson" />
 
 `;
 

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

@@ -106,7 +106,7 @@ exports[`form.html - parse5-verify 1`] = `
       id="exampleInputEmail1"
       aria-describedby="emailHelp"
       placeholder="Enter email"
-    >
+    />
     <small id="emailHelp" class="form-text text-muted">
       We'll never share your email with anyone else.
     </small>
@@ -118,7 +118,7 @@ exports[`form.html - parse5-verify 1`] = `
       class="form-control"
       id="exampleInputPassword1"
       placeholder="Password"
-    >
+    />
   </div>
   <div class="form-group">
     <label for="exampleSelect1">Example select</label>
@@ -151,7 +151,7 @@ exports[`form.html - parse5-verify 1`] = `
       class="form-control-file"
       id="exampleInputFile"
       aria-describedby="fileHelp"
-    >
+    />
     <small id="fileHelp" class="form-text text-muted">
       This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.
     </small>
@@ -167,7 +167,7 @@ exports[`form.html - parse5-verify 1`] = `
           id="optionsRadios1"
           value="option1"
           checked
-        >
+        />
         Option one is this and that—be sure to include why it's great
       </label>
     </div>
@@ -179,7 +179,7 @@ exports[`form.html - parse5-verify 1`] = `
           name="optionsRadios"
           id="optionsRadios2"
           value="option2"
-        >
+        />
         Option two can be something else and selecting it will deselect option one
       </label>
     </div>
@@ -192,14 +192,14 @@ exports[`form.html - parse5-verify 1`] = `
           id="optionsRadios3"
           value="option3"
           disabled
-        >
+        />
         Option three is disabled
       </label>
     </div>
   </fieldset>
   <div class="form-check">
     <label class="form-check-label">
-      <input type="checkbox" class="form-check-input">
+      <input type="checkbox" class="form-check-input" />
       Check me out
     </label>
   </div>
@@ -230,8 +230,8 @@ exports[`hello-world.html - parse5-verify 1`] = `
 <html lang="en">
   <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <title>Document</title>
   </head>
   <body>
@@ -319,20 +319,20 @@ exports[`html5-boilerplate.html - parse5-verify 1`] = `
 <html class="no-js" lang="">
   <head>
     <meta charset="utf-8">
-    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta http-equiv="x-ua-compatible" content="ie=edge" />
     <title></title>
-    <meta name="description" content="">
+    <meta name="description" content="" />
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
-    >
+    />
 
-    <link rel="manifest" href="site.webmanifest">
-    <link rel="apple-touch-icon" href="icon.png">
+    <link rel="manifest" href="site.webmanifest" />
+    <link rel="apple-touch-icon" href="icon.png" />
     <!-- Place favicon.ico in the root directory -->
 
-    <link rel="stylesheet" href="css/normalize.css">
-    <link rel="stylesheet" href="css/main.css">
+    <link rel="stylesheet" href="css/normalize.css" />
+    <link rel="stylesheet" href="css/main.css" />
   </head>
 
   <body>
@@ -406,7 +406,7 @@ exports[`void-elements.html - parse5-verify 1`] = `
 <html>
   <head>
     <meta charset="UTF-8">
-    <link rel="stylesheet" href="code-guide.css">
+    <link rel="stylesheet" href="code-guide.css" />
   </head>
   <body></body>
 </html>

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

@@ -23,11 +23,11 @@ exports[`case.html - parse5-verify 1`] = `
   <head>
     <meta charset="utf-8">
     <title>My tITlE</title>
-    <meta name="description" content="My CoNtEnT">
+    <meta name="description" content="My CoNtEnT" />
   </head>
   <body>
     <p>
-      Hello world!<br>
+      Hello world!<br />
       This is HTML5 Boilerplate.
     </p>
     <script>

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

@@ -130,13 +130,13 @@ exports[`xhtml1.1.html - parse5-verify 1`] = `
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
+    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
     <title>XHTML markup</title>
   </head>
   <body style="background-color:#ffffcc; color:#008800">
-    <br>
+    <br />
     <h2 align="center">Sample XHTML page</h2>
-    <br>
+    <br />
     <div align="center">
       <img
         src="../images/bee3.jpg"
@@ -144,19 +144,19 @@ exports[`xhtml1.1.html - parse5-verify 1`] = `
         height="250"
         alt="Beep"
         vspace="20"
-      >
+      />
     </div>
     <p align="center" style="font-size:17px">
-      Bar Foo,<br>
-      Foo,<br>
-      Bar<br>
+      Bar Foo,<br />
+      Foo,<br />
+      Bar<br />
       Foo
     </p>
     <p align="center">
       <em>String</em>
     </p>
-    <br>
-    <hr>
+    <br />
+    <hr />
   </body>
 </html>
 

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

@@ -49,7 +49,7 @@ exports[`document.html - parse5-verify 1`] = `
 <html class="no-js" lang="en">
   <head>
     <meta charset="utf-8">
-    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta http-equiv="x-ua-compatible" content="ie=edge" />
     <title>Title</title>
   </head>
   <body>

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

@@ -226,14 +226,14 @@ exports[`tags.html - parse5-verify 1`] = `
 
 </div>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-<br>
-<br>
-<br>
-<br>
-<br attribute-a>
+<br />
+<br />
+<br />
+<br />
+<br attribute-a />
 <br
   very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-attribute
->
+/>
 <br attribute-a="value">
 <br attribute-a="value">
 <br very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-attribute="value">
@@ -245,7 +245,7 @@ exports[`tags.html - parse5-verify 1`] = `
   attribute-d="value"
   attribute-e="value"
   attribute-f="value"
->
+/>
 <div>string</div>
 <div>
   very very very very very very very very very very very very very very very very long string
@@ -285,8 +285,8 @@ exports[`tags.html - parse5-verify 1`] = `
   very very very very very very very very very very very very very very very very long string
 </div>
 <video width="320" height="240" controls>
-  <source src="movie.mp4" type="video/mp4">
-  <source src="movie.ogg" type="video/ogg">
+  <source src="movie.mp4" type="video/mp4" />
+  <source src="movie.ogg" type="video/ogg" />
   Your browser does not support the video tag.
 </video>
 <div>