Do not delete line breaks and indentation of lines in class attribute (…

…#369)

Co-authored-by: Erika <3019731+Princesseuh@users.noreply.github.com>

.changeset/six-lobsters-jog.md

@@ -0,0 +1,5 @@
+---
+"prettier-plugin-astro": minor
+---
+
+Do not delete line breaks and indentation of lines in class attribute

src/printer/utils.ts

@@ -198,7 +198,12 @@ export function trimTextNodeRight(node: TextNode): void {
 }
 
 export function printClassNames(value: string) {
-	return value.trim().split(/\s+/).join(' ');
+	const lines = value.trim().split(/[\r\n]+/);
+	const formattedLines = lines.map((line) => {
+		const spaces = line.match(/^\s+/);
+		return (spaces ? spaces[0] : '') + line.trim().split(/\s+/).join(' ');
+	});
+	return formattedLines.join('\n');
 }
 
 /** dedent string & return tabSize (the last part is what we need) */

test/fixtures/basic/html-class-attribute-with-line-breaks/input.astro

@@ -0,0 +1,3 @@
+<div class="  sm:p-0   p-0 
+		m-2  sm:m-1  
+		border "></div>

test/fixtures/basic/html-class-attribute-with-line-breaks/output.astro

@@ -0,0 +1,3 @@
+<div class="sm:p-0 p-0
+		m-2 sm:m-1
+		border"></div>

test/tests/basic.test.ts

@@ -17,6 +17,12 @@ test('Can format HTML custom elements', files, 'basic/html-custom-elements');
 
 test('Can properly format the class attribute', files, 'basic/html-class-attribute');
 
+test(
+	'Can properly format the class attribute with line breaks',
+	files,
+	'basic/html-class-attribute-with-line-breaks'
+);
+
 test('Can format long self-closing tags with multiple attributes', files, 'basic/self-closing');
 
 test('Can properly format inline tags and respect whitespace', files, 'basic/inline-whitespace');