Fix instable pugClassNotation with printWidth (#318)

Author: shadowgate15

src/printer.ts

@@ -769,7 +769,21 @@ export class PugPrinter {
 				// Add leading and trailing parentheses
 				this.currentLineLength += 2;
 			}
-			logger.debug(this.currentLineLength);
+			if (this.options.pugClassLocation === 'after-attributes') {
+				let tempClassIndex: number = tempIndex;
+				let tempClassToken: EndAttributesToken | ClassToken = this.tokens[++tempClassIndex] as
+					| EndAttributesToken
+					| ClassToken;
+				while (tempClassToken.type === 'class') {
+					const val: string = tempClassToken.val.toString();
+					// Add leading . for classes
+					this.currentLineLength += 1 + val.length;
+					logger.debug({ tokenVal: val, length: val.length }, this.currentLineLength);
+
+					tempClassToken = this.tokens[++tempClassIndex] as EndAttributesToken | ClassToken;
+				}
+			}
+			logger.debug('final line length', { currentLineLength: this.currentLineLength });
 			if (
 				!this.currentlyInPugInterpolation &&
 				!this.wrapAttributes &&
@@ -1020,6 +1034,8 @@ export class PugPrinter {
 				this.classLiteralAfterAttributes.length
 			);
 			this.result += `.${classes.join('.')}`;
+		}
+		if (this.options.pugClassLocation === 'after-attributes') {
 			this.possibleClassPosition = this.result.length;
 		}
 		if (this.nextToken?.type === 'text' || this.nextToken?.type === 'path') {
@@ -1069,9 +1085,7 @@ export class PugPrinter {
 			}
 		} else {
 			const val: string = `.${token.val}`;
-			if (this.options.pugClassLocation === 'before-attributes') {
-				this.currentLineLength += val.length;
-			}
+			this.currentLineLength += val.length;
 			logger.debug(
 				'before class',
 				{ result: this.result, val, length: val.length, previousToken: this.previousToken },
@@ -1107,19 +1121,6 @@ export class PugPrinter {
 				default: {
 					if (this.options.pugClassLocation === 'after-attributes') {
 						this.classLiteralAfterAttributes.push(val.slice(1));
-						logger.debug('class default', {
-							classLiteralAfterAttributes: this.classLiteralAfterAttributes
-						});
-						let result: string = this.result.slice(0, this.possibleClassPosition);
-						if (['text', 'newline', 'indent', 'eos', 'code', undefined].includes(this.nextToken?.type)) {
-							const classes: string[] = this.classLiteralAfterAttributes.splice(
-								0,
-								this.classLiteralAfterAttributes.length
-							);
-							result += '.' + classes.join('.');
-						}
-						this.result = [result, this.result.slice(this.possibleClassPosition)].join('');
-						this.possibleClassPosition = this.result.length;
 					} else {
 						const prefix: string = this.result.slice(0, this.possibleClassPosition);
 						this.result = [prefix, val, this.result.slice(this.possibleClassPosition)].join('');
@@ -1128,6 +1129,19 @@ export class PugPrinter {
 					break;
 				}
 			}
+			if (this.options.pugClassLocation === 'after-attributes' && this.classLiteralAfterAttributes.length > 0) {
+				let result: string = this.result.slice(0, this.possibleClassPosition);
+				if (['text', 'newline', 'indent', 'outdent', 'eos', 'code', undefined].includes(this.nextToken?.type)) {
+					const classes: string[] = this.classLiteralAfterAttributes.splice(
+						0,
+						this.classLiteralAfterAttributes.length
+					);
+					result += '.' + classes.join('.');
+				}
+				this.result = [result, this.result.slice(this.possibleClassPosition)].join('');
+				this.possibleClassPosition = this.result.length;
+				this.replaceTagWithLiteralIfPossible(/div\./, '.');
+			}
 			logger.debug('after class', { result: this.result, val, length: val.length }, this.currentLineLength);
 			if (this.nextToken?.type === 'text') {
 				this.currentLineLength += 1;

tests/issues/issue-317/formatted.pug

@@ -0,0 +1,22 @@
+v-row(no-gutters)
+  v-col(cols="12")
+    div(v-t="'global.copy-variables-title'").text-body-2.font-weight-medium
+  v-col(cols="12")
+    a(
+      v-for="variable in variables",
+      :key="variable",
+      v-text="`$\\{${variable}}`",
+      @click="copyToClipboard(variable)"
+    ).text-body-2.d-inline.mr-4
+      div(
+        v-t="'entity-management.entity-group.crud.entity-types-txt'"
+      ).text-body-2.text--secondary.mb-2.mt-4.class--1519
+
+div(
+  v-t="'type.place.property'"
+).class-1.class-2.class-3.class-4.class-5.class-6.class-7.get-to-121.class-10.class-50.sm
+
+div(role="document").modal-dialog.modal-lg
+  .modal-content
+    .modal-header.text-center.d-block
+      h1#modal-title.h4.modal-title.d-inline-block.ml-4= "test goes here"

tests/issues/issue-317/issue-317.test.ts

@@ -0,0 +1,46 @@
+import { readFileSync } from 'fs';
+import { resolve } from 'path';
+import { format } from 'prettier';
+import { plugin } from './../../../src/index';
+
+describe('Issues', () => {
+	test('should respect printWidth and pugClassLocation with pugSortAttributesEnd', () => {
+		const expected: string = readFileSync(resolve(__dirname, 'formatted.pug'), 'utf8');
+		const code: string = readFileSync(resolve(__dirname, 'unformatted.pug'), 'utf8');
+		const actual: string = format(code, {
+			parser: 'pug',
+			plugins: [plugin],
+
+			printWidth: 120,
+
+			pugSortAttributesEnd: ['^@click'],
+			pugClassLocation: 'after-attributes'
+		});
+
+		expect(actual).toBe(expected);
+	});
+
+	test('should keep same format after two runs with printWidth and pugClassLocation', () => {
+		const expected: string = readFileSync(resolve(__dirname, 'formatted.pug'), 'utf8');
+		const code: string = readFileSync(resolve(__dirname, 'unformatted.pug'), 'utf8');
+		const run1: string = format(code, {
+			parser: 'pug',
+			plugins: [plugin],
+
+			printWidth: 120,
+
+			pugClassLocation: 'after-attributes'
+		});
+
+		const run2: string = format(run1, {
+			parser: 'pug',
+			plugins: [plugin],
+
+			printWidth: 120,
+
+			pugClassLocation: 'after-attributes'
+		});
+
+		expect(run2).toBe(expected);
+	});
+});

tests/issues/issue-317/unformatted.pug

@@ -0,0 +1,20 @@
+v-row(no-gutters)
+  v-col(cols="12")
+    .text-body-2.font-weight-medium(v-t="'global.copy-variables-title'")
+  v-col(cols="12")
+    a.text-body-2.d-inline.mr-4(
+      v-for="variable in variables",
+      :key="variable",
+      v-text="`$\\{${variable}}`",
+      @click="copyToClipboard(variable)"
+    )
+      div(
+        v-t="'entity-management.entity-group.crud.entity-types-txt'"
+      ).text-body-2.text--secondary.mb-2.mt-4.class--1519
+
+div(v-t="'type.place.property'").class-1.class-2.class-3.class-4.class-5.class-6.class-7.get-to-121.class-10.class-50.sm
+
+.modal-dialog.modal-lg(role="document")
+  .modal-content
+    .modal-header.text-center.d-block
+      h1#modal-title.h4.modal-title.d-inline-block.ml-4= 'test goes here'