handlebars: Do not format html element attributes but class (#8677)

changelog_unreleased/handlebars/pr-8677.md

@@ -0,0 +1,16 @@
+#### Format only class names in attributes ([#8677](https://github.com/prettier/prettier/pull/8677) by [@dcyriller](https://github.com/dcyriller)
+
+<!-- prettier-ignore -->
+```hbs
+{{!-- Input --}}
+<div class=' class '></div>
+<div title=' other attribute '></div>
+
+{{!-- Prettier stable --}}
+<div class="class"></div>
+<div title="other attribute"></div>
+
+{{!-- Prettier master --}}
+<div class="class"></div>
+<div title=" other attribute "></div>
+```

src/language-handlebars/printer-glimmer.js

@@ -216,13 +216,17 @@ function print(path, options, print) {
         }
       }
 
-      let leadingSpace = "";
-      let trailingSpace = "";
-
-      // preserve a space inside of an attribute node where whitespace present,
-      // when next to mustache statement.
       const inAttrNode = path.stack.includes("attributes");
       if (inAttrNode) {
+        // TODO: format style and srcset attributes
+        // and cleanup concat that is not necessary
+        if (!isInAttributeOfName(path, "class")) {
+          return concat([n.chars]);
+        }
+
+        let leadingSpace = "";
+        let trailingSpace = "";
+
         if (isParentOfSomeType(path, ["ConcatStatement"])) {
           if (isPreviousNodeOfSomeType(path, ["MustacheStatement"])) {
             leadingSpace = " ";
@@ -231,30 +235,42 @@ function print(path, options, print) {
             trailingSpace = " ";
           }
         }
-      } else {
-        if (
-          trailingLineBreaksCount === 0 &&
-          isNextNodeOfSomeType(path, ["MustacheStatement"])
-        ) {
-          trailingSpace = " ";
-        }
 
-        if (
-          leadingLineBreaksCount === 0 &&
-          isPreviousNodeOfSomeType(path, ["MustacheStatement"])
-        ) {
-          leadingSpace = " ";
-        }
+        return concat([
+          ...generateHardlines(leadingLineBreaksCount, maxLineBreaksToPreserve),
+          n.chars.replace(/^\s+/g, leadingSpace).replace(/\s+$/, trailingSpace),
+          ...generateHardlines(
+            trailingLineBreaksCount,
+            maxLineBreaksToPreserve
+          ),
+        ]);
+      }
 
-        if (isFirstElement) {
-          leadingLineBreaksCount = 0;
-          leadingSpace = "";
-        }
+      let leadingSpace = "";
+      let trailingSpace = "";
 
-        if (isLastElement) {
-          trailingLineBreaksCount = 0;
-          trailingSpace = "";
-        }
+      if (
+        trailingLineBreaksCount === 0 &&
+        isNextNodeOfSomeType(path, ["MustacheStatement"])
+      ) {
+        trailingSpace = " ";
+      }
+
+      if (
+        leadingLineBreaksCount === 0 &&
+        isPreviousNodeOfSomeType(path, ["MustacheStatement"])
+      ) {
+        leadingSpace = " ";
+      }
+
+      if (isFirstElement) {
+        leadingLineBreaksCount = 0;
+        leadingSpace = "";
+      }
+
+      if (isLastElement) {
+        trailingLineBreaksCount = 0;
+        trailingSpace = "";
       }
 
       let text = n.chars;
@@ -502,6 +518,15 @@ function printInverse(path, print) {
 
 /* TextNode print helpers */
 
+function isInAttributeOfName(path, type) {
+  return (
+    (isParentOfSomeType(path, ["AttrNode"]) &&
+      path.getParentNode().name.toLowerCase() === type) ||
+    (isParentOfSomeType(path, ["ConcatStatement"]) &&
+      path.getParentNode(1).name.toLowerCase() === type)
+  );
+}
+
 function countNewLines(string) {
   /* istanbul ignore next */
   string = typeof string === "string" ? string : "";

tests/handlebars/attr-node/__snapshots__/jsfmt.spec.js.snap

@@ -1,5 +1,160 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`attribute.hbs - {"singleQuote":true} format 1`] = `
+====================================options=====================================
+parsers: ["glimmer"]
+printWidth: 80
+singleQuote: true
+                                                                                | printWidth
+=====================================input======================================
+<div title='
+
+  a title with random
+
+
+  newlines'></div>
+
+<div TITLE='
+
+  a title with random
+
+
+  newlines'></div>
+
+<div title='
+
+  a title with random
+
+
+  newlines
+  and {{mustaches}}
+
+'></div>
+
+<div TITLE='
+
+  a title with random
+
+
+  newlines
+  and {{mustaches}}
+
+'></div>
+
+=====================================output=====================================
+<div title='
+
+  a title with random
+
+
+  newlines'></div>
+
+<div TITLE='
+
+  a title with random
+
+
+  newlines'></div>
+
+<div title='
+
+  a title with random
+
+
+  newlines
+  and {{mustaches}}
+
+'></div>
+
+<div TITLE='
+
+  a title with random
+
+
+  newlines
+  and {{mustaches}}
+
+'></div>
+================================================================================
+`;
+
+exports[`attribute.hbs format 1`] = `
+====================================options=====================================
+parsers: ["glimmer"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<div title='
+
+  a title with random
+
+
+  newlines'></div>
+
+<div TITLE='
+
+  a title with random
+
+
+  newlines'></div>
+
+<div title='
+
+  a title with random
+
+
+  newlines
+  and {{mustaches}}
+
+'></div>
+
+<div TITLE='
+
+  a title with random
+
+
+  newlines
+  and {{mustaches}}
+
+'></div>
+
+=====================================output=====================================
+<div title="
+
+  a title with random
+
+
+  newlines"></div>
+
+<div TITLE="
+
+  a title with random
+
+
+  newlines"></div>
+
+<div title="
+
+  a title with random
+
+
+  newlines
+  and {{mustaches}}
+
+"></div>
+
+<div TITLE="
+
+  a title with random
+
+
+  newlines
+  and {{mustaches}}
+
+"></div>
+================================================================================
+`;
+
 exports[`brackets.hbs - {"singleQuote":true} format 1`] = `
 ====================================options=====================================
 parsers: ["glimmer"]
@@ -38,3 +193,138 @@ printWidth: 80
 <div title="My other 'title'"></div>
 ================================================================================
 `;
+
+exports[`class-name.hbs - {"singleQuote":true} format 1`] = `
+====================================options=====================================
+parsers: ["glimmer"]
+printWidth: 80
+singleQuote: true
+                                                                                | printWidth
+=====================================input======================================
+<div class='class and other'></div>
+<div class=' class and other '></div>
+<div CLASs=' class and other '></div>
+<p class=" a list of
+
+
+weirdly formatted
+
+
+classes">String</p>
+<p class=" a list of
+
+
+weirdly formatted
+
+
+{{this.classes}}">String</p>
+<p CLASS=" a list of
+
+
+weirdly formatted
+
+
+{{this.classes}}">String</p>
+
+=====================================output=====================================
+<div class='class and other'></div>
+<div class='class and other'></div>
+<div CLASs='class and other'></div>
+<p class='a list of
+
+
+weirdly formatted
+
+
+classes'>
+  String
+</p>
+<p
+  class='a list of
+
+
+weirdly formatted
+
+  {{this.classes}}'
+>
+  String
+</p>
+<p
+  CLASS='a list of
+
+
+weirdly formatted
+
+  {{this.classes}}'
+>
+  String
+</p>
+================================================================================
+`;
+
+exports[`class-name.hbs format 1`] = `
+====================================options=====================================
+parsers: ["glimmer"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<div class='class and other'></div>
+<div class=' class and other '></div>
+<div CLASs=' class and other '></div>
+<p class=" a list of
+
+
+weirdly formatted
+
+
+classes">String</p>
+<p class=" a list of
+
+
+weirdly formatted
+
+
+{{this.classes}}">String</p>
+<p CLASS=" a list of
+
+
+weirdly formatted
+
+
+{{this.classes}}">String</p>
+
+=====================================output=====================================
+<div class="class and other"></div>
+<div class="class and other"></div>
+<div CLASs="class and other"></div>
+<p class="a list of
+
+
+weirdly formatted
+
+
+classes">
+  String
+</p>
+<p
+  class="a list of
+
+
+weirdly formatted
+
+  {{this.classes}}"
+>
+  String
+</p>
+<p
+  CLASS="a list of
+
+
+weirdly formatted
+
+  {{this.classes}}"
+>
+  String
+</p>
+================================================================================
+`;

tests/handlebars/attr-node/attribute.hbs

@@ -0,0 +1,33 @@
+<div title='
+
+  a title with random
+
+
+  newlines'></div>
+
+<div TITLE='
+
+  a title with random
+
+
+  newlines'></div>
+
+<div title='
+
+  a title with random
+
+
+  newlines
+  and {{mustaches}}
+
+'></div>
+
+<div TITLE='
+
+  a title with random
+
+
+  newlines
+  and {{mustaches}}
+
+'></div>

tests/handlebars/attr-node/class-name.hbs

@@ -0,0 +1,24 @@
+<div class='class and other'></div>
+<div class=' class and other '></div>
+<div CLASs=' class and other '></div>
+<p class=" a list of
+
+
+weirdly formatted
+
+
+classes">String</p>
+<p class=" a list of
+
+
+weirdly formatted
+
+
+{{this.classes}}">String</p>
+<p CLASS=" a list of
+
+
+weirdly formatted
+
+
+{{this.classes}}">String</p>