Bug: mixin formating breaks

[Profesor08]

When formating, mixins arguments breaks. This is related to this issue #66. But it can be fixed without waiting for dead pugjs update. My suggestion is to ignore any of formating rules for mixins. It is not a big deal to format js code manually, I do this all time and it is not too much code. In exchange we will get all other formating rules. Better to not have some feature then to tave it broken.

Suggestion

There is patched version: plugin-pug-formatting-patched.zip

plugin-pug/src/printer.ts

Lines 2186 to 2207 in 33c8634

	private async call(token: CallToken): Promise<string> {
	let result: string = `${this.computedIndent}+${token.val}`;
	let args: string | null = token.args;
	if (args) {
	args = args.trim().replaceAll(/\s\s+/g, ' ');
	// Place an x at the beginning to preserve brackets,
	// then remove the x after format.
	args = await format(`x(${args})`, {
	parser: 'babel',
	...this.codeInterpolationOptions,
	semi: false,
	});
	args = args.trim().slice(1);
	result += args;
	}
	this.currentLineLength += result.length;
	this.possibleIdPosition = this.result.length + result.length;
	this.possibleClassPosition = this.result.length + result.length;
	return result;
	}

private async call(token: CallToken): Promise<string> {
 let result: string = `${this.computedIndent}+${token.val}`;
 let args: string | null = token.args;
- if (args) {
- args = args.trim().replaceAll(/\s\s+/g, ' ');
- // Place an x at the beginning to preserve brackets,
- // then remove the x after format.
- args = await format(`x(${args})`, {
- parser: 'babel',
- ...this.codeInterpolationOptions,
- semi: false,
- });
- args = args.trim().slice(1);
- result += args;
- }
+ result += `(${args})`;
+ 
 this.currentLineLength += result.length;
 this.possibleIdPosition = this.result.length + result.length;
 this.possibleClassPosition = this.result.length + result.length;
 return result;
 }

Info

Tool	Version
Plugin	^3.4.2
Prettier	^3.6.2
Framework	none
Node	v22.14.0
OS	win

Prettier config

{
 "plugins": ["@prettier/plugin-pug"],
 "pugAttributeSeparator": "none",
 "pugCommentPreserveSpaces": "trim-all",
 "pugSortAttributes": "as-is",
 "pugWrapAttributesPattern": "",
 "pugWrapAttributesThreshold": -1,
 "pugFramework": "auto",
 "pugEmptyAttributes": "none",
 "pugEmptyAttributesForceQuotes": [],
 "pugClassNotation": "literal",
 "pugIdNotation": "literal",
 "pugClassLocation": "before-attributes",
 "pugExplicitDiv": false,
 "pugPreserveAttributeBrackets": false,
 "pugPreserveWhitespace": false,
 "pugClosingBracketIndentDepth": 0,
 "pugBracketSpacing": true,
 "pugBracketSameLine": false,
 "pugPrintWidth": 100,
 "pugSemi": true,
 "pugSingleQuote": false,
 "pugTabWidth": 2,
 "pugUseTabs": false,
 "pugArrowParens": "always"
}

Input

.test
 +btn({ color: "red" })

 +btn({
 color: "red",
 color1: "red",
 color2: [
 {
 color3: "red",
 },
 {
 color4: "red",
 },
 ],
 color5: "red",
 color6: "red",
 color7: "red",
 color8: "red",
 color9: "red",
 color10: "red",
 color11: "red",
 color12: "red",
 })

 .test
 .test
 +tools-group({
 icon: "/static/tool.svg",
 label: "tool",
 title: "Tool title",
 tools: [
 {
 icon: "/static/tool-item-1.svg",
 title: "Tool item title",
 },
 {
 icon: "/static/tool-item-2.svg",
 title: "Tool item title",
 },
 {
 icon: "/static/tool-item-3.svg",
 title: "Tool item title",
 },
 {
 icon: "/static/tool-item-4.svg",
 title: "Tool item title",
 },
 ],
 })

Output or Error

.test
 +btn({ color: "red" })

 +btn({ color: "red", color1: "red", color2: [{ color3: "red" }, { color4: "red" }], color5: "red", color6: "red", color7: "red", color8: "red", color9: "red", color10: "red", color11: "red", color12: "red" })

 .test
 .test
 +tools-group({
 icon: "/static/tool.svg",
 label: "tool",
 title: "Tool title",
 tools: [
 { icon: "/static/tool-item-1.svg", title: "Tool item title" },
 { icon: "/static/tool-item-2.svg", title: "Tool item title" },
 { icon: "/static/tool-item-3.svg", title: "Tool item title" },
 { icon: "/static/tool-item-4.svg", title: "Tool item title" },
 ],
})

Expected Output

.test
 +btn({ color: "red" })

 +btn({
 color: "red",
 color1: "red",
 color2: [
 {
 color3: "red",
 },
 {
 color4: "red",
 },
 ],
 color5: "red",
 color6: "red",
 color7: "red",
 color8: "red",
 color9: "red",
 color10: "red",
 color11: "red",
 color12: "red",
 })

 .test
 .test
 +tools-group({
 icon: "/static/tool.svg",
 label: "tool",
 title: "Tool title",
 tools: [
 {
 icon: "/static/tool-item-1.svg",
 title: "Tool item title",
 },
 {
 icon: "/static/tool-item-2.svg",
 title: "Tool item title",
 },
 {
 icon: "/static/tool-item-3.svg",
 title: "Tool item title",
 },
 {
 icon: "/static/tool-item-4.svg",
 title: "Tool item title",
 },
 ],
 })

Reproduction

plugin-pug-formatting.zip

1. unzip
2. npm install
3. open text.pug
4. format document