prettier/prettier

Embedded template-literal formatting is not idempotent for nested `.map()` inside a ternary (regression in 3.9.0)

Open

#19,518 opened on Jul 1, 2026

View on GitHub
 (1 comment) (0 reactions) (0 assignees)JavaScript (4,716 forks)batch import
area:idempotencyhelp wantedlang:javascript

Repository metrics

Stars
 (51,868 stars)
PR merge metrics
 (Avg merge 6d) (186 merged PRs in 30d)

Description

1st pass

Prettier v3.9.4 Playground link

--parser babel

Input:

const t = html`
  <ol>
    ${items.map(
      (entry) => html`
        <li>
          ${entry.children
            ? html`
                <ol>
                  ${entry.children.map(
                    (child) => html`<li>${child.title}</li>`,
                  )}
                </ol>
              `
            : entry.title}
        </li>
      `,
    )}
  </ol>
`;

Output:

const t = html`
  <ol>
    ${items.map(
      (entry) => html`
        <li>
          ${
            entry.children
              ? html`
                  <ol>
                    ${entry.children.map(
                    (child) => html`<li>${child.title}</li>`,
                  )}
                  </ol>
                `
              : entry.title
          }
        </li>
      `,
    )}
  </ol>
`;

Diff: https://www.diffchecker.com/TRI5AAxf/


2nd pass

Prettier v3.9.4 Playground link

--parser babel

Input:

const t = html`
  <ol>
    ${items.map(
      (entry) => html`
        <li>
          ${
            entry.children
              ? html`
                  <ol>
                    ${entry.children.map(
                    (child) => html`<li>${child.title}</li>`,
                  )}
                  </ol>
                `
              : entry.title
          }
        </li>
      `,
    )}
  </ol>
`;

Output:

const t = html`
  <ol>
    ${items.map(
      (entry) => html`
        <li>
          ${
            entry.children
              ? html`
                  <ol>
                    ${entry.children.map(
                      (child) => html`<li>${child.title}</li>`,
                    )}
                  </ol>
                `
              : entry.title
          }
        </li>
      `,
    )}
  </ol>
`;

Diff: https://www.diffchecker.com/ciW9nQQn/


Expected output: to be idempotent

Instead, output stabilizes only from the 3rd pass.

Why?

Running first prettier -w and then prettier -c on any file should succeed.

(Noticed via https://github.com/mdn/fred/pull/1686.)

Contributor guide