prettier: [3.0] Unexpected line breaks in CSS values with commas

Any css value with commas started being formatted with line breaks in 3.0 no matter its length. This was an unexpected (or undocumented) change in version 3.0. I believe this should respect the the print-width setting.

Prettier 3.0.0 Playground link

--parser css

Input:

.foo {
  transition: transform 1s, opacity 2s;
}

Output:

.foo {
  transition:
    transform 1s,
    opacity 2s;
}

Expected behavior: Do not break lines in css that do not exceed the print-width

About this issue

Original URL
State: open
Created a year ago
Reactions: 6
Comments: 16 (7 by maintainers)

Most upvoted comments

This makes even less sense with the font shorthand, because the font-size part is illogically grouped with the first item of font-family:

body {
  font:
    86%/1.33 "Lucida Grande",
    Arial,
    sans-serif;
}

andersk on Jul 20, 2023

I proposed a solution here: https://github.com/prettier/prettier/issues/6024#issuecomment-1216191051

“wrap if any list item contains more than 2 spaces”

thorn0 on Jul 14, 2023

I like @thorn0’s proposal

“wrap if any list item contains more than 2 spaces”

sosukesuzuki on Jul 16, 2023

That makes sense for box-shadow, but definitely doesn’t for font-family which is usually a long list of single word items. Take this example:

body {
  font-family:
    system-ui,
    -apple-system,
    "Segoe UI";
}

which is the current output. I don’t think anyone wants this version.

I think it makes sense if it behaves like the JavaScript printer that considers existing line break, e.g.

const a = {a: 1,b:2}

is formatted as

const a = { a: 1, b: 2 };

while

const a = {
  a: 1,b:2}

is formatted into

const a = {
  a: 1,
  b: 2,
};

so if the user has a line break, we format the rest of the property into multiple lines.

alex-kinokon on Jul 14, 2023

I am the author of the fix. This is how I originally implemented it, but based on https://github.com/prettier/prettier/issues/6024#issuecomment-1209617651 discussion there was a consensus to force the line break based on the AST structure rather than line break present. And I personally support this final approach.

This is more or less prettier base idea and it makes sense, as prettier is not a fixer, it is an opinionated formatter.

I personally propose to close this issue as won’t fix.

If someone wants to pursue this, I think the only option is to enumerate CSS directives that are:

shorthand - like transition
list with single value items - like font-family
list with tuples/multiple value items - like box-shadow

For the first two groups of CSS directives the line breaks does not have to be forced. But the 3rd group can probably contain in many cases single value items only too, and the styling will be inconsistent…

mvorisek on Jul 14, 2023