fix(css_formatter): improve comment handling in generic CSS properties by denbezrukov · Pull Request #10439 · biomejs/biome

denbezrukov · 2026-05-22T06:47:50Z

This PR was created with AI assistance (Codex).

Summary

Improves CSS and SCSS formatting for comments around declaration colons so comments between property names, colons, and values stay attached to the same boundary as Prettier.

Previously, Biome could format this as:

.selector {
  color: /* red, */
    blue;
}

Now it preserves the colon/value boundary:

.selector {
  color: /* red, */ blue;
}

Test Plan

cargo test -p biome_css_formatter

changeset-bot · 2026-05-22T06:47:57Z

🦋 Changeset detected

Latest commit: 20dab33

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 13 packages

Name	Type
@biomejs/biome	Patch
@biomejs/cli-win32-x64	Patch
@biomejs/cli-win32-arm64	Patch
@biomejs/cli-darwin-x64	Patch
@biomejs/cli-darwin-arm64	Patch
@biomejs/cli-linux-x64	Patch
@biomejs/cli-linux-arm64	Patch
@biomejs/cli-linux-x64-musl	Patch
@biomejs/cli-linux-arm64-musl	Patch
@biomejs/wasm-web	Patch
@biomejs/wasm-bundler	Patch
@biomejs/wasm-nodejs	Patch
@biomejs/backend-jsonrpc	Patch

Not sure what this means? Click here to learn what changesets are.

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

github-actions · 2026-05-22T06:47:59Z

✅ Organic activity

No automation signals detected in the analyzed events.

View full analysis →

_{This is an automated analysis by AgentScan}

coderabbitai · 2026-05-22T06:51:04Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: b95be543-7da5-4cba-9d4e-3c95cd2854d9

📥 Commits

Reviewing files that changed from the base of the PR and between 8d28bf3 and 20dab33.

📒 Files selected for processing (1)

.changeset/preserve-css-declaration-comment-boundaries.md

✅ Files skipped from review due to trivial changes (1)

.changeset/preserve-css-declaration-comment-boundaries.md

Walkthrough

This PR preserves comments that sit at the colon/value boundary in CSS/SCSS declarations. It updates comment classification in comments.rs to detect comments between a property's colon and its value, refactors generic-property formatting to centralise colon/value comment handling with per-comment spacing/break rules, and adds CSS/SCSS tests plus a changeset documenting the patch.

Possibly related PRs

biomejs/biome#9261: Modifies the same generic-property comment placement and colon/value boundary handling in the CSS formatter.

Suggested labels

A-Formatter, L-CSS

Suggested reviewers

dyc3
ematipico

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title directly reflects the main change: improving CSS formatter comment handling around property declarations.
Description check	✅ Passed	The description clearly explains the fix with concrete before/after examples showing how comments are now preserved around declaration colons.
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/formatter-26

Warning

Review ran into problems

🔥 Problems

Stopped waiting for pipeline failures after 30000ms. One of your pipelines takes longer than our 30000ms fetch window to run, so review may not consider pipeline-failure results for inline comments if any failures occurred after the fetch window. Increase the timeout if you want to wait longer or run a @coderabbit review after the pipeline has finished.

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

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

codspeed-hq · 2026-05-22T06:58:36Z

Merging this PR will not alter performance

✅ 29 untouched benchmarks
⏩ 227 skipped benchmarks¹

_{Comparing db/formatter-26 (20dab33) with main (e3df60e)}

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. ↩

ematipico

Nice! Just left a nit

…lons

