fix(biome_css_formatter): update css format style

crates/biome_css_formatter/src/css/properties/generic_property.rs

@@ -12,9 +12,47 @@ impl FormatNodeRule<CssGenericProperty> for FormatCssGenericProperty {
             value,
         } = node.as_fields();
 
-        write!(
-            f,
-            [name.format(), colon_token.format(), space(), value.format()]
-        )
+        let is_comma: bool = value.iter().any(|v| v.text().eq(","));
+
+        if is_comma {
+            write!(
+                f,
+                [
+                    name.format(),
+                    colon_token.format(),
+                    &soft_line_indent_or_hard_space(&format_once(|f| {
+                        for (idx, v) in value.iter().enumerate() {
+                            let is_last = idx == value.len() - 1;
+
+                            if is_last {
+                                write!(f, [v.format()])?;
+                                break;
+                            }
+
+                            let Some(next) = value.iter().nth(idx + 1) else {
+                                continue;
+                            };
+
+                            let next_is_comma = next.text().eq(",");
+
+                            if v.text().eq(",") {
+                                write!(f, [v.format(), hard_line_break()])?;
+                            } else if next_is_comma {
+                                write!(f, [v.format()])?;
+                            } else {
+                                write!(f, [v.format(), space()])?;
+                            }
+                        }
+
+                        Ok(())
+                    }))
+                ]
+            )
+        } else {
+            write!(
+                f,
+                [name.format(), colon_token.format(), space(), value.format()]
+            )
+        }
     }
 }

crates/biome_css_formatter/tests/specs/css/atrule/font_face.css.snap

@@ -114,33 +114,39 @@ Quote style: Double Quotes
 ```css
 @font-face {
 	font-family: "Open Sans";
-	src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
+	src:
+		url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
 		url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
 }
 @font-face {
 	font-family: "Open Sans";
-	src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
+	src:
+		url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
 		url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
 }
 @font-face {
 	font-family: "Open Sans";
-	src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
+	src:
+		url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
 		url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
 }
 @font-face {
 	font-family: "Open Sans";
-	src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
+	src:
+		url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
 		url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
 }
 @font-face {
 	font-family: "Open Sans";
-	src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
+	src:
+		url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
 		url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
 }
 @font-face {
 	font-family: "Open Sans";
 
-	src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
+	src:
+		url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
 		url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
 }
 ```

crates/biome_css_formatter/tests/specs/css/block.css

@@ -18,4 +18,4 @@ color: blue;
 
 }
 
-.always-new-line     { color: blue; }
+.always-new-line     { color: blue; }

crates/biome_css_formatter/tests/specs/css/comma/comma.css

@@ -0,0 +1,11 @@
+div {
+	box-shadow: 0 0 1px 2px rgba(88, 144, 255, 0.75), 10px 20px 1px 2px rgba(87, 145, 254, 0.65);
+}
+
+html {
+	font-family: system-ui, -apple-system;
+}
+
+html {
+	font-family: -apple-system, system-ui;
+}

crates/biome_css_formatter/tests/specs/css/comma/comma.css.snap

@@ -0,0 +1,55 @@
+---
+source: crates/biome_formatter_test/src/snapshot_builder.rs
+info: css/comma/comma.css
+---
+# Input
+
+```css
+div {
+	box-shadow: 0 0 1px 2px rgba(88, 144, 255, 0.75), 10px 20px 1px 2px rgba(87, 145, 254, 0.65);
+}
+
+html {
+	font-family: system-ui, -apple-system;
+}
+
+html {
+	font-family: -apple-system, system-ui;
+}
+
+```
+
+
+=============================
+
+# Outputs
+
+## Output 1
+
+-----
+Indent style: Tab
+Indent width: 2
+Line ending: LF
+Line width: 80
+Quote style: Double Quotes
+-----
+
+```css
+div {
+	box-shadow:
+		0 0 1px 2px rgba(88, 144, 255, 0.75),
+		10px 20px 1px 2px rgba(87, 145, 254, 0.65);
+}
+
+html {
+	font-family:
+		system-ui,
+		-apple-system;
+}
+
+html {
+	font-family:
+		-apple-system,
+		system-ui;
+}
+```

