Fix LWC attribute with --embedded-language-formatting off (#18383)

Co-authored-by: fisker <[email protected]>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

Author: 3 people

changelog_unreleased/lwc/18383.md

@@ -0,0 +1,13 @@
+#### Avoid quote around interpolations (#18383 by @kovsu)
+
+<!-- prettier-ignore -->
+```html
+<!-- Input -->
+<div foo={bar}>   </div>
+
+<!-- Prettier stable (--embedded-language-formatting off) -->
+<div foo="{bar}"></div>
+
+<!-- Prettier main (--embedded-language-formatting off) -->
+<div foo={bar}></div>
+```

src/language-html/embed/attribute.js

@@ -1,4 +1,5 @@
 import { group, mapDoc } from "../../document/index.js";
+import { shouldUnquoteAttributeValue } from "../utilities/index.js";
 import angularAttributePrinters from "./angular-attributes.js";
 import { isClassNames, printClassNames } from "./class-names.js";
 import { isEventHandler, printEventHandler } from "./event-handler.js";
@@ -43,19 +44,7 @@ function printAttribute(path, options) {
     return;
   }
 
-  const { valueSpan } = node;
-  const isQuoted =
-    valueSpan.end.offset - valueSpan.start.offset === value.length + 2;
-
-  if (
-    !isQuoted &&
-    // lit-html: html`<my-element obj=${obj}></my-element>`
-    (/^PRETTIER_HTML_PLACEHOLDER_\d+_\d+_IN_JS$/u.test(value) ||
-      // lwc: html`<my-element data-for={value}></my-element>`
-      (options.parser === "lwc" &&
-        value.startsWith("{") &&
-        value.endsWith("}")))
-  ) {
+  if (shouldUnquoteAttributeValue(node, options)) {
     return [node.rawName, "=", value];
   }
 

src/language-html/printer-html.js

@@ -35,7 +35,11 @@ import {
   printOpeningTagStart,
 } from "./print/tag.js";
 import preprocess from "./print-preprocess.js";
-import { getTextValueParts, unescapeQuoteEntities } from "./utilities/index.js";
+import {
+  getTextValueParts,
+  shouldUnquoteAttributeValue,
+  unescapeQuoteEntities,
+} from "./utilities/index.js";
 
 function genericPrint(path, options, print) {
   const { node } = path;
@@ -128,8 +132,12 @@ function genericPrint(path, options, print) {
       if (node.value === null) {
         return node.rawName;
       }
+
       const value = unescapeQuoteEntities(node.value);
-      const quote = getPreferredQuote(value, '"');
+      const quote = shouldUnquoteAttributeValue(node, options)
+        ? ""
+        : getPreferredQuote(value, '"');
+
       return [
         node.rawName,
         "=",

src/language-html/utilities/index.js

@@ -600,6 +600,26 @@ function isVueScriptTag(node, options) {
   return isVueSfcBlock(node, options) && node.name === "script";
 }
 
+function isAttributeValueQuoted(node) {
+  const { valueSpan, value } = node;
+  return valueSpan.end.offset - valueSpan.start.offset === value.length + 2;
+}
+
+function shouldUnquoteAttributeValue(node, options) {
+  if (isAttributeValueQuoted(node)) {
+    return false;
+  }
+
+  const { value } = node;
+
+  return (
+    // Embedded HTML in JS: `` /* HTML */ `<my-element data-for={value}></my-element>` ``
+    /^PRETTIER_HTML_PLACEHOLDER_\d+_\d+_IN_JS$/u.test(value) ||
+    // LWC `<div foo={value}></div>`
+    (options.parser === "lwc" && value.startsWith("{") && value.endsWith("}"))
+  );
+}
+
 export {
   canHaveInterpolation,
   forceBreakChildren,
@@ -629,5 +649,6 @@ export {
   isWhitespaceSensitiveNode,
   preferHardlineAsLeadingSpaces,
   shouldPreserveContent,
+  shouldUnquoteAttributeValue,
   unescapeQuoteEntities,
 };

tests/format/lwc/attribute/quotes/__snapshots__/format.test.js.snap

@@ -13,10 +13,28 @@ unquoted={data}>   </div>
 <div class="{data}"    class='{data}'
 class={data}>   </div>
 
+<div
+  in-single-quote="'&apos;&quot;"
+  in-double-quote='"&apos;&quot;'
+  escaped-unquoted=&apos;&quot;
+  escaped-in-single-quote='&apos;&quot;'
+  escaped-in-double-quote="&apos;&quot;"
+  style="width:                         100px;"
+></div>
+
 =====================================output=====================================
-<div double-quoted="{data}" single-quoted="{data}" unquoted="{data}"></div>
+<div double-quoted="{data}" single-quoted="{data}" unquoted={data}></div>
+
+<div class="{data}" class="{data}" class={data}></div>
 
-<div class="{data}" class="{data}" class="{data}"></div>
+<div
+  in-single-quote="''&quot;"
+  in-double-quote='"&apos;"'
+  escaped-unquoted="'&quot;"
+  escaped-in-single-quote="'&quot;"
+  escaped-in-double-quote="'&quot;"
+  style="width:                         100px;"
+></div>
 
 ================================================================================
 `;
@@ -33,10 +51,28 @@ unquoted={data}>   </div>
 <div class="{data}"    class='{data}'
 class={data}>   </div>
 
+<div
+  in-single-quote="'&apos;&quot;"
+  in-double-quote='"&apos;&quot;'
+  escaped-unquoted=&apos;&quot;
+  escaped-in-single-quote='&apos;&quot;'
+  escaped-in-double-quote="&apos;&quot;"
+  style="width:                         100px;"
+></div>
+
 =====================================output=====================================
 <div double-quoted="{data}" single-quoted="{data}" unquoted={data}></div>
 
 <div class="{data}" class="{data}" class={data}></div>
 
+<div
+  in-single-quote="''&quot;"
+  in-double-quote='"&apos;"'
+  escaped-unquoted="'&quot;"
+  escaped-in-single-quote="'&quot;"
+  escaped-in-double-quote="'&quot;"
+  style="width: 100px"
+></div>
+
 ================================================================================
 `;

tests/format/lwc/attribute/quotes/quotes.html

@@ -3,3 +3,12 @@
 
 <div class="{data}"    class='{data}'
 class={data}>   </div>
+
+<div
+  in-single-quote="'&apos;&quot;"
+  in-double-quote='"&apos;&quot;'
+  escaped-unquoted=&apos;&quot;
+  escaped-in-single-quote='&apos;&quot;'
+  escaped-in-double-quote="&apos;&quot;"
+  style="width:                         100px;"
+></div>