feat(css_formatter): ValueListLayout::SingleValue (#2226)

crates/biome_css_formatter/src/utils/component_value_list.rs

@@ -13,24 +13,43 @@ where
     I: AstNode<Language = CssLanguage> + IntoFormat<CssFormatContext>,
 {
     let layout = get_value_list_layout(node, f.context().comments());
+    let values = format_with(|f: &mut Formatter<'_, CssFormatContext>| {
+        f.fill()
+            .entries(&soft_line_break_or_space(), node.iter().formatted())
+            .finish()
+    });
 
     match layout {
         ValueListLayout::Fill => {
-            let values = format_with(|f: &mut Formatter<'_, CssFormatContext>| {
-                f.fill()
-                    .entries(&soft_line_break_or_space(), node.iter().formatted())
-                    .finish()
-            });
-
             write!(f, [group(&indent(&values))])
         }
+        ValueListLayout::SingleValue => {
+            write!(f, [values])
+        }
         // TODO: Add formatting for one-per-line once comma-separated lists are supported.
         ValueListLayout::OnePerLine => write!(f, [format_verbatim_node(node.syntax())]),
     }
 }
 
 #[derive(Copy, Clone, Debug)]
 pub(crate) enum ValueListLayout {
+    /// Ensures the usage of a singular, consistent value.
+    ///
+    /// ```css
+    /// :root {
+    ///     --bs-gradient: linear-gradient(
+    ///         180deg,
+    ///         180deg,
+    ///         180deg,
+    ///         180deg,
+    ///         180deg,
+    ///         180deg,
+    ///         180deg
+    ///     );
+    /// }
+    /// ```
+    SingleValue,
+
     /// Tries to fit as many values on a single line as possible, then wraps
     /// and indents the next line to keep filling on that line, and so on.
     ///
@@ -60,11 +79,15 @@ pub(crate) enum ValueListLayout {
 /// Until the parser supports comma-separated lists, this will always return
 /// [ValueListLayout::Fill], since all space-separated lists are intentionally
 /// printed compactly.
-pub(crate) fn get_value_list_layout<N, I>(_list: &N, _: &CssComments) -> ValueListLayout
+pub(crate) fn get_value_list_layout<N, I>(list: &N, _: &CssComments) -> ValueListLayout
 where
     N: AstNodeList<Language = CssLanguage, Node = I> + AstNode<Language = CssLanguage>,
     I: AstNode<Language = CssLanguage> + IntoFormat<CssFormatContext>,
 {
     // TODO: Check for comments, check for the types of elements in the list, etc.
-    ValueListLayout::Fill
+    if list.len() == 1 {
+        ValueListLayout::SingleValue
+    } else {
+        ValueListLayout::Fill
+    }
 }

crates/biome_css_formatter/tests/quick_test.rs

@@ -13,8 +13,16 @@ mod language {
 // use this test check if your snippet prints as you wish, without using a snapshot
 fn quick_test() {
     let src = r#"
-.foo {
-    transform: translate(/* comment 9 */ 10px);
+:root {
+		--bs-gradient: linear-gradient(
+			180deg,
+          180deg,
+          180deg,
+          180deg,
+          180deg,
+          180deg,
+          180deg
+		);
 }
 
 "#;

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

@@ -2,7 +2,6 @@
 source: crates/biome_formatter_test/src/snapshot_builder.rs
 info: css/atrule/font_face.css
 ---
-
 # Input
 
 ```css
@@ -145,5 +144,3 @@ Quote style: Double Quotes
 		url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
 }
 ```
-
-

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

@@ -2,7 +2,6 @@
 source: crates/biome_formatter_test/src/snapshot_builder.rs
 info: css/functions.css
 ---
-
 # Input
 
 ```css
@@ -40,26 +39,24 @@ div {
 	color: rgba(255, 255, 255, 1);
 	color: rgba(0, 1, 255, 1);
 	color: arbitrary(
-			really long list,
-			of complex parameter values,
-			each one on its own line
-		);
+		really long list,
+		of complex parameter values,
+		each one on its own line
+	);
 	color: more-arbitrary(
-			just,
-			has,
-			lots,
-			of,
-			individual,
-			parameters,
-			breaking,
-			over,
-			lines
-		);
+		just,
+		has,
+		lots,
+		of,
+		individual,
+		parameters,
+		breaking,
+		over,
+		lines
+	);
 	color: arbitrary(
-			one really long parameter value that itself will break over multiple lines
-				and fill together
-		);
+		one really long parameter value that itself will break over multiple lines
+			and fill together
+	);
 }
 ```
-
-

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

@@ -2,11 +2,23 @@ div {
     all: InItial;
     all  : inherIT;
     all
-    : 
+    :
     revert-layer
     ;
 
     all  :   unknown-value  ;
     all  : a,
     value list ;
-}
+}
+
+:root {
+	--bs-gradient: linear-gradient(
+		180deg,
+		180deg,
+		180deg,
+		180deg,
+		180deg,
+		180deg,
+		180deg
+	);
+}

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

@@ -2,22 +2,34 @@
 source: crates/biome_formatter_test/src/snapshot_builder.rs
 info: css/properties/all.css
 ---
-
 # Input
 
 ```css
 div {
     all: InItial;
     all  : inherIT;
     all
-    : 
+    :
     revert-layer
     ;
 
     all  :   unknown-value  ;
     all  : a,
     value list ;
 }
+
+:root {
+	--bs-gradient: linear-gradient(
+		180deg,
+		180deg,
+		180deg,
+		180deg,
+		180deg,
+		180deg,
+		180deg
+	);
+}
+
 ```
 
 
@@ -44,6 +56,16 @@ div {
 	all: unknown-value;
 	all: a , value list;
 }
-```
-
 
+:root {
+	--bs-gradient: linear-gradient(
+		180deg,
+		180deg,
+		180deg,
+		180deg,
+		180deg,
+		180deg,
+		180deg
+	);
+}
+```

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

@@ -2,7 +2,6 @@
 source: crates/biome_formatter_test/src/snapshot_builder.rs
 info: css/url.css
 ---
-
 # Input
 
 ```css
@@ -71,5 +70,3 @@ a {
 ```
    10: 		url(RobotoFlex-VariableFont_GRAD,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf);
 ```
-
-

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

@@ -2,7 +2,6 @@
 source: crates/biome_formatter_test/src/snapshot_builder.rs
 info: css/value_fill.css
 ---
-
 # Input
 
 ```css
@@ -33,5 +32,3 @@ div {
 		going forever onward intothenight;
 }
 ```
-
-

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

@@ -2,7 +2,6 @@
 source: crates/biome_formatter_test/src/snapshot_builder.rs
 info: css/variables.css
 ---
-
 # Input
 
 ```css
@@ -83,9 +82,9 @@ Quote style: Double Quotes
 	prop4: var(--prop, pink);
 
 	prop5: var(
-			--one-var-thats-super-long-on-its-own,
-			--super-long-just-enough-to-make-it-break-over-lines
-		);
+		--one-var-thats-super-long-on-its-own,
+		--super-long-just-enough-to-make-it-break-over-lines
+	);
 }
 
 .multiple {
@@ -95,5 +94,3 @@ Quote style: Double Quotes
 	prop: hsl(var(--hue, 0) var(--sat, 100) var(--light, 1));
 }
 ```
-
-

crates/biome_css_formatter/tests/specs/prettier/css/atrule/font-face.css.snap

@@ -2,7 +2,6 @@
 source: crates/biome_formatter_test/src/snapshot_builder.rs
 info: css/atrule/font-face.css
 ---
-
 # Input
 
 ```css
@@ -185,5 +184,3 @@ format(
     url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
 }
 ```
-
-