fix(html-in-js): do not break empty content (#5355)

src/language-js/embed.js

@@ -582,6 +582,10 @@ function printHtmlTemplateLiteral(path, print, textToDoc, parser) {
 
   const expressionDocs = path.map(print, "expressions");
 
+  if (expressionDocs.length === 0 && text.trim().length === 0) {
+    return "``";
+  }
+
   const contentDoc = mapDoc(
     stripTrailingHardline(textToDoc(text, { parser })),
     doc => {
@@ -626,7 +630,9 @@ function printHtmlTemplateLiteral(path, print, textToDoc, parser) {
     }
   );
 
-  return concat(["`", indent(concat([hardline, contentDoc])), softline, "`"]);
+  return group(
+    concat(["`", indent(concat([hardline, group(contentDoc)])), softline, "`"])
+  );
 }
 
 module.exports = embed;

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

@@ -45,6 +45,8 @@ customElements.define('my-element', MyElement);
 
 const someHtml1 = html\`<div       > hello \${world} </div     >\`;
 const someHtml2 = /* HTML */ \`<div      > hello \${world} </div     >\`;
+
+html\`\`
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 import { LitElement, html } from "@polymer/lit-element";
 
@@ -82,4 +84,6 @@ const someHtml2 = /* HTML */ \`
   <div>hello \${world}</div>
 \`;
 
+html\`\`;
+
 `;

tests/multiparser_js_html/lit-html.js

@@ -42,3 +42,5 @@ customElements.define('my-element', MyElement);
 
 const someHtml1 = html`<div       > hello ${world} </div     >`;
 const someHtml2 = /* HTML */ `<div      > hello ${world} </div     >`;
+
+html``