fix(css): updating formatting of non-lowercase CSS dimension units #8175

ryan-m-walker · 2025-11-20T03:47:52Z

Summary

I noticed while working on issue #6183 that the some CSS dimension units are being formatted inconsistently than how they are handled by Prettier. Most units are formatted to lowercase but a few are formatted with some uppercase letters, both in most documentation examples and in Prettier. Specifically Q, hZ and kHz. This PR adds a new FormatDimensionUnit util based on the FormatTokenAsLowercase that maps the special units to the correct formatting. My understanding is the the formatter is aimed to maintain parity with Prettier so I figured I'd open a quick PR with this change.

Let me know if a patch makes sense here. This change could change user's existing formatted code so wasn't sure if patch made the most sense or not

Test Plan

crates/biome_css_formatter/tests/specs/css/units.css.snap snapshot test updated to reflect the new formatting

Docs

n/a

AI Usage Disclosure

Really didn't use much AI at all. All code was hand written.

… and kHz

changeset-bot · 2025-11-20T03:47:57Z

🦋 Changeset detected

Latest commit: bc9dc9e

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

coderabbitai · 2025-11-20T03:52:25Z

Caution

Review failed

The pull request is closed.

Walkthrough

This pull request introduces FormatDimensionUnit, a new CSS dimension formatter that properly capitalises unit suffixes according to CSS specifications. The formatter replaces the previous FormatTokenAsLowercase approach in both regular and unknown dimension value handlers. The implementation includes a helper function mapping lowercase variants (hz, khz, q) to their correct forms (Hz, kHz, Q), with corresponding test updates to validate the formatting behaviour.

Possibly related PRs

fix(css): updating formatting of non-lowercase CSS dimension units #8175: Introduces the same FormatDimensionUnit formatter and replaces FormatTokenAsLowercase across CSS dimension formatting implementations.

Suggested reviewers

siketyan

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 66.67% which is insufficient. The required threshold is 80.00%.	You can run `@coderabbitai generate docstrings` to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and accurately describes the main change: updating CSS dimension unit formatting to match Prettier's handling of non-lowercase units.
Description check	✅ Passed	The description provides clear context about the formatting inconsistency, references relevant documentation and playground examples, and explains the technical approach taken.

📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 2050629 and bc9dc9e.

📒 Files selected for processing (1)

.changeset/wise-dots-rush.md (1 hunks)

Tip

📝 Customizable high-level summaries are now available in beta!

You can now customize how CodeRabbit generates the high-level summary in your pull requests — including its content, structure, tone, and formatting.

Provide your own instructions using the high_level_summary_instructions setting.
Format the summary however you like (bullet lists, tables, multi-section layouts, contributor stats, etc.).
Use high_level_summary_in_walkthrough to move the summary from the description to the walkthrough section.

Example instruction:

"Divide the high-level summary into five sections:

📝 Description — Summarize the main change in 50–60 words, explaining what was done.

📓 References — List relevant issues, discussions, documentation, or related PRs.

📦 Dependencies & Requirements — Mention any new/updated dependencies, environment variable changes, or configuration updates.

📊 Contributor Summary — Include a Markdown table showing contributions:
| Contributor | Lines Added | Lines Removed | Files Changed |

✔️ Additional Notes — Add any extra reviewer context.
Keep each section concise (under 200 words) and use bullet or numbered lists for clarity."

Note: This feature is currently in beta for Pro-tier users, and pricing will be announced later.

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

coderabbitai

Actionable comments posted: 1

📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between fb1458b and 903d475.

⛔ Files ignored due to path filters (1)

crates/biome_css_formatter/tests/specs/css/units.css.snap is excluded by !**/*.snap and included by **

📒 Files selected for processing (4)

.changeset/wise-dots-rush.md (1 hunks)
crates/biome_css_formatter/src/css/value/regular_dimension.rs (2 hunks)
crates/biome_css_formatter/src/css/value/unknown_dimension.rs (2 hunks)
crates/biome_css_formatter/src/utils/string_utils.rs (1 hunks)

🧰 Additional context used

🧬 Code graph analysis (3)

crates/biome_css_formatter/src/css/value/unknown_dimension.rs (1)

crates/biome_css_formatter/src/utils/string_utils.rs (2)

from (24-26)

from (305-307)

crates/biome_css_formatter/src/utils/string_utils.rs (4)

crates/biome_html_formatter/src/utils/formatters.rs (1)

fmt (22-34)

crates/biome_css_formatter/src/lib.rs (8)

fmt (192-201)

fmt (245-247)

fmt (310-326)

format (45-45)

format (58-60)

format (75-80)

format (95-97)

format (342-344)

crates/biome_formatter/src/builders.rs (2)

token (251-259)

text (279-283)

crates/biome_css_formatter/src/trivia.rs (1)

format_replaced (30-38)

crates/biome_css_formatter/src/css/value/regular_dimension.rs (1)

crates/biome_css_formatter/src/utils/string_utils.rs (2)

from (24-26)

from (305-307)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (11)

GitHub Check: Documentation
GitHub Check: Test (depot-windows-2022-16)
GitHub Check: Test (depot-ubuntu-24.04-arm-16)
GitHub Check: Check Dependencies
GitHub Check: Lint project (depot-windows-2022)
GitHub Check: Lint project (depot-ubuntu-24.04-arm-16)
GitHub Check: Bench (biome_css_formatter)
GitHub Check: Bench (biome_css_parser)
GitHub Check: Bench (biome_css_analyze)
GitHub Check: autofix
GitHub Check: Test Node.js API

🔇 Additional comments (5)

crates/biome_css_formatter/src/css/value/unknown_dimension.rs (1)

1-4: LGTM!

The import and usage correctly apply the new FormatDimensionUnit formatter to the unit token.

Also applies to: 21-21

.changeset/wise-dots-rush.md (1)

1-25: LGTM!

Clear documentation with helpful before/after examples.

crates/biome_css_formatter/src/css/value/regular_dimension.rs (1)

1-1: LGTM!

Correctly applies the new FormatDimensionUnit formatter.

Also applies to: 18-18

crates/biome_css_formatter/src/utils/string_utils.rs (2)

300-308: Structure looks good.

The struct definition and From implementation follow the established pattern from FormatTokenAsLowercase.

310-338: Test coverage gap confirmed—add lowercase unit test cases.

The current snapshot tests only cover uppercase inputs (5HZ, 5KHZ, 5Q). There are no test cases for already-lowercase units (5hz, 5khz, 5q), which means the match logic in the formatter code is never exercised by the tests. Add test cases for lowercase inputs to crates/biome_css_formatter/tests/specs/css/units.css to ensure complete coverage of the casing conversion logic.

crates/biome_css_formatter/src/utils/string_utils.rs

codspeed-hq · 2025-11-20T03:55:41Z

CodSpeed Performance Report

Merging #8175 will not alter performance

_{Comparing ryan-m-walker:fix/fix-css-formatting-non-lowercase-dimensions (bc9dc9e) with main (fb1458b)¹}

Summary

✅ 29 untouched
⏩ 126 skipped²

No successful run was found on main (575129a) during the generation of this report, so fb1458b was used instead as the comparison base. There might be some changes unrelated to this pull request in this report. ↩
126 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. ↩

.changeset/wise-dots-rush.md

…iomejs#8175) Co-authored-by: Emanuele Stoppa <[email protected]>

ryan-m-walker added 5 commits November 19, 2025 13:18

fix(css): Update CSS formatting to use expected text casing for Q, Hz…

3f82bab

… and kHz

cleanup doc string

3904563

inline mapping

0647af4

update changeset

12ce689

update wording

903d475

github-actions bot added A-Formatter Area: formatter L-CSS Language: CSS labels Nov 20, 2025

coderabbitai bot reviewed Nov 20, 2025

View reviewed changes

crates/biome_css_formatter/src/utils/string_utils.rs Show resolved Hide resolved

fix issues with existing lowercase values and also fix snapshot test

fd4a4eb

ryan-m-walker changed the title ~~fix(css) updating formatting of non-lowercase CSS dimension units~~ fix(css): updating formatting of non-lowercase CSS dimension units Nov 20, 2025

ryan-m-walker added 3 commits November 19, 2025 22:18

update snapshots with more examples

2050629

update snapshot tests

6a02472

revert snapshot change

815d525

ematipico approved these changes Nov 20, 2025

View reviewed changes

.changeset/wise-dots-rush.md Outdated Show resolved Hide resolved

Update .changeset/wise-dots-rush.md

bc9dc9e

ematipico added this pull request to the merge queue Nov 20, 2025

Merged via the queue into biomejs:main with commit 0c8349e Nov 20, 2025
15 of 16 checks passed

github-actions bot mentioned this pull request Nov 19, 2025

ci: release #8161

Merged

ryan-m-walker added a commit to ryan-m-walker/biome that referenced this pull request Nov 23, 2025

fix(css): updating formatting of non-lowercase CSS dimension units (b…

601079f

…iomejs#8175) Co-authored-by: Emanuele Stoppa <[email protected]>

coderabbitai bot mentioned this pull request Nov 25, 2025

feat(css): add support for the typed attr CSS function #8255

Merged

l0ngvh pushed a commit to l0ngvh/biome that referenced this pull request Dec 21, 2025

fix(css): updating formatting of non-lowercase CSS dimension units (b…

4ffef56

…iomejs#8175) Co-authored-by: Emanuele Stoppa <[email protected]>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

fix(css): updating formatting of non-lowercase CSS dimension units #8175

fix(css): updating formatting of non-lowercase CSS dimension units #8175

Uh oh!

ryan-m-walker commented Nov 20, 2025

Uh oh!

changeset-bot bot commented Nov 20, 2025 •

edited

Loading

Uh oh!

coderabbitai bot commented Nov 20, 2025 •

edited

Loading

Review failed

Uh oh!

coderabbitai bot left a comment

Uh oh!

Uh oh!

codspeed-hq bot commented Nov 20, 2025 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

fix(css): updating formatting of non-lowercase CSS dimension units #8175

fix(css): updating formatting of non-lowercase CSS dimension units #8175

Uh oh!

Conversation

ryan-m-walker commented Nov 20, 2025

Summary

Test Plan

Docs

AI Usage Disclosure

Uh oh!

changeset-bot bot commented Nov 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

coderabbitai bot commented Nov 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review failed

Walkthrough

Possibly related PRs

Suggested reviewers

Pre-merge checks and finishing touches

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

codspeed-hq bot commented Nov 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

CodSpeed Performance Report

Merging #8175 will not alter performance

Summary

Footnotes

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

changeset-bot bot commented Nov 20, 2025 •

edited

Loading

coderabbitai bot commented Nov 20, 2025 •

edited

Loading

codspeed-hq bot commented Nov 20, 2025 •

edited

Loading