Description

This issue will act as the hub for tracking the CSS formatter as it gets built out. Listed here are all of the different pieces that will need to be implemented to get "complete" support in place. For the most part, this means compatibility with Prettier, and the implementations will inevitably take on the same shape, but we are not currently aiming for perfect parity with Pretttier, as their implementation and tests lean heavily into PostCSS and other facets that we are not yet ready to support.

How to Contribute

Everyone is welcome to contribute pieces here! If you'd like to tackle something, please leave a comment below this issue for which item(s) of the checklist below you'd like to pick up. We will create a separate issue and assign it to you to simplify tracking.

When choosing an item to work on, there are often various pieces that will fit together or be dependent on each other, like attribute_selector requires attribute_name, attribute_matcher, and attribute_matcher_value to be implemented at the same time to get full support.

Also, please only pick a single piece or group to work on at a time, and try to have time available to work on the piece when you select it so that we can keep progressing quickly. If you need any help or have any questions about how to implement formatting in Biome, feel free to ask in the dev-formatter channel in Discord.

Testing

We don't currently have Prettier tests for the CSS formatter, again because much of Prettier's implementation focuses on supporting PostCSS, beyond just standard CSS that Biome supports currently. Instead, please add spec tests under crates/biome_css_formatter/test/specs/css for the feature you are working on. For the most part, Prettier's CSS tests do provide a lot of coverage and examples to pull from.

Node Checklist

The CSS Parser is still in progress, so the set of nodes that need to be formatted is constantly changing. All of the current nodes have been implemented, but as new ones are added, they will need to be formatted as well. Since it's moving so quickly, the list won't be updated here. Instead, there are a number of other general things that need support, listed below.

Once the parser reaches a mostly complete and stable state, we will flesh out the list of remaining types that need formatting support and add them here.

Features and bug fixes

These are features, bug fixes, and other adjustments that need to be made to the formatter to get closer to parity with Prettier.

• Enforce consistent quoting for attribute values (like [type=text] becomes [type="text"]) (#1321)
• Enforce lowercase for all keywords and type selectors (units like 5PX become 5px, at-rules like @MEDIA become @media, types like DIV become div, etc.) (#1354)

Formatting Infrastructure

Listed here are various things that are ready to be implemented or fixed that apply to the CSS formatter in general.

• Comment Placement
• Configuration option for quoteStyle (single vs double, like JS) (#1384)
• Range formatting (might already be handled, but should be tested) (#1363)
• Cursor formatting (handled by the LSP)
• Handle biome ignore: format suppression comments in appropriate places

Testing:

• Add usable Prettier tests (ignoring postcss syntax)

Releasability

These tasks need to be completed for the CSS formatter to be "publicly available" and on-par with the JS formatter.

• Support CSS files in the playground
• Support CSS configuration options in the playground
• Enable/remove the can_format_css_yet flag from biome_service.