feat(css_formatter): improve SCSS map value and pair formatting for better readability by denbezrukov · Pull Request #10216 · biomejs/biome

denbezrukov · 2026-05-03T15:10:29Z

This PR was created with AI assistance (Codex).

Summary

Improves SCSS map formatting so long map pairs can wrap after the colon instead of exceeding the configured line width.

$map: (
  	very-very-very-very-very-very-very-verylong-key:
  		very-very-very-very-very-very-very-verylong-value,
  	other-key: other-value,
  );

Test Plan

cargo test -p biome_css_formatter

…etter readability

changeset-bot · 2026-05-03T15:10:33Z

⚠️ No Changeset found

Latest commit: d0a6ea3

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

coderabbitai · 2026-05-03T15:14:16Z

Walkthrough

This PR simplifies SCSS map expression pair formatting by removing conditional branching based on context (e.g., whether a node is within a map key or include arguments). The formatter now applies a unified two-branch approach: if the child value is self-breaking, it maintains key: ( on a single line; otherwise, it applies a map-item shape with indented value wrapping. Unrelated imports were also cleaned up.

Possibly related PRs

feat(css_formatter): align SCSS map closing comments #10149: Both modify SCSS map pair and layout formatting logic, including map value and comment/include-closing behaviour
feat(css_formatter): improve SCSS map formatting parity #10076: Both adjust how map expression pair values are laid out and broken in the formatter
feat(css_formatter): improve SCSS map formatting for parenthesized list keys #10207: Both contain changes to the SCSS map-pair formatting code in map_expression_pair.rs

Suggested labels

A-Formatter, L-CSS

Suggested reviewers

dyc3

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: improving SCSS map value and pair formatting for better readability, which directly aligns with the changeset's focus on updating map expression pair formatting logic.
Description check	✅ Passed	The description clearly relates to the changeset by explaining the improvement to SCSS map formatting, providing a concrete example of the desired wrapping behaviour, and including appropriate test instructions.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch db/scss-formatter-14

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Review rate limit: 7/8 reviews remaining, refill in 7 minutes and 30 seconds.}

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

🧹 Nitpick comments (1)

crates/biome_css_formatter/tests/specs/scss/expression/map-pair-wrapping.scss (1)
1-2: ⚡ Quick win

Consider adding a self-breaking value case to the fixture.

The current input only exercises the non-self-breaking wrap path. The other branch — where the value is a nested map or parenthesised list and the pair stays as key: (…) on one line — isn't covered here. A second $map entry (or a separate variable) with a nested map value would give the snapshot full coverage of both branches.
💡 Example addition
 $map:(very-very-very-very-very-very-very-verylong-key:very-very-very-very-very-very-very-verylong-value,other-key:other-value);
+$nested:(self-breaking-key:(inner-key:inner-value));
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In
`@crates/biome_css_formatter/tests/specs/scss/expression/map-pair-wrapping.scss`
around lines 1 - 2, Add a second test case that exercises the self-breaking
value path by adding another Sass map variable or an additional entry in the
existing $map where the value is a nested map or a parenthesised list (e.g. key:
(nested-key: nested-value) or key: (a, b, c)), so the formatter must keep the
pair as `key: (…)` on one line; update the fixture (variable name like $map or
add $map2) with that nested-map/parenthesised-list value to ensure both
non-self-breaking and self-breaking branches are covered in the snapshot.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In
`@crates/biome_css_formatter/tests/specs/scss/expression/map-pair-wrapping.scss`:
- Around line 1-2: Add a second test case that exercises the self-breaking value
path by adding another Sass map variable or an additional entry in the existing
$map where the value is a nested map or a parenthesised list (e.g. key:
(nested-key: nested-value) or key: (a, b, c)), so the formatter must keep the
pair as `key: (…)` on one line; update the fixture (variable name like $map or
add $map2) with that nested-map/parenthesised-list value to ensure both
non-self-breaking and self-breaking branches are covered in the snapshot.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 5e8b2e98-7762-4bfd-b2e2-a96d301c7347

📥 Commits

Reviewing files that changed from the base of the PR and between b2d0e7f and d0a6ea3.

⛔ Files ignored due to path filters (9)

crates/biome_css_formatter/tests/specs/prettier/scss/map/2554.scss.snap is excluded by !**/*.snap and included by **
crates/biome_css_formatter/tests/specs/prettier/scss/map/function-argument/function-argument-2.scss.snap is excluded by !**/*.snap and included by **
crates/biome_css_formatter/tests/specs/prettier/scss/map/function-argument/functional-argument.scss.snap is excluded by !**/*.snap and included by **
crates/biome_css_formatter/tests/specs/prettier/scss/map/key-values.scss.snap is excluded by !**/*.snap and included by **
crates/biome_css_formatter/tests/specs/prettier/scss/map/keys.scss.snap is excluded by !**/*.snap and included by **
crates/biome_css_formatter/tests/specs/scss/expression/map-context.scss.snap is excluded by !**/*.snap and included by **
crates/biome_css_formatter/tests/specs/scss/expression/map-expansion.scss.snap is excluded by !**/*.snap and included by **
crates/biome_css_formatter/tests/specs/scss/expression/map-pair-wrapping.scss.snap is excluded by !**/*.snap and included by **
crates/biome_css_formatter/tests/specs/scss/expression/map-values.scss.snap is excluded by !**/*.snap and included by **

📒 Files selected for processing (2)

crates/biome_css_formatter/src/scss/auxiliary/map_expression_pair.rs
crates/biome_css_formatter/tests/specs/scss/expression/map-pair-wrapping.scss

codspeed · 2026-05-03T15:20:15Z

Merging this PR will not alter performance

✅ 29 untouched benchmarks
⏩ 227 skipped benchmarks¹

_{Comparing db/scss-formatter-14 (d0a6ea3) with main (b2d0e7f)}

227 benchmarks were skipped, so the baseline results were used instead. If they were deleted from the codebase, click here and archive them to remove them from the performance reports. ↩

feat(css_formatter): improve SCSS map value and pair formatting for b…

d0a6ea3

…etter readability

github-actions Bot added A-Formatter Area: formatter L-CSS Language: CSS and super languages labels May 3, 2026

coderabbitai Bot reviewed May 3, 2026

View reviewed changes

denbezrukov merged commit df52e9a into main May 3, 2026
28 checks passed

denbezrukov deleted the db/scss-formatter-14 branch May 3, 2026 15:51

This was referenced May 3, 2026

feat(css_formatter): enhance SCSS map value formatting #10217

Merged

feat(css_formatter): improve SCSS map formatting #10282

Merged

feat(css_formatter): improve formatting SCSS function arguments with trailing commas #10285

Merged

This was referenced May 19, 2026

feat(css_formatter): align SCSS map pair value layout #10417

Merged

fix(css_formatter): preserve blank lines between SCSS map pairs #10427

Merged

fix(css_formatter): handle control variable maps in SCSS map expressions #10446

Merged

Navigation Menu

Uh oh!

feat(css_formatter): improve SCSS map value and pair formatting for better readability - #10216

feat(css_formatter): improve SCSS map value and pair formatting for better readability#10216
denbezrukov merged 1 commit into
mainfrom
db/scss-formatter-14

denbezrukov commented May 3, 2026

Uh oh!

changeset-bot Bot commented May 3, 2026

Uh oh!

coderabbitai Bot commented May 3, 2026

Uh oh!

coderabbitai Bot left a comment

Uh oh!

codspeed Bot commented May 3, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

denbezrukov commented May 3, 2026

Summary

Test Plan

Uh oh!

changeset-bot Bot commented May 3, 2026

⚠️ No Changeset found

Uh oh!

coderabbitai Bot commented May 3, 2026

Walkthrough

Possibly related PRs

Suggested labels

Suggested reviewers

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

codspeed Bot commented May 3, 2026

Merging this PR will not alter performance

Footnotes

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant