feat(css_formatter): expand compound SCSS variable lists (#10577)

Author: denbezrukov

crates/biome_css_formatter/src/utils/scss_list_layout.rs

@@ -4,8 +4,9 @@ use crate::utils::scss_closing_comments::{
     ClosingCommentSpacing, owns_include_closing_comments, write_include_closing_comments,
 };
 use biome_css_syntax::{
-    ScssExpression, ScssListExpression, ScssListExpressionElementList, ScssListExpressionFields,
-    ScssModuleConfiguration, ScssParenthesizedExpression, is_in_scss_include_arguments,
+    ScssExpression, ScssExpressionItemList, ScssListExpression, ScssListExpressionElement,
+    ScssListExpressionElementList, ScssListExpressionFields, ScssModuleConfiguration,
+    ScssParenthesizedExpression, ScssVariableDeclaration, is_in_scss_include_arguments,
     is_scss_map_key, is_scss_map_outer_parenthesized_value_list,
     scss_include_keyword_argument_owner, single_expression_item, unwrap_single_expression_item,
 };
@@ -71,6 +72,19 @@ impl<'a> ScssListLayout<'a> {
             return write!(f, [group(&format_args![elements.format()])]);
         }
 
+        if is_compound_variable_list(self.node, &elements) {
+            // Print `$buttonConfig:
+            //   "save" 50px,
+            //   "cancel" 50px;`.
+            return write!(
+                f,
+                [
+                    group(&indent(&format_args![soft_line_break(), elements.format()]))
+                        .should_expand(true)
+                ]
+            );
+        }
+
         write!(
             f,
             [group(&indent(&format_args![
@@ -233,6 +247,38 @@ fn is_include_keyword_list_value_expanded_by_comments(
     has_trailing_comment || has_keyword_closing_comments
 }
 
+/// Detects `$buttonConfig: "save" 50px, "cancel" 50px;`.
+fn is_compound_variable_list(
+    node: &ScssListExpression,
+    elements: &ScssListExpressionElementList,
+) -> bool {
+    is_scss_variable_value_list(node) && elements.len() > 1 && has_compound_list_element(elements)
+}
+
+/// Checks that the list is the value in `$buttonConfig: "save" 50px, "cancel" 50px;`.
+fn is_scss_variable_value_list(node: &ScssListExpression) -> bool {
+    node.parent::<ScssExpressionItemList>()
+        .and_then(|items| items.parent::<ScssExpression>())
+        .and_then(|expression| expression.parent::<ScssVariableDeclaration>())
+        .is_some()
+}
+
+/// Checks for list items like `"save" 50px`.
+fn has_compound_list_element(elements: &ScssListExpressionElementList) -> bool {
+    elements
+        .iter()
+        .any(|element| element.as_ref().is_ok_and(is_compound_list_element))
+}
+
+/// Checks whether `"save" 50px` has multiple values.
+fn is_compound_list_element(element: &ScssListExpressionElement) -> bool {
+    element.value().ok().is_some_and(|value| {
+        value
+            .as_scss_expression()
+            .is_some_and(|expression| expression.items().len() > 1)
+    })
+}
+
 /// Detects the list in `@use "x" with ($family: (a, b))`.
 fn is_module_configuration_parenthesized_list_value(node: &ScssListExpression) -> bool {
     let Some(parenthesized) = node

crates/biome_css_formatter/tests/specs/prettier/scss/interpolation/3943.scss.snap

@@ -1,5 +1,6 @@
 ---
 source: crates/biome_formatter_test/src/snapshot_builder.rs
+assertion_line: 249
 info: scss/interpolation/3943.scss
 ---
 
@@ -149,18 +150,6 @@ $icons: wifi "\600", wifi-hotspot "\601", weather "\602";
    content: "I have #{8 + 2} books on SASS!";
    border: #{$var} #{$var} #{$var};
    filter: #{$var}#{$var}#{$var};
-@@ -66,10 +67,7 @@
-   }
- }
- 
--$icons:
--  wifi "\600",
--  wifi-hotspot "\601",
--  weather "\602";
-+$icons: wifi "\600", wifi-hotspot "\601", weather "\602";
- 
- @each $icon in $icons {
-   .icon-#{nth($icon, 1)},
 ```
 
 # Output
@@ -235,7 +224,10 @@ $foundation-dir: "foundation";
   }
 }
 
-$icons: wifi "\600", wifi-hotspot "\601", weather "\602";
+$icons:
+  wifi "\600",
+  wifi-hotspot "\601",
+  weather "\602";
 
 @each $icon in $icons {
   .icon-#{nth($icon, 1)},