crates/biome_css_formatter/tests/specs/css/declaration_list.css.snap

@@ -51,7 +51,7 @@ a {
     color: blue;
   }
 }
-  
+
 .without-comments {
   a,
   button {
@@ -112,8 +112,14 @@ Quote style: Double Quotes
 
 a {
 	--bs-font-monospace: sfmono-regular / menlo;
-	--bs-font-monospace: sfmono-regular, menlo, monaco, consolas,
-		"Liberation Mono", "Courier New", monospace;
+	--bs-font-monospace:
+		sfmono-regular,
+		menlo,
+		monaco,
+		consolas,
+		"Liberation Mono",
+		"Courier New",
+		monospace;
 }
 
 a {

crates/biome_css_formatter/tests/specs/css/properties/all.css.snap

@@ -63,7 +63,9 @@ div {
 	all: revert-layer;
 
 	all: unknown-value;
-	all: a, value list;
+	all:
+		a,
+		value list;
 }
 
 :root {

crates/biome_css_formatter/tests/specs/css/properties/border.css.snap

@@ -25,23 +25,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
-        
+
         ;
 }
 
@@ -69,7 +69,9 @@ div {
 	border: inherit;
 
 	border: zzz-unknown-value;
-	border: a, value list;
+	border:
+		a,
+		value list;
 
 	/* <line-style> */
 	border: SOLID;

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
@@ -43,8 +43,13 @@ div {
 	/* Custom property, always generic */
 	--custom-property: one-value;
 	--custom-property: multiple values;
-	--custom-property: delimited, values;
+	--custom-property:
+		delimited,
+		values;
 	--custom-property: delimited / slash / values;
-	--custom-property: mixed, delimiters / can be, used;
+	--custom-property:
+		mixed,
+		delimiters / can be,
+		used;
 }
 ```

crates/biome_css_formatter/tests/specs/css/properties/generic.css.snap

@@ -10,7 +10,7 @@ div {
     unknown-property
     :
      one-value ;
-    unknown-property:    multiple   
+    unknown-property:    multiple
      values;
     unknown-property: delimited
     , values
@@ -43,8 +43,13 @@ div {
 	/* Custom property, always generic */
 	unknown-property: one-value;
 	unknown-property: multiple values;
-	unknown-property: delimited, values;
+	unknown-property:
+		delimited,
+		values;
 	unknown-property: delimited / slash / values;
-	unknown-property: mixed, delimiters / can be, used;
+	unknown-property:
+		mixed,
+		delimiters / can be,
+		used;
 }
 ```

crates/biome_css_formatter/tests/specs/css/properties/long_values.css

@@ -0,0 +1,15 @@
+html {
+	font-family: system-ui, -apple-system;
+}
+
+body {
+	font-family: sans-serif, serif, system-ui;
+}
+
+div {
+	font-family: system-ui;
+}
+
+div {
+	box-shadow: 10px 10px 10px 10px rgb(10 18 30 / 12%), 12px 10px 10px 10px rgb(10 18 30 / 16%);
+}

crates/biome_css_formatter/tests/specs/css/properties/long_values.css.snap

@@ -0,0 +1,64 @@
+---
+source: crates/biome_formatter_test/src/snapshot_builder.rs
+info: css/properties/long_values.css
+---
+# Input
+
+```css
+html {
+	font-family: system-ui, -apple-system;
+}
+
+body {
+	font-family: sans-serif, serif, system-ui;
+}
+
+div {
+	font-family: system-ui;
+}
+
+div {
+	box-shadow: 10px 10px 10px 10px rgb(10 18 30 / 12%), 12px 10px 10px 10px rgb(10 18 30 / 16%);
+}
+
+```
+
+
+=============================
+
+# 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;
+}
+
+body {
+	font-family:
+		sans-serif,
+		serif,
+		system-ui;
+}
+
+div {
+	font-family: system-ui;
+}
+
+div {
+	box-shadow:
+		10px 10px 10px 10px rgb(10 18 30 / 12%),
+		12px 10px 10px 10px rgb(10 18 30 / 16%);
+}
+```