biomejs · eryue0220 · Nov 6, 2024 · Nov 6, 2024 · Nov 6, 2024 · Nov 6, 2024
diff --git a/crates/biome_css_formatter/src/utils/component_value_list.rs b/crates/biome_css_formatter/src/utils/component_value_list.rs
@@ -226,6 +226,21 @@ where
         .parent::<CssGenericProperty>()
         .and_then(|parent| parent.name().ok())
         .and_then(|name| name.as_css_identifier().map(|name| name.to_trimmed_text()));
+
+    let is_font_family = css_property.as_ref().is_some_and(|name| {
+        name.to_ascii_lowercase_cow() == "font-family"
+    });
+
+    let is_first_minus_operator_in_font_family = list.iter().next().map_or(false, |x| {
+        let text = x.syntax().text_trimmed();
+        text.starts_with("-")
+    });
+
+    let minus_prefixed_count = list.iter()
+        .filter(|x| x.syntax().text_trimmed().starts_with("-"))
+        .count();
+    let has_multiple_minus_prefixed = minus_prefixed_count >= 2;
+
     let is_grid_property = css_property.as_ref().is_some_and(|name| {
         let name = name.to_ascii_lowercase_cow();
 
@@ -249,6 +264,11 @@ where
     // TODO: Check for comments, check for the types of elements in the list, etc.
     if is_grid_property {
         ValueListLayout::PreserveInline
+    } else if is_comma_separated
+        && is_font_family
+        && (!is_first_minus_operator_in_font_family || has_multiple_minus_prefixed)
+    {
+        ValueListLayout::OneGroupPerLine
     } else if list.len() == 1 {
         ValueListLayout::SingleValue
     } else if use_one_group_per_line(css_property.as_deref(), list) {

diff --git a/crates/biome_css_formatter/tests/specs/css/comma/comma.css b/crates/biome_css_formatter/tests/specs/css/comma/comma.css
@@ -0,0 +1,19 @@
+html {
+	font-family: system-ui, -apple-system;
+}
+
+html {
+	font-family: -apple-system, system-ui;
+}
+
+html {
+	font-family: "Lato", system-ui, -apple-system, Arial, sans-serif;
+}
+
+html {
+	font-family: -apple-system, "Lato", system-ui, -apple-system, Arial, sans-serif;
+}
+
+html {
+	font-family: -apple-system, Arial, sans-serif, sans-serif, sans-serif, Arial, sans-serif;
+}
diff --git a/crates/biome_css_formatter/tests/specs/css/comma/comma.css.snap b/crates/biome_css_formatter/tests/specs/css/comma/comma.css.snap
@@ -0,0 +1,79 @@
+---
+source: crates/biome_formatter_test/src/snapshot_builder.rs
+info: css/comma/comma.css
+---
+# Input
+
+```css
+html {
+	font-family: system-ui, -apple-system;
+}
+
+html {
+	font-family: -apple-system, system-ui;
+}
+
+html {
+	font-family: "Lato", system-ui, -apple-system, Arial, sans-serif;
+}
+
+html {
+	font-family: -apple-system, "Lato", system-ui, -apple-system, Arial, sans-serif;
+}
+
+html {
+	font-family: -apple-system, Arial, sans-serif, sans-serif, sans-serif, Arial, sans-serif;
+}
+
+```
+
+
+=============================
+
+# Outputs
+
+## Output 1
+
+-----
+Indent style: Tab
+Indent width: 2
+Line ending: LF
+Line width: 80
+Quote style: Double Quotes
+-----
+
+```css
+html {
+	font-family:
+		system-ui,
+		-apple-system;
+}
+
+html {
+	font-family: -apple-system, system-ui;
+}
+
+html {
+	font-family:
+		"Lato",
+		system-ui,
+		-apple-system,
+		Arial,
+		sans-serif;
+}
+
+html {
+	font-family:
+		-apple-system,
+		"Lato",
+		system-ui,
+		-apple-system,
+		Arial,
+		sans-serif;
+}
+
+html {
+	font-family: -apple-system, Arial, sans-serif, sans-serif, sans-serif, Arial,
+		sans-serif;
+}
+```
diff --git a/crates/biome_css_formatter/tests/specs/css/declaration_list.css.snap b/crates/biome_css_formatter/tests/specs/css/declaration_list.css.snap
@@ -51,7 +51,7 @@ a {
     color: blue;
   }
 }
-  
+
 .without-comments {
   a,
   button {
@@ -135,4 +135,4 @@ a {
 		color: blue;
 	}
 }
-```
+```
diff --git a/crates/biome_css_formatter/tests/specs/css/properties/border.css.snap b/crates/biome_css_formatter/tests/specs/css/properties/border.css.snap
@@ -26,23 +26,23 @@ div {
 
     /* <line-width> */
     border : ThIn;
-    border: 
+    border:
     medium
     ;
     border:   100px;
 
     /* <color> */
-    border: 
+    border:
     #fff;
 
     /* combinations */
     border: 2px
     dotted;
     border  :   outset   #f33;
-    border:#000 medium  
-     
+    border:#000 medium
+
     dashed
-        
+
         ;
 }
 
@@ -91,4 +91,4 @@ div {
 	border: outset #f33;
 	border: #000 medium dashed;
 }
-```
+```
diff --git a/crates/biome_css_formatter/tests/specs/css/properties/custom.css.snap b/crates/biome_css_formatter/tests/specs/css/properties/custom.css.snap
@@ -10,7 +10,7 @@ div {
     --custom-property
     :
      one-value ;
-    --custom-property:    multiple   
+    --custom-property:    multiple
      values;
     --custom-property: delimited
     , values
@@ -47,4 +47,4 @@ div {
 	--custom-property: delimited / slash / values;
 	--custom-property: mixed, delimiters / can be, used;
 }
-```
+```
diff --git a/crates/biome_css_formatter/tests/specs/css/properties/generic.css.snap b/crates/biome_css_formatter/tests/specs/css/properties/generic.css.snap
@@ -11,7 +11,7 @@ div {
     unknown-property
     :
      one-value ;
-    unknown-property:    multiple   
+    unknown-property:    multiple
      values;
     unknown-property: delimited
     , values
@@ -51,4 +51,4 @@ div {
 		delimiters / can be,
 		used;
 }
-```
+```
diff --git a/crates/biome_css_formatter/tests/specs/css/properties/unicode_range.css.snap b/crates/biome_css_formatter/tests/specs/css/properties/unicode_range.css.snap
@@ -84,16 +84,35 @@ Quote style: Double Quotes
 
 ```css
 @font-face {
-	unicode-range: U+000-49F, U+2000-27FF, U+2900-2BFF, U+1D400-1D7FF, U+ff??;
+	unicode-range:
+		U+000-49F,
+		U+2000-27FF,
+		U+2900-2BFF,
+		U+1D400-1D7FF,
+		U+ff??;
 }
 
 @font-face {
-	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC,
-		U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
+	unicode-range:
+		U+0000-00FF,
+		U+0131,
+		U+0152-0153,
+		U+02C6,
+		U+02DA,
+		U+02DC,
+		U+2000-206F,
+		U+2074,
+		U+20AC,
+		U+2212,
+		U+2215;
 }
 
 @font-face {
-	unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+	unicode-range:
+		U+0400-045F,
+		U+0490-0491,
+		U+04B0-04B1,
+		U+2116;
 }
 
 @font-face {
@@ -104,8 +123,14 @@ Quote style: Double Quotes
 	unicode-range: U+0-7F;
 	unicode-range: U+0025-00FF; /* codepoint range */
 	unicode-range: U+4??; /* wildcard range */
-	unicode-range: U+0025-00FF, U+4??; /* multiple values */
-	unicode-range: U+A5, U+4E00-9FFF, U+30??, U+FF00-FF9F; /* multiple values */
+	unicode-range:
+		U+0025-00FF,
+		U+4??; /* multiple values */
+	unicode-range:
+		U+A5,
+		U+4E00-9FFF,
+		U+30??,
+		U+FF00-FF9F; /* multiple values */
 	unicode-range: U+????;
 	unicode-range: U+??????;
 	unicode-range: U+12;

diff --git a/crates/biome_css_formatter/tests/specs/prettier/css/comments/declaration.css.snap b/crates/biome_css_formatter/tests/specs/prettier/css/comments/declaration.css.snap
@@ -100,7 +100,7 @@ body
 +  /* comment 11 */ color: red /* comment 12 */ !important /* comment 13 */; /* comment 14 */
    /* comment 15 */
  }
- 
+
  @font-face {
    font-family: "Prettier";
 -  src: /* comment 16 */
@@ -110,7 +110,7 @@ body
 +  /* comment 16 */ src: local(/* comment 17 */ "Prettier" /* comment 18 */), /* comment 19 */
 +    /* comment 20 */ url("http://prettier.com/font.woff") /* comment 21 */; /* comment 22 */
  }
- 
+
  .foo {
 -  /* comment 23 */
 -  color/* comment 24 */:/* comment 25 */ blue /* comment 26 */; /* comment 27 */
@@ -177,7 +177,7 @@ body
 +  /* comment 73 */
    /* comment 75 */
  }
- 
+
 ```
 
 # Output
@@ -277,4 +277,4 @@ body {
    14:     /* comment 20 */ url("http://prettier.com/font.woff") /* comment 21 */; /* comment 22 */
    18:   /* comment 23 */ /* comment 24 */ /* comment 25 */ color: blue /* comment 26 */; /* comment 27 */
    24:   /* comment 34 */ /* comment 35 */ /* comment 36 */ color: blue /* comment 37 */; /* comment 38 */
-```
+```
diff --git a/crates/biome_css_formatter/tests/specs/prettier/css/fill-value/fill.css.snap b/crates/biome_css_formatter/tests/specs/prettier/css/fill-value/fill.css.snap
@@ -51,62 +51,62 @@ div {
 fill.css:2:30 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
   × unexpected character `$`
-  
+
     1 │ div {
   > 2 │   border-left: 1px solid mix($warningBackgroundColors, $warningBorderColors, 50%);
       │                              ^
     3 │   $fontFamily: "Lato", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
     4 │ }
-  
+
 fill.css:2:31 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
   × expected `,` but instead found `warningBackgroundColors`
-  
+
     1 │ div {
   > 2 │   border-left: 1px solid mix($warningBackgroundColors, $warningBorderColors, 50%);
       │                               ^^^^^^^^^^^^^^^^^^^^^^^
     3 │   $fontFamily: "Lato", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
     4 │ }
-  
+
   i Remove warningBackgroundColors
-  
+
 fill.css:2:56 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
   × unexpected character `$`
-  
+
     1 │ div {
   > 2 │   border-left: 1px solid mix($warningBackgroundColors, $warningBorderColors, 50%);
       │                                                        ^
     3 │   $fontFamily: "Lato", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
     4 │ }
-  
+
 fill.css:2:57 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
   × expected `,` but instead found `warningBorderColors`
-  
+
     1 │ div {
   > 2 │   border-left: 1px solid mix($warningBackgroundColors, $warningBorderColors, 50%);
       │                                                         ^^^^^^^^^^^^^^^^^^^
     3 │   $fontFamily: "Lato", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
     4 │ }
-  
+
   i Remove warningBorderColors
-  
+
 fill.css:3:3 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
   × unexpected character `$`
-  
+
     1 │ div {
     2 │   border-left: 1px solid mix($warningBackgroundColors, $warningBorderColors, 50%);
   > 3 │   $fontFamily: "Lato", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
       │   ^
     4 │ }
-    5 │ 
-  
+    5 │
+
 
 ```
 
 # Lines exceeding max width of 80 characters
 ```
     2:   border-left: 1px solid mix($warningBackgroundColors, $warningBorderColors, 50%);
-```
+```