Fix class handling

prettier · Feb 11, 2020 · 7bbc423 · 7bbc423
1 parent 4ae5b2f
commit 7bbc423
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 3 deletions.
diff --git a/src/printer.ts b/src/printer.ts
@@ -278,20 +278,25 @@ export class PugPrinter {
 					val = val.replace(/\s\s+/g, ' ');
 					const classes: string[] = val.split(' ');
 					const specialClasses: string[] = [];
+					const normalClasses: string[] = [];
 					const validClassNameRegex: RegExp = /^-?[_a-zA-Z]+[_a-zA-Z0-9-]*$/;
 					for (const className of classes) {
 						if (!validClassNameRegex.test(className)) {
 							specialClasses.push(className);
-							continue;
+						} else {
+							normalClasses.push(className);
 						}
+					}
+					if (normalClasses.length > 0) {
 						// Write css-class in front of attributes
 						const position: number = this.possibleClassPosition;
 						this.result = [
 							this.result.slice(0, position),
-							`.${className}`,
+							'.',
+							normalClasses.join('.'),
 							this.result.slice(position)
 						].join('');
-						this.possibleClassPosition += 1 + className.length;
+						this.possibleClassPosition += 1 + normalClasses.join('.').length;
 						this.result = this.result.replace(/div\./, '.');
 					}
 					if (specialClasses.length > 0) {

diff --git a/test/attributes/class-attributes/formatted.pug b/test/attributes/class-attributes/formatted.pug
@@ -24,3 +24,7 @@ a.class(href="index.html") Text
 .class Text
 #id Text
 .class Text
+.bg-red-100.border-l-4.border-red-600.text-red-700.p-4.mb-4
+.bg-red-100.border-l-4.border-red-600.text-red-700.p-4.mb-4(
+  data-other="other"
+)
diff --git a/test/attributes/class-attributes/unformatted.pug b/test/attributes/class-attributes/unformatted.pug
@@ -24,3 +24,5 @@ div(id="id") Text
 div(class="class") Text
 #id Text
 .class Text
+div(class="bg-red-100 border-l-4 border-red-600 text-red-700 p-4 mb-4")
+div(class="bg-red-100 border-l-4 border-red-600 text-red-700 p-4 mb-4", data-other="other")