Skip to content

Fix SCSS inline comment indentation in deeply nested function calls#19439

Open
vasu-sachdeva wants to merge 1 commit into
prettier:mainfrom
vasu-sachdeva:vasudev
Open

Fix SCSS inline comment indentation in deeply nested function calls#19439
vasu-sachdeva wants to merge 1 commit into
prettier:mainfrom
vasu-sachdeva:vasudev

Conversation

@vasu-sachdeva

@vasu-sachdeva vasu-sachdeva commented Jun 23, 2026

Copy link
Copy Markdown

Description

Fixes #19427.

When a // inline comment appeared as the first argument inside a nested SCSS function call (a value-comma_group inside a value-paren_group), every subsequent argument gained an extra indent level per nesting level:

/* input */
.foo {
  width: someFunc(
    2,
    // comment
    someFunc(
      2,
      // comment
      someFunc(2, 2)
    )
  );
}

/* before */
.foo {
  width: someFunc(
    2,
    // comment
        someFunc(
          2,
          // comment
              someFunc(2, 2)
        )
  );
}

/* after */
.foo {
  width: someFunc(
    2,
    // comment
    someFunc(
      2,
      // comment
      someFunc(2, 2)
    )
  );
}

Cause

In printCommaSeparatedValueGroup.js, a value-comma_group inside a value-paren_group is returned as group(indent(fill(parts))). When a // inline comment triggers a break, the indent wrapper adds an indent level that persists for all subsequent content in the group. A dedent(hardline) separator was used after the comment to try to cancel it, but dedent only affects the indentation of the line break itself — it does not unwind the indent for content on following lines. Consequently, each nesting level of function calls compounded the extra indentation.

Fix

Two changes in src/language-css/print/comma-separated-value-group.js:

  1. Replaced dedent(hardline) with hardline — the dedent had no effect on content after the break.
  2. Added an early return of group(fill(parts)) (without the indent wrapper) when a value-comma_group inside a value-paren_group contains an inline comment. The indent is unnecessary here because the enclosing value-paren_group already provides the correct indentation context for its children.

Tests

The existing tests/format/scss/comments/4878.scss fixture covers this scenario with deeply nested function calls and inline comments at every level. The snapshot was updated to reflect the corrected indentation. All 20 SCSS comment tests, 137 SCSS tests, 177 CSS tests, and 43 Less tests pass.

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/*X/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.

When an inline // comment is the first element of a value-comma_group
inside a value-paren_group, the dedent(hardline) used to cancel the
indent wrapper did not affect content after the break. By removing both
the dedent and the extra indent wrapper for this specific case, arguments
after inline comments are now correctly indented at the same level as
other sibling arguments.

Fixes prettier#19427
@netlify

netlify Bot commented Jun 23, 2026

Copy link
Copy Markdown

Deploy Preview for prettier ready!

Built without sensitive environment variables

Name Link
🔨 Latest commit 2f137b9
🔍 Latest deploy log https://app.netlify.com/projects/prettier/deploys/6a3a9d446667360008f6b970
😎 Deploy Preview https://deploy-preview-19439--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.

@CedricConday

Copy link
Copy Markdown

Nice — this does fix the cascading over-indent in the reported nested case. One thing worth checking before it lands, though: returning group(fill(parts)) without indent() for any value-paren_group that contains an inline comment also strips the hanging indent from a wrapped binary expression in that same group.

Minimal repro:

.c {
  width: someFunction(
    // pick the value
    $a-really-long-variable-name + $another-really-long-variable-name + $yet-more-length,
    2
  );
}

main:

    $a-really-long-variable-name + $another-really-long-variable-name +
      $yet-more-length,

this PR:

    $a-really-long-variable-name + $another-really-long-variable-name +
    $yet-more-length,

The continuation line loses its hanging indent. The new branch drops indent() for the whole group to cancel the comment's extra level, but that also removes the legitimate indent wrapped operands rely on — so the over-indent is fixed at the cost of under-indenting wrapped content in the same group.

Might be worth dedenting only the comment-affected part (or compensating the comment's hardline) instead of removing indent() for the entire group, plus a test combining an inline comment with a long wrapping argument. Happy to be corrected if this is considered acceptable!

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

2 participants