feat(html): smart quote for attributes (#5590)

src/language-html/printer-html.js

@@ -20,6 +20,7 @@ const {
   softline
 } = builders;
 const {
+  countChars,
   countParents,
   dedentString,
   forceBreakChildren,
@@ -36,7 +37,8 @@ const {
   replaceDocNewlines,
   replaceNewlines,
   shouldNotPrintClosingTag,
-  shouldPreserveContent
+  shouldPreserveContent,
+  unescapeQuoteEntities
 } = require("./utils");
 const preprocess = require("./preprocess");
 const assert = require("assert");
@@ -325,19 +327,31 @@ function genericPrint(path, options, print) {
         printClosingTagSuffix(node, options)
       ]);
     }
-    case "attribute":
+    case "attribute": {
+      if (node.value === null) {
+        return node.rawName;
+      }
+      const value = unescapeQuoteEntities(node.value);
+      const singleQuoteCount = countChars(value, "'");
+      const doubleQuoteCount = countChars(value, '"');
+      const quote = singleQuoteCount < doubleQuoteCount ? "'" : '"';
       return concat([
         node.rawName,
-        node.value === null
-          ? ""
-          : concat([
-              '="',
-              concat(
-                replaceNewlines(node.value.replace(/"/g, "&quot;"), literalline)
-              ),
-              '"'
-            ])
+        concat([
+          "=",
+          quote,
+          concat(
+            replaceNewlines(
+              quote === '"'
+                ? value.replace(/"/g, "&quot;")
+                : value.replace(/'/g, "&apos;"),
+              literalline
+            )
+          ),
+          quote
+        ])
       ]);
+    }
     case "yaml":
     case "toml":
       return node.raw;
@@ -892,8 +906,7 @@ function getTextValueParts(node, value = node.value) {
 function printEmbeddedAttributeValue(node, originalTextToDoc, options) {
   const isKeyMatched = patterns =>
     new RegExp(patterns.join("|")).test(node.fullName);
-  const getValue = () =>
-    node.value.replace(/&quot;/g, '"').replace(/&apos;/g, "'");
+  const getValue = () => unescapeQuoteEntities(node.value);
 
   let shouldHug = false;
 

src/language-html/utils.js

@@ -602,10 +602,25 @@ function shouldNotPrintClosingTag(node, options) {
   );
 }
 
+function countChars(text, char) {
+  let counter = 0;
+  for (let i = 0; i < text.length; i++) {
+    if (text[i] === char) {
+      counter++;
+    }
+  }
+  return counter;
+}
+
+function unescapeQuoteEntities(text) {
+  return text.replace(/&apos;/g, "'").replace(/&quot;/g, '"');
+}
+
 module.exports = {
   HTML_ELEMENT_ATTRIBUTES,
   HTML_TAGS,
   canHaveInterpolation,
+  countChars,
   countParents,
   dedentString,
   forceBreakChildren,
@@ -633,5 +648,6 @@ module.exports = {
   replaceDocNewlines,
   replaceNewlines,
   shouldNotPrintClosingTag,
-  shouldPreserveContent
+  shouldPreserveContent,
+  unescapeQuoteEntities
 };

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

@@ -277,7 +277,29 @@ printWidth: 80
 <img src="test.png" alt='John "ShotGun" Nelson'>
 
 =====================================output=====================================
-<img src="test.png" alt="John &quot;ShotGun&quot; Nelson" />
+<img src="test.png" alt='John "ShotGun" Nelson' />
+
+================================================================================
+`;
+
+exports[`smart-quotes.html 1`] = `
+====================================options=====================================
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<div 
+    smart-quotes='123 " 456'
+    smart-quotes="123 ' 456"
+    smart-quotes='123 &apos;&quot; 456'
+></div>
+
+=====================================output=====================================
+<div
+  smart-quotes='123 " 456'
+  smart-quotes="123 ' 456"
+  smart-quotes="123 '&quot; 456"
+></div>
 
 ================================================================================
 `;

tests/html_attributes/smart-quotes.html

@@ -0,0 +1,5 @@
+<div 
+    smart-quotes='123 " 456'
+    smart-quotes="123 ' 456"
+    smart-quotes='123 &apos;&quot; 456'
+></div>