This PR contains the following updates: | Package | Type | Update | Change | |---|---|---|---| | [@biomejs/biome](https://biomejs.dev) ([source](https://github.com/biomejs/biome/tree/HEAD/packages/@biomejs/biome)) | imports | patch | [`2.4.15` -> `2.4.16`](https://renovatebot.com/diffs/npm/@biomejs%2fbiome/2.4.15/2.4.16) | --- ### Release Notes <details> <summary>biomejs/biome (@biomejs/biome)</summary> ### [`v2.4.16`](https://github.com/biomejs/biome/blob/HEAD/packages/@biomejs/biome/CHANGELOG.md#2416) [Compare Source](https://github.com/biomejs/biome/compare/@biomejs/biome@2.4.15...@biomejs/biome@2.4.16) ##### Patch Changes - [#10329](biomejs/biome#10329) [`ef764d5`](biomejs/biome@ef764d5) Thanks [@Conaclos](https://github.com/Conaclos)! - Fixed an issue where diagnostics showed an incorrect location in Astro files. - [#10363](biomejs/biome#10363) [`50aa415`](biomejs/biome@50aa415) Thanks [@dyc3](https://github.com/dyc3)! - Fixed HTML formatting for a case where comments could cause the formatter to split up a closing tag, which would cause the resulting HTML to be syntactically invalid. Input: ```html ab ``` Output: ```diff  a</span >bab ``` - [#10465](biomejs/biome#10465) [`0c718da`](biomejs/biome@0c718da) Thanks [@dfedoryshchev](https://github.com/dfedoryshchev)! - Fixed diagnostics emitted by the `noUntrustedLicenses` rule. - [#10358](biomejs/biome#10358) [`05c2617`](biomejs/biome@05c2617) Thanks [@dyc3](https://github.com/dyc3)! - Fixed [#10356](biomejs/biome#10356): `biome rage --linter` now displays rules enabled through linter domains in the enabled rules list. - [#10300](biomejs/biome#10300) [`950247c`](biomejs/biome@950247c) Thanks [@dyc3](https://github.com/dyc3)! - Fixed [#10265](biomejs/biome#10265): Svelte function bindings such as `bind:value={get, set}` are now parsed more precisely, so [`noCommaOperator`](https://biomejs.dev/linter/rules/no-comma-operator/) won't emit false positives for that syntax anymore. - [#9786](biomejs/biome#9786) [`e71f584`](biomejs/biome@e71f584) Thanks [@MeGaNeKoS](https://github.com/MeGaNeKoS)! - Fixed [#8480](biomejs/biome#8480): [`useDestructuring`](https://biomejs.dev/linter/rules/use-destructuring/) now provides `variableDeclarator` and `assignmentExpression` options to control which contexts enforce destructuring, matching ESLint's `prefer-destructuring` configuration. Both default to `{array: true, object: true}`. The diagnostic for object destructuring in assignment expressions now instructs users to wrap the assignment in parentheses. - [#10425](biomejs/biome#10425) [`1948b72`](biomejs/biome@1948b72) Thanks [@sjh9714](https://github.com/sjh9714)! - Fixed [#10244](biomejs/biome#10244): The `useOptionalChain` rule now detects negated guard inequality chains like `!foo || foo.bar !== "x"`. - [#10442](biomejs/biome#10442) [`001f94f`](biomejs/biome@001f94f) Thanks [@ematipico](https://github.com/ematipico)! - Fixed [#10411](biomejs/biome#10411): [`noMisusedPromises`](https://biomejs.dev/linter/rules/no-misused-promises/) no longer causes a stack overflow when a nested function returns an object with shorthand properties that shadow destructured variables from an outer scope. - [#10318](biomejs/biome#10318) [`9b1577f`](biomejs/biome@9b1577f) Thanks [@dyc3](https://github.com/dyc3)! - Added support for `formatter.trailingCommas` in overrides. This option was previously available in the top-level formatter configuration but missing from formatter overrides. - [#10319](biomejs/biome#10319) [`2e37709`](biomejs/biome@2e37709) Thanks [@dyc3](https://github.com/dyc3)! - Fixed Vue and Svelte formatting for standalone interpolations in inline elements. Biome now preserves existing newlines in cases like: ```diff - {{ value }} + + {{ value }} + ``` - [#10365](biomejs/biome#10365) [`0a58eb0`](biomejs/biome@0a58eb0) Thanks [@Netail](https://github.com/Netail)! - Fixed [#10361](biomejs/biome#10361): [`noUnusedFunctionParameters`](https://biomejs.dev/linter/rules/no-unused-function-parameters/) now mentions the parameter name in the diagnostic. - [#10439](biomejs/biome#10439) [`df6b867`](biomejs/biome@df6b867) Thanks [@denbezrukov](https://github.com/denbezrukov)! - Fixed CSS and SCSS formatting for comments around declaration colons so comments between property names, colons, and values stay at the same boundary as Prettier. ```diff .selector { - color: /* red, */ - blue; + color: /* red, */ blue; } ``` - [#10344](biomejs/biome#10344) [`b30208c`](biomejs/biome@b30208c) Thanks [@siketyan](https://github.com/siketyan)! - Fixed [`#10123`](biomejs/biome#10123): Corrected the [`noReactNativeDeepImports`](https://biomejs.dev/linter/rules/no-react-native-deep-imports/) source rule to point to the proper upstream rule, so users can migrate from the original rule correctly. - [#10328](biomejs/biome#10328) [`b59133f`](biomejs/biome@b59133f) Thanks [@dyc3](https://github.com/dyc3)! - Fixed [#10309](biomejs/biome#10309): Biome no longer adds newlines to Astro frontmatter when linter or assist `--write` mode is enabled. </details> --- ### Configuration 📅 **Schedule**: (UTC) - Branch creation - At any time (no schedule defined) - Automerge - At any time (no schedule defined) 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate](https://github.com/renovatebot/renovate).  Reviewed-on: https://git.oirnoir.dev/OIRNOIR/YouTube-Helper-Client/pulls/5

This PR contains the following updates: | Package | Type | Update | Change | |---|---|---|---| | [@biomejs/biome](https://biomejs.dev) ([source](https://github.com/biomejs/biome/tree/HEAD/packages/@biomejs/biome)) | imports | patch | [`2.4.15` -> `2.4.16`](https://renovatebot.com/diffs/npm/@biomejs%2fbiome/2.4.15/2.4.16) | --- ### Release Notes <details> <summary>biomejs/biome (@biomejs/biome)</summary> ### [`v2.4.16`](https://github.com/biomejs/biome/blob/HEAD/packages/@biomejs/biome/CHANGELOG.md#2416) [Compare Source](https://github.com/biomejs/biome/compare/@biomejs/biome@2.4.15...@biomejs/biome@2.4.16) ##### Patch Changes - [#10329](biomejs/biome#10329) [`ef764d5`](biomejs/biome@ef764d5) Thanks [@Conaclos](https://github.com/Conaclos)! - Fixed an issue where diagnostics showed an incorrect location in Astro files. - [#10363](biomejs/biome#10363) [`50aa415`](biomejs/biome@50aa415) Thanks [@dyc3](https://github.com/dyc3)! - Fixed HTML formatting for a case where comments could cause the formatter to split up a closing tag, which would cause the resulting HTML to be syntactically invalid. Input: ```html ab ``` Output: ```diff  a</span >bab ``` - [#10465](biomejs/biome#10465) [`0c718da`](biomejs/biome@0c718da) Thanks [@dfedoryshchev](https://github.com/dfedoryshchev)! - Fixed diagnostics emitted by the `noUntrustedLicenses` rule. - [#10358](biomejs/biome#10358) [`05c2617`](biomejs/biome@05c2617) Thanks [@dyc3](https://github.com/dyc3)! - Fixed [#10356](biomejs/biome#10356): `biome rage --linter` now displays rules enabled through linter domains in the enabled rules list. - [#10300](biomejs/biome#10300) [`950247c`](biomejs/biome@950247c) Thanks [@dyc3](https://github.com/dyc3)! - Fixed [#10265](biomejs/biome#10265): Svelte function bindings such as `bind:value={get, set}` are now parsed more precisely, so [`noCommaOperator`](https://biomejs.dev/linter/rules/no-comma-operator/) won't emit false positives for that syntax anymore. - [#9786](biomejs/biome#9786) [`e71f584`](biomejs/biome@e71f584) Thanks [@MeGaNeKoS](https://github.com/MeGaNeKoS)! - Fixed [#8480](biomejs/biome#8480): [`useDestructuring`](https://biomejs.dev/linter/rules/use-destructuring/) now provides `variableDeclarator` and `assignmentExpression` options to control which contexts enforce destructuring, matching ESLint's `prefer-destructuring` configuration. Both default to `{array: true, object: true}`. The diagnostic for object destructuring in assignment expressions now instructs users to wrap the assignment in parentheses. - [#10425](biomejs/biome#10425) [`1948b72`](biomejs/biome@1948b72) Thanks [@sjh9714](https://github.com/sjh9714)! - Fixed [#10244](biomejs/biome#10244): The `useOptionalChain` rule now detects negated guard inequality chains like `!foo || foo.bar !== "x"`. - [#10442](biomejs/biome#10442) [`001f94f`](biomejs/biome@001f94f) Thanks [@ematipico](https://github.com/ematipico)! - Fixed [#10411](biomejs/biome#10411): [`noMisusedPromises`](https://biomejs.dev/linter/rules/no-misused-promises/) no longer causes a stack overflow when a nested function returns an object with shorthand properties that shadow destructured variables from an outer scope. - [#10318](biomejs/biome#10318) [`9b1577f`](biomejs/biome@9b1577f) Thanks [@dyc3](https://github.com/dyc3)! - Added support for `formatter.trailingCommas` in overrides. This option was previously available in the top-level formatter configuration but missing from formatter overrides. - [#10319](biomejs/biome#10319) [`2e37709`](biomejs/biome@2e37709) Thanks [@dyc3](https://github.com/dyc3)! - Fixed Vue and Svelte formatting for standalone interpolations in inline elements. Biome now preserves existing newlines in cases like: ```diff - {{ value }} + + {{ value }} + ``` - [#10365](biomejs/biome#10365) [`0a58eb0`](biomejs/biome@0a58eb0) Thanks [@Netail](https://github.com/Netail)! - Fixed [#10361](biomejs/biome#10361): [`noUnusedFunctionParameters`](https://biomejs.dev/linter/rules/no-unused-function-parameters/) now mentions the parameter name in the diagnostic. - [#10439](biomejs/biome#10439) [`df6b867`](biomejs/biome@df6b867) Thanks [@denbezrukov](https://github.com/denbezrukov)! - Fixed CSS and SCSS formatting for comments around declaration colons so comments between property names, colons, and values stay at the same boundary as Prettier. ```diff .selector { - color: /* red, */ - blue; + color: /* red, */ blue; } ``` - [#10344](biomejs/biome#10344) [`b30208c`](biomejs/biome@b30208c) Thanks [@siketyan](https://github.com/siketyan)! - Fixed [`#10123`](biomejs/biome#10123): Corrected the [`noReactNativeDeepImports`](https://biomejs.dev/linter/rules/no-react-native-deep-imports/) source rule to point to the proper upstream rule, so users can migrate from the original rule correctly. - [#10328](biomejs/biome#10328) [`b59133f`](biomejs/biome@b59133f) Thanks [@dyc3](https://github.com/dyc3)! - Fixed [#10309](biomejs/biome#10309): Biome no longer adds newlines to Astro frontmatter when linter or assist `--write` mode is enabled. </details> --- ### Configuration 📅 **Schedule**: (UTC) - Branch creation - At any time (no schedule defined) - Automerge - At any time (no schedule defined) 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate](https://github.com/renovatebot/renovate).  Reviewed-on: https://git.oirnoir.dev/OIRNOIR/YouTube-Helper-Server/pulls/13

fix(css_formatter): improve comment handling in generic CSS properties

8d28bf3

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

ematipico approved these changes May 22, 2026

View reviewed changes

Comment thread .changeset/preserve-css-declaration-comment-boundaries.md Outdated

fix(css_formatter): preserve comment boundaries around declaration co…

20dab33

…lons

denbezrukov merged commit df6b867 into main May 22, 2026
31 checks passed

denbezrukov deleted the db/formatter-26 branch May 22, 2026 10:28

github-actions Bot mentioned this pull request May 22, 2026

ci: release #10326

Merged

coderabbitai Bot mentioned this pull request Jun 1, 2026

fix(css_formatter): preserve declaration comment boundaries #10532

Merged

This was referenced Jun 9, 2026

feat(css_formatter): improve SCSS variable declaration formatting #10597

Merged

fix(css_formatter): align grid-template-areas rows after comments #10603

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(css_formatter): improve comment handling in generic CSS properties#10439

fix(css_formatter): improve comment handling in generic CSS properties#10439
denbezrukov merged 2 commits into
mainfrom
db/formatter-26

denbezrukov commented May 22, 2026

Uh oh!

changeset-bot Bot commented May 22, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented May 22, 2026

Uh oh!

coderabbitai Bot commented May 22, 2026 •

edited

Loading

Review ran into problems

Uh oh!

codspeed-hq Bot commented May 22, 2026 •

edited

Loading

Uh oh!

ematipico left a comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

denbezrukov commented May 22, 2026

Summary

Test Plan

Uh oh!

changeset-bot Bot commented May 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions Bot commented May 22, 2026

✅ Organic activity

Uh oh!

coderabbitai Bot commented May 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Possibly related PRs

Suggested labels

Suggested reviewers

Review ran into problems

Uh oh!

codspeed-hq Bot commented May 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Merging this PR will not alter performance

Footnotes

Uh oh!

ematipico left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

changeset-bot Bot commented May 22, 2026 •

edited

Loading

coderabbitai Bot commented May 22, 2026 •

edited

Loading

codspeed-hq Bot commented May 22, 2026 •

edited

Loading