Format args in call token

src/printer.ts

@@ -94,6 +94,7 @@ import {
   previousNormalAttributeToken,
   previousTagToken,
   previousTypeAttributeToken,
+  splitArguments,
   unwrapLineFeeds,
 } from './utils/common';
 import { getScriptParserName } from './utils/script-mime-types';
@@ -1847,7 +1848,17 @@ export class PugPrinter {
     if (args) {
       args = args.trim();
       args = args.replace(/\s\s+/g, ' ');
-      result += `(${args})`;
+      result += `(${splitArguments(args)
+        .map((arg) => arg.trim())
+        .map((arg) => {
+          if (arg[0] === '{' || arg[0] === '[') {
+            return this.formatDelegatePrettier(arg, '__js_expression');
+          } else if (isQuoted(arg)) {
+            return `${this.otherQuotes}${arg.slice(1, -1)}${this.otherQuotes}`;
+          }
+          return arg;
+        })
+        .join(', ')})`;
     }
     this.currentLineLength += result.length;
     this.possibleIdPosition = this.result.length + result.length;

src/utils/common.ts

@@ -265,6 +265,36 @@ export function makeString(
   return enclosingQuote + newContent + enclosingQuote;
 }
 
+export function splitArguments(args: string): string[] {
+  const results: string[] = [];
+  let current: string = '';
+  const block: { '{': number; '[': number } = { '{': 0, '[': 0 };
+  for (const char of args) {
+    if (char !== ',' || block['{'] > 0 || block['['] > 0) {
+      current += char;
+      switch (char) {
+        case '{':
+          block['{']++;
+          break;
+        case '}':
+          block['{']--;
+          break;
+        case '[':
+          block['[']++;
+          break;
+        case ']':
+          block['[']--;
+          break;
+      }
+    } else {
+      results.push(current);
+      current = '';
+    }
+  }
+  results.push(current);
+  return results;
+}
+
 /**
  * See [issue #9](https://github.com/prettier/plugin-pug/issues/9) for more details.
  *

tests/issues/issue-324/formatted.pug

@@ -0,0 +1,39 @@
+mixin section-intro(content)
+  section.section.section--intro(data-chameleon='black')
+    .wrapper
+      .section__header
+        if content.subhead
+          p.section__subhead.enter.enter--bottom!= content.subhead
+        p.section__heading.enter.enter--bottom.enter--delay-1!= content.heading
+
+      .section__row
+        each column in content.content
+          .section__column
+            .section__content.enter.enter--bottom.enter--delay-2
+              p.section__content-subhead!= column.subhead
+              each paragraph in column.text
+                p.section__content-text!= paragraph
+
+        if content.image
+          img.section__image.enter.enter--bottom.enter--delay-3(
+            src=`/${relativeRoot}assets/images/work/${content.image}`,
+            alt=''
+          )
+
+      if block
+        block
+
++section-intro({
+  subhead: 'Introduction',
+  heading: 'Helping candidates and employers connect through a streamlined platform, all while ensuring no one is left out. ',
+  content: [
+    {
+      subhead: 'The Problem',
+      text: ['Employers are eager to higher a diverse workforce, but struggle to manage the daunting process to access talent that meets their needs. Underrepresented job seekers often go unnoticed or worse, get passed up based on existing market biases. ']
+    },
+    {
+      subhead: 'The Solution',
+      text: ['Create a network that prioritizes inclusivity and transparency by uniting job seekers with employers based on their common strengths.  For employers and admins, use thoughtful automation to encourage autonomy.']
+    }
+  ]
+})

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

@@ -0,0 +1,31 @@
+import { readFileSync } from 'fs';
+import { resolve } from 'path';
+import { format } from 'prettier';
+import { describe, expect, test } from 'vitest';
+import { plugin } from './../../../src/index';
+
+describe('Issues', () => {
+  test('should respect printWidth for args in call token', () => {
+    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],
+
+      semi: true,
+      trailingComma: 'es5',
+      singleQuote: true,
+      printWidth: 80,
+      tabWidth: 2,
+      endOfLine: 'auto',
+    });
+
+    expect(actual).toBe(expected);
+  });
+});

tests/issues/issue-324/unformatted.pug

@@ -0,0 +1,36 @@
+mixin section-intro(content)
+  section.section.section--intro(data-chameleon='black')
+    .wrapper
+      .section__header
+        if content.subhead
+          p.section__subhead.enter.enter--bottom!= content.subhead
+        p.section__heading.enter.enter--bottom.enter--delay-1!= content.heading
+
+      .section__row
+        each column in content.content
+          .section__column
+            .section__content.enter.enter--bottom.enter--delay-2
+              p.section__content-subhead!= column.subhead
+              each paragraph in column.text
+                p.section__content-text!= paragraph
+
+        if content.image
+          img.section__image.enter.enter--bottom.enter--delay-3(src=`/${relativeRoot}assets/images/work/${content.image}`, alt='')
+
+      if block
+        block
+
++section-intro({
+  subhead: 'Introduction',
+  heading: 'Helping candidates and employers connect through a streamlined platform, all while ensuring no one is left out. ',
+  content: [
+    {
+      subhead: 'The Problem',
+      text: ['Employers are eager to higher a diverse workforce, but struggle to manage the daunting process to access talent that meets their needs. Underrepresented job seekers often go unnoticed or worse, get passed up based on existing market biases. ']
+    },
+    {
+      subhead: 'The Solution',
+      text: ['Create a network that prioritizes inclusivity and transparency by uniting job seekers with employers based on their common strengths.  For employers and admins, use thoughtful automation to encourage autonomy.']
+    }
+  ]
+})

tests/options/pugAttributeSeparator/always/formatted.pug

@@ -21,7 +21,7 @@ mixin anchor({ href, isExternal })
     if block
       block
 
-+anchor({ href: "contact/" }).extra-class(data-popup="true")
++anchor({ href: 'contact/' }).extra-class(data-popup="true")
 
 .wrapper(
   data-nav,

tests/options/pugAttributeSeparator/as-needed/formatted.pug

@@ -21,7 +21,7 @@ mixin anchor({ href, isExternal })
     if block
       block
 
-+anchor({ href: "contact/" }).extra-class(data-popup="true")
++anchor({ href: 'contact/' }).extra-class(data-popup="true")
 
 .wrapper(
   data-nav