Allow "none" as an option for attributeSeparator

README.md

@@ -154,6 +154,9 @@ They should be set via `Prettier`'s `overrides` option
     Example: `button(type="submit", (click)="play()", disabled)`
   - `'as-needed'` -> Only add commas between attributes where required.  
     Example: `button(type="submit", (click)="play()" disabled)`
+  - `'none'` -> Never add commas between attributes.  
+    Example: `button(type="submit" @click="play()" :style="style" disabled)`
+    Please note that while this option will process Angular syntax (e.g. `(click)="play()"`), the resulting pug file will throw a syntax error when parsed: `Syntax Error: Assigning to rvalue`
 
 - `closingBracketPosition`  
   Position of closing bracket of attributes.

src/options/attribute-separator.ts

@@ -16,6 +16,11 @@ export const ATTRIBUTE_SEPARATOR_OPTION = {
 			value: 'as-needed',
 			description:
 				'Only add commas between attributes where required. Example: `button(type="submit", (click)="play()" disabled)`'
+		},
+		{
+			value: 'none',
+			description:
+				'Never add commas between attributes. Example: `button(type="submit" @click="play()" :style="style" disabled)`'
 		}
 	]
 };
@@ -38,20 +43,25 @@ export const PUG_ATTRIBUTE_SEPARATOR_OPTION = {
 			value: 'as-needed',
 			description:
 				'Only add commas between attributes where required. Example: `button(type="submit", (click)="play()" disabled)`'
+		},
+		{
+			value: 'none',
+			description:
+				'Never add commas between attributes. Example: `button(type="submit" @click="play()" :style="style" disabled)`'
 		}
 	]
 };
 
-export type AttributeSeparator = 'always' | 'as-needed';
+export type AttributeSeparator = 'always' | 'as-needed' | 'none';
 
-export function resolveAttributeSeparatorOption(attributeSeparator: AttributeSeparator): boolean {
+export function resolveAttributeSeparatorOption(attributeSeparator: AttributeSeparator): AttributeSeparator {
 	switch (attributeSeparator) {
 		case 'always':
-			return true;
 		case 'as-needed':
-			return false;
+		case 'none':
+			return attributeSeparator;
 	}
 	throw new Error(
-		`Invalid option for pug attributeSeparator. Found '${attributeSeparator}'. Possible options: 'always' or 'as-needed'`
+		`Invalid option for pug attributeSeparator. Found '${attributeSeparator}'. Possible options: 'always', 'as-needed' or 'none'`
 	);
 }

src/printer.ts

@@ -106,6 +106,7 @@ export class PugPrinter {
 	private readonly otherQuotes: "'" | '"';
 
 	private readonly alwaysUseAttributeSeparator: boolean;
+	private readonly neverUseAttributeSeparator: boolean;
 	private readonly closingBracketRemainsAtNewLine: boolean;
 	/* eslint-disable @typescript-eslint/indent */
 	private readonly codeInterpolationOptions: Pick<
@@ -127,7 +128,9 @@ export class PugPrinter {
 		this.indentString = options.pugUseTabs ? '\t' : ' '.repeat(options.pugTabWidth);
 		this.quotes = this.options.pugSingleQuote ? "'" : '"';
 		this.otherQuotes = this.options.pugSingleQuote ? '"' : "'";
-		this.alwaysUseAttributeSeparator = resolveAttributeSeparatorOption(options.attributeSeparator);
+		const attributeSeparator = resolveAttributeSeparatorOption(options.attributeSeparator);
+		this.alwaysUseAttributeSeparator = attributeSeparator === 'always';
+		this.neverUseAttributeSeparator = attributeSeparator === 'none';
 		this.closingBracketRemainsAtNewLine = resolveClosingBracketPositionOption(options.closingBracketPosition);
 		const codeSingleQuote = !options.pugSingleQuote;
 		this.codeInterpolationOptions = {
@@ -535,7 +538,7 @@ export class PugPrinter {
 			this.currentIndex
 		);
 		if (this.previousToken?.type === 'attribute' && (!this.previousAttributeRemapped || hasNormalPreviousToken)) {
-			if (this.alwaysUseAttributeSeparator || /^(\(|\[|:).*/.test(token.name)) {
+			if (!this.neverUseAttributeSeparator && (this.alwaysUseAttributeSeparator || /^(\(|\[|:).*/.test(token.name))) {
 				this.result += ',';
 			}
 			if (!this.wrapAttributes) {

tests/options/attributeSeparator/none/angular-formatted.pug

@@ -0,0 +1 @@
+button(type="submit" (click)="play()" disabled)

tests/options/attributeSeparator/none/angular-unformatted.pug

@@ -0,0 +1 @@
+button(type="submit", (click)="play()", disabled)

tests/options/attributeSeparator/none/formatted.pug

@@ -0,0 +1,14 @@
+button(type="submit" :style="style" @click="play()" disabled)
+
+nav-component(locale-relative-redirect="true" highlight="home" pin="false")
+
+.wrapper(
+  data-nav
+  data-next="Next"
+  data-prev="Prev"
+  data-slides=4
+  data-arr=[1, 2, 3, 4, 5, 6]
+  data-obj={ att: 1, attr2: 2 }
+  :style="style"
+  @click="play()"
+)

tests/options/attributeSeparator/none/none.test.ts

@@ -0,0 +1,36 @@
+import { readFileSync } from 'fs';
+import { resolve } from 'path';
+import { format } from 'prettier';
+import { plugin, parsers } from './../../../../src/index';
+
+describe('Options', () => {
+	describe('attributeSeparator', () => {
+		test('should never insert commas between attributes', () => {
+			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' as any,
+				plugins: [plugin],
+				// @ts-expect-error
+				attributeSeparator: 'none'
+			});
+
+			expect(actual).toBe(expected);
+		});
+		test('should work with \'none\' option and angular syntax, but produce invalid output', () => {
+			const expected: string = readFileSync(resolve(__dirname, 'angular-formatted.pug'), 'utf8');
+			const code: string = readFileSync(resolve(__dirname, 'angular-unformatted.pug'), 'utf8');
+			const actual: string = format(code, {
+				parser: 'pug' as any,
+				plugins: [plugin],
+				// @ts-expect-error
+				attributeSeparator: 'none'
+			});
+			expect(actual).toBe(expected);
+			expect(() => {
+				/* eslint @typescript-eslint/no-non-null-assertion: off */
+				parsers!.pug.parse(actual, parsers!, null!);
+			}).toThrow('Assigning to rvalue');
+		});
+	});
+});

tests/options/attributeSeparator/none/unformatted.pug

@@ -0,0 +1,5 @@
+button(type="submit", :style="style", @click="play()", disabled)
+
+nav-component(locale-relative-redirect="true", highlight="home", pin="false")
+
+.wrapper(data-nav=true data-next="Next" data-prev="Prev" data-slides=4 data-arr=[1,2,3,4,5,6] data-obj={att: 1, attr2: 2} :style="style" @click="play()")