(feat) trim whitespace in class attributes (#356)

fixes #339
sveltejs · Mar 22, 2023 · a94563c · a94563c
1 parent 7abac5f
commit a94563c
Show file tree

Hide file tree

Showing 5 changed files with 84 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,7 @@
 
 -   (feat) support `requirePragma` and `insertPragma` options ([#350](https://github.com/sveltejs/prettier-plugin-svelte/issues/350))
 -   (feat) support `<svelte:document>`
+-   (feat) trim whitespace in `class` attributes ([#339](https://github.com/sveltejs/prettier-plugin-svelte/issues/339))
 
 ## 2.9.0
 

diff --git a/src/print/index.ts b/src/print/index.ts
@@ -180,10 +180,38 @@ export function print(path: FastPath, options: ParserOptions, print: PrintFn): D
                  */
                 return fill(splitTextToDocs(node));
             } else {
-                const rawText = getUnencodedText(node);
-                if (path.getParentNode().type === 'Attribute') {
+                let rawText = getUnencodedText(node);
+                const parent = path.getParentNode();
+                if (parent.type === 'Attribute') {
                     // Direct child of attribute value -> add literallines at end of lines
                     // so that other things don't break in unexpected places
+                    if (parent.name === 'class' && path.getParentNode(1).type === 'Element') {
+                        // Special treatment for class attribute on html elements. Prettier
+                        // will force everything into one line, we deviate from that and preserve lines.
+                        rawText = rawText.replace(
+                            /([^ \t\n])(([ \t]+$)|([ \t]+(\r?\n))|[ \t]+)/g,
+                            // Remove trailing whitespace in lines with non-whitespace characters
+                            // except at the end of the string
+                            (
+                                match,
+                                characterBeforeWhitespace,
+                                _,
+                                isEndOfString,
+                                isEndOfLine,
+                                endOfLine,
+                            ) =>
+                                isEndOfString
+                                    ? match
+                                    : characterBeforeWhitespace + (isEndOfLine ? endOfLine : ' '),
+                        );
+                        // Shrink trailing whitespace in case it's followed by a mustache tag
+                        // and remove it completely if it's at the end of the string, but not
+                        // if it's on its own line
+                        rawText = rawText.replace(
+                            /([^ \t\n])[ \t]+$/,
+                            parent.value.indexOf(node) === parent.value.length - 1 ? '$1' : '$1 ',
+                        );
+                    }
                     return concat(replaceEndOfLineWith(rawText, literalline));
                 }
                 return rawText;

diff --git a/test/formatting/samples/attribute-with-linebreaks/output.html b/test/formatting/samples/attribute-with-linebreaks/output.html
@@ -1,5 +1,5 @@
 <div
-    class=" {longExpressionThatForcesLinebreaks} longExpressionThatForcesLinebreaks longExpressionThatForcesLinebreaks  "
+    class=" {longExpressionThatForcesLinebreaks} longExpressionThatForcesLinebreaks longExpressionThatForcesLinebreaks"
     alt="When reformatting class attributes it is fine to trim and add new line breaks. 
 That's not the case with other attributes. "
     data-value={array.map((item) => {

diff --git a/test/formatting/samples/attributes-class/input.html b/test/formatting/samples/attributes-class/input.html
@@ -0,0 +1,26 @@
+<button
+    class="bg-green-500 text-gray-100 hover:bg-green-400 flex items-center px-4 py-2 border border-l-0        rounded-r "
+>
+    Copy
+</button>
+<div
+    class="bg-green-500 text-gray-100 hover:bg-green-400       flex items-center px-4 py-2 border border-l-0 rounded-r"
+>
+    Copy
+</div>
+<span
+    class="bg-green-500 text-gray-100 hover:bg-green-400 flex 
+    
+    items-center px-4 py-2 border border-l-0 rounded-r "
+>
+    Copy
+</span>
+<p
+    class="bg-green-500 
+    text-gray-100 hover:bg-green-400 flex items-center px-4 py-2 border border-l-0 rounded-r 
+    "
+>
+    Copy
+</p>
+
+<P class="leave me   alone   because I'm a prop  " />
diff --git a/test/formatting/samples/attributes-class/output.html b/test/formatting/samples/attributes-class/output.html
@@ -0,0 +1,26 @@
+<button
+    class="bg-green-500 text-gray-100 hover:bg-green-400 flex items-center px-4 py-2 border border-l-0 rounded-r"
+>
+    Copy
+</button>
+<div
+    class="bg-green-500 text-gray-100 hover:bg-green-400 flex items-center px-4 py-2 border border-l-0 rounded-r"
+>
+    Copy
+</div>
+<span
+    class="bg-green-500 text-gray-100 hover:bg-green-400 flex
+    
+    items-center px-4 py-2 border border-l-0 rounded-r"
+>
+    Copy
+</span>
+<p
+    class="bg-green-500
+    text-gray-100 hover:bg-green-400 flex items-center px-4 py-2 border border-l-0 rounded-r
+    "
+>
+    Copy
+</p>
+
+<P class="leave me   alone   because I'm a prop  " />