feat(css_formatter): ValueListLayout::SingleLine

[denbezrukov]

Summary

This PR updates the component_value_list in the CSS formatter to include ValueListLayout::SingleLine format. It also refactors the function to determine the layout style according to the list length. This change anticipates further support for one-per-line comma-separated lists

Test Plan

cargo test

[netlify]

✅ Deploy Preview for biomejs ready!

Name	Link
🔨 Latest commit	41142f7
🔍 Latest deploy log	https://app.netlify.com/sites/biomejs/deploys/660dc14050815c0008db2981
😎 Deploy Preview	https://deploy-preview-2226--biomejs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 99 (🔴 down 1 from production) Accessibility: 97 (no change from production) Best Practices: 100 (no change from production) SEO: 93 (no change from production) PWA: - View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[github-actions]

Parser conformance results on

js/262

Test result	main count	This PR count	Difference
Total	49701	49701	0
Passed	48721	48721	0
Failed	980	980	0
Panics	0	0	0
Coverage	98.03%	98.03%	0.00%

jsx/babel

Test result	main count	This PR count	Difference
Total	40	40	0
Passed	37	37	0
Failed	3	3	0
Panics	0	0	0
Coverage	92.50%	92.50%	0.00%

symbols/microsoft

Test result	main count	This PR count	Difference
Total	6322	6322	0
Passed	2036	2036	0
Failed	4286	4286	0
Panics	0	0	0
Coverage	32.20%	32.20%	0.00%

ts/babel

Test result	main count	This PR count	Difference
Total	662	662	0
Passed	593	593	0
Failed	69	69	0
Panics	0	0	0
Coverage	89.58%	89.58%	0.00%

ts/microsoft

Test result	main count	This PR count	Difference
Total	17646	17646	0
Passed	13439	13439	0
Failed	4205	4205	0
Panics	2	2	0
Coverage	76.16%	76.16%	0.00%

[codspeed-hq]

CodSpeed Performance Report

Merging #2226 will not alter performance

_{Comparing feat/css-single-line-value-list (41142f7) with main (9ba3e9f)}

Summary

✅ 93 untouched benchmarks

[ematipico]

What are the conditions to have everything on a single line?

[denbezrukov]

@ematipico

Lets start with the example

We've encountered an issue with an extra indent when there's only one parameter in a list.

//Biome
  a: linear-gradient(
      180deg,
      180deg,
      180deg,
      180deg,
      180deg,
      180deg,
      180deg,
      180deg
    );  <--- Here
    
//Prettier
  a: linear-gradient(
    180deg,
    180deg,
    180deg,
    180deg,
    180deg,
    180deg,
    180deg,
    180deg
  );

Although I'm still grappling with understanding Prettier's code, it appears that this function is responsible for formatting the right side of a property (though not exactly as you might expect). It employs a complex logic, but essentially boils down to three conditionals:

  if (isControlDirective) {
    return group(indent(parts));
  }
  
  if (insideURLFunctionInImportAtRuleNode(path)) {
    return group(fill(parts));
  }

  return group(indent(fill(parts)));

We can skip insideURLFunctionInImportAtRuleNode for now. As we can see both conditionals have an extra indent.
Let's try to look at the prettier code playground

it has for the first case:

            .....
            
            type": "value-root",
            "text": "linear-gradient(\n\t\t\t180deg,\n\t\t)",
            "group": {
              "type": "value-value",
              "group": {
                "value": "linear-gradient",,
                "type": "value-func",
                "group": {
                    "sourceIndex": 15,
                    "type": "value-paren",
                    "parenType": ""
                  },
            .....

and for the second case:

             ....
            "type": "value-root",
            "text": "a linear-gradient(\n\t\t\t180deg,\n\t\t)",
            "group": {
              "type": "value-value",
              "group": {
                "groups": [
                  {
                    "value": "a",
                    "type": "value-word",
                  },
              .....

The difference between them is groups wrapper:

• When there are multiple parameters, Prettier introduces an extra indent for parameters (as detailed above) because it invokes printCommaSeparatedValueGroup as an alias for a groups key.
• With only one parameter, we don't see a groups wrapper because Prettier doesn't even callprintCommaSeparatedValueGroup. See here and here .

I'm reconsidering the naming convention used. Perhaps calling it SingleParameter or something similar would be more appropriate. What are your thoughts?

[ematipico]

I'm reconsidering the naming convention used. Perhaps calling it SingleParameter or something similar would be more appropriate. What are your thoughts?

Yeah that's a good suggestion.