Skip to content

Keep the indent level after an inline comment in a value group - #19874

Open
Kjubikstronk wants to merge 2 commits into
prettier:mainfrom
Kjubikstronk:scss-indent
Open

Keep the indent level after an inline comment in a value group#19874
Kjubikstronk wants to merge 2 commits into
prettier:mainfrom
Kjubikstronk:scss-indent

Conversation

@Kjubikstronk

@Kjubikstronk Kjubikstronk commented Aug 17, 2026

Copy link
Copy Markdown
Contributor

Fixes #19427.

Description

An inline comment inside a function's arguments pushed everything after it one indent level too deep, and left the closing parens asymmetric:

<!-- Input -->
.foo {
  width: pow(2, pow(2, pow(2,
  // THIS
  pow(2, pow(2, pow(2, 2))))));
}

<!-- Prettier stable -->
        // THIS
        pow(
            2,
            pow(
              2,
              pow(2, 2)
            )
          )
      )

<!-- Prettier main -->
        // THIS
        pow(
          2,
          pow(
            2,
            pow(2, 2)
          )
        )
      )

Without the comment the same value indents in clean steps of two and closes symmetrically; the comment is the only difference.

Cause

A value-comma_group returns group(indent(fill(parts))), and when it sits inside a paren group that paren group indents as well. That double indent was being compensated by dedenting the single line break after the comment:

if (isInlineValueCommentNode(iNode)) {
  if (parentNode.type === "value-paren_group") {
    parts.push(dedent(hardline), "");
    continue;
  }

That fixes the comment's own line, which is why the comment looks right, but the extra level is still open for everything after it — so the following argument and every nested call inside it are shifted, and the closing parens unwind from the wrong depth.

The comma group only exists here because of the comment: without one, the arguments are printed directly by the paren group with no wrapper.

Change

Drop the group's own indent when it holds an inline comment and its parent already indents, instead of dedenting one line inside it:

if (hasInlineComment && parentNode.type === "value-paren_group") {
  return group(fill(parts));
}

The dedent(hardline) special case goes away with it, since the level it was compensating for is no longer added.

Tests

tests/format/scss/comments/19427.scss covers the reported input plus a comment before a plain argument.

One existing snapshot changed, 4878.scss, which covers this same construct. It was recording the bug — the old output stepped 8 → 12 across the comment and closed at mismatched depths, the new one steps 8 → 10 → 12 and closes symmetrically. Worth a look in the diff to confirm you agree it is the improvement it looks like.

  • tests/format/{css,scss,less}: 559 tests, 545 snapshots — only that one snapshot changed.
  • Checked by hand that a comment before a plain argument, two comments at different depths, block comments, comments outside parens, and SCSS maps are all unaffected, and that each result is idempotent.
  • Full suite: 34542 passed. The failures are pre-existing on main — three jsx suites and patterns-dirs.js fail identically with this change stashed, and cache.js passes standalone both with and without it (65.9s vs 65.8s), only timing out under full-suite parallel load.

Checklist

  • I’ve added tests to confirm my change works.
  • (If changing the API or CLI) I’ve documented the changes I’ve made (in the docs/ directory).
  • (If the change is user-facing) I’ve added my changes to changelog_unreleased/*/XXXX.md file following changelog_unreleased/TEMPLATE.md.
  • I’ve read the contributing guidelines.
  • I did not use AI to generate this PR.
  • (If the above is not checked) I have reviewed the AI-generated content before submitting.

To be explicit rather than leaving it to an unticked box: this PR was written with AI assistance, and reviewed before submitting.

A comma group inside a paren group indents its own contents, and the
paren group indents too. That was compensated by dedenting the single
hardline after the comment, so the comment landed correctly but
everything following it stayed one level too deep.

Skip the group's own indent instead, since the paren group already
provides one.
@netlify

netlify Bot commented Aug 17, 2026

Copy link
Copy Markdown

Deploy Preview for prettier ready!

Built without sensitive environment variables

Name Link
🔨 Latest commit 56ddeb8
🔍 Latest deploy log https://app.netlify.com/projects/prettier/deploys/6a831914f1aafb0008d25a35
😎 Deploy Preview https://deploy-preview-19874--prettier.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

SCSS: inline comment before nested function adds extra indent

1 participant