Fix corrupt attribute values on dynamically bound Vue props without q…

…uotes (#252)

Co-authored-by: Shinigami92 <[email protected]>

src/printer.ts

@@ -573,13 +573,16 @@ export class PugPrinter {
 		{ trimTrailingSemicolon = false }: FormatDelegatePrettierOptions = {}
 	): string {
 		val = val.trim();
-		val = val.slice(1, -1); // Remove quotes
+		const wasQuoted: boolean = isQuoted(val);
+		if (wasQuoted) {
+			val = val.slice(1, -1); // Remove quotes
+		}
 		val = format(val, { parser, ...this.codeInterpolationOptions });
 		val = unwrapLineFeeds(val);
 		if (trimTrailingSemicolon && val[val.length - 1] === ';') {
 			val = val.slice(0, -1);
 		}
-		return this.quoteString(val);
+		return wasQuoted ? this.quoteString(val) : val;
 	}
 
 	private formatStyleAttribute(val: string): string {

src/utils/common.ts

@@ -165,7 +165,7 @@ export function isWrappedWith(val: string, start: string, end: string, offset: n
  * @returns Whether the value is quoted or not.
  */
 export function isQuoted(val: string): boolean {
-	if (/^(["'])(.*)\1$/.test(val)) {
+	if (/^(["'`])(.*)\1$/.test(val)) {
 		// Regex for checking if there are any unescaped quotations.
 		const regex: RegExp = new RegExp(`${val[0]}(?<!\\\\${val[0]})`);
 		return !regex.test(val.slice(1, -1));

tests/issues/issue-250/formatted.pug

@@ -0,0 +1,9 @@
+- const circleSize = 72;
+- const circleWidth = 7;
+div
+  v-progress-circular(
+    :color="getProgressColor(currentCapacity)",
+    :size=circleSize,
+    :value="capacityPercentage",
+    :width=circleWidth
+  ) {{ currentCapacity }}/{{ maxCapacity }}

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

@@ -0,0 +1,14 @@
+import { readFileSync } from 'fs';
+import { resolve } from 'path';
+import { format } from 'prettier';
+import { plugin } from './../../../src/index';
+
+describe('Issues', () => {
+	test('should not quote pug variables assigned to Vue props', () => {
+		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] });
+
+		expect(actual).toBe(expected);
+	});
+});

tests/issues/issue-250/unformatted.pug

@@ -0,0 +1,9 @@
+- const circleSize = 72;
+- const circleWidth = 7;
+div
+  v-progress-circular(
+    :color="getProgressColor(currentCapacity)",
+    :size=circleSize,
+    :value='capacityPercentage',
+    :width=circleWidth,
+  ) {{ currentCapacity }}/{{ maxCapacity }}

tests/issues/issue-61/formatted.pug

@@ -11,3 +11,8 @@ div
           a(
             [href]='Nav.currentProject().repo(getRepository(pipeline).slug).buildNoContext()'
           )
+          - const interpolation = "code"
+          //- Vue
+          a(:href=`interpolated-${interpolation}`)
+          //- Angular
+          a([href]=`interpolated-${interpolation}`)

tests/issues/issue-61/unformatted.pug

@@ -7,3 +7,8 @@ div
           a(:href=`Nav.currentProject().repo(getRepository(pipeline).slug).buildNoContext()`)
           //- Angular
           a([href]=`Nav.currentProject().repo(getRepository(pipeline).slug).buildNoContext()`)
+          - const interpolation = 'code'
+          //- Vue
+          a(:href=`interpolated-${interpolation}`)
+          //- Angular
+          a([href]=`interpolated-${interpolation}`)

tests/issues/issue-80/formatted.pug

@@ -17,3 +17,8 @@ div
   span.aui-lozenge(
     :class='[isActive ? "some-class-name" : "some-other-class-name"]'
   )
+
+  - const interpolation = "some-class-name"
+  span.aui-lozenge(
+    :class=`[ isActive ? ${interpolation} : "some-other-class-name" ]`
+  )

tests/issues/issue-80/unformatted.pug

@@ -17,3 +17,8 @@ div
   span.aui-lozenge(
     :class='[ isActive ? "some-class-name" : "some-other-class-name" ]'
   )
+
+  - const interpolation = "some-class-name"
+  span.aui-lozenge(
+    :class=`[ isActive ? ${interpolation} : "some-other-class-name" ]`
+  )