fix(parser/css): :active-view-transition-type parameters should accept comma-separated custom identifiers

.changeset/strong-mails-raise.md

@@ -0,0 +1,5 @@
+---
+"@biomejs/biome": patch
+---
+
+Fixed [#8472](https://github.com/biomejs/biome/issues/8472): The CSS parser can now accept multiple comma separated parameters in `:active-view-transition-type`.

crates/biome_css_formatter/src/css/lists/custom_identifier_comma_separated_list.rs

@@ -0,0 +1,87 @@
+use crate::prelude::*;
+use biome_css_syntax::CssCustomIdentifierCommaSeparatedList;
+use biome_formatter::FormatRuleWithOptions;
+
+#[derive(Debug, Clone, Default)]
+pub(crate) struct FormatCssCustomIdentifierCommaSeparatedList {
+    layout: CssCustomIdentifierLayout,
+}
+
+#[derive(Debug, Clone, Copy, Default)]
+pub(crate) struct FormatCssCustomIdentifierCommaSeparatedListOptions {
+    pub(crate) layout: CssCustomIdentifierLayout,
+}
+
+impl FormatCssCustomIdentifierCommaSeparatedListOptions {
+    /// Sets the layout to format identifiers with soft line breaks (fluid layout).
+    pub(crate) fn with_fluid_layout(mut self) -> Self {
+        self.layout = CssCustomIdentifierLayout::Fluid;
+        self
+    }
+}
+
+/// Defines how a list of CSS custom identifiers should be formatted.
+///
+/// - [`OneLine`] — Formats all identifiers on a single line.
+/// - [`Fluid`] — Formats identifiers with soft line breaks, allowing wrapping when needed.
+///
+/// ## Examples
+///
+/// ```css
+/// /* OneLine */
+/// :active-view-transition-type(value1, value2, value3)
+///
+/// /* Fluid */
+/// :active-view-transition-type(value1, value2, value3)
+/// :active-view-transition-type(value1,
+///                              value2,
+///                              value3,
+///                              value4)
+/// ```
+#[derive(Debug, Clone, Copy, Default)]
+pub(crate) enum CssCustomIdentifierLayout {
+    #[default]
+    OneLine,
+    Fluid,
+}
+
+impl FormatRuleWithOptions<CssCustomIdentifierCommaSeparatedList>
+    for FormatCssCustomIdentifierCommaSeparatedList
+{
+    type Options = FormatCssCustomIdentifierCommaSeparatedListOptions;
+
+    fn with_options(mut self, options: Self::Options) -> Self {
+        self.layout = options.layout;
+        self
+    }
+}
+
+impl FormatRule<CssCustomIdentifierCommaSeparatedList>
+    for FormatCssCustomIdentifierCommaSeparatedList
+{
+    type Context = CssFormatContext;
+    fn fmt(
+        &self,
+        node: &CssCustomIdentifierCommaSeparatedList,
+        f: &mut CssFormatter,
+    ) -> FormatResult<()> {
+        match self.layout {
+            CssCustomIdentifierLayout::OneLine => {
+                let separator = space();
+                let mut joiner = f.join_with(&separator);
+                for formatted in node.format_separated(",") {
+                    joiner.entry(&formatted);
+                }
+                joiner.finish()
+            }
+            CssCustomIdentifierLayout::Fluid => {
+                let separator = soft_line_break_or_space();
+                let mut joiner = f.join_with(&separator);
+                for formatted in node.format_separated(",") {
+                    joiner.entry(&formatted);
+                }
+                joiner.finish()
+            }
+        }
+    }
+}

crates/biome_css_formatter/src/css/lists/custom_identifier_space_separated_list.rs

@@ -0,0 +1,48 @@
+use crate::{
+    css::lists::custom_identifier_comma_separated_list::CssCustomIdentifierLayout, prelude::*,
+};
+use biome_css_syntax::CssCustomIdentifierSpaceSeparatedList;
+use biome_formatter::FormatRuleWithOptions;
+
+#[derive(Debug, Clone, Default)]
+pub(crate) struct FormatCssCustomIdentifierSpaceSeparatedList {
+    layout: CssCustomIdentifierLayout,
+}
+
+#[derive(Debug, Clone, Copy, Default)]
+pub(crate) struct FormatCssCustomIdentifierSpaceSeparatedListOptions {
+    pub(crate) layout: CssCustomIdentifierLayout,
+}
+
+impl FormatRuleWithOptions<CssCustomIdentifierSpaceSeparatedList>
+    for FormatCssCustomIdentifierSpaceSeparatedList
+{
+    type Options = FormatCssCustomIdentifierSpaceSeparatedListOptions;
+
+    fn with_options(mut self, options: Self::Options) -> Self {
+        self.layout = options.layout;
+        self
+    }
+}
+
+impl FormatRule<CssCustomIdentifierSpaceSeparatedList>
+    for FormatCssCustomIdentifierSpaceSeparatedList
+{
+    type Context = CssFormatContext;
+    fn fmt(
+        &self,
+        node: &CssCustomIdentifierSpaceSeparatedList,
+        f: &mut CssFormatter,
+    ) -> FormatResult<()> {
+        match self.layout {
+            CssCustomIdentifierLayout::OneLine => f
+                .join_with(&space())
+                .entries(node.iter().formatted())
+                .finish(),
+            CssCustomIdentifierLayout::Fluid => f
+                .join_with(&soft_line_break_or_space())
+                .entries(node.iter().formatted())
+                .finish(),
+        }
+    }
+}

crates/biome_css_formatter/src/css/lists/mod.rs

@@ -4,7 +4,8 @@ pub(crate) mod bracketed_value_list;
 pub(crate) mod component_value_list;
 pub(crate) mod composes_class_list;
 pub(crate) mod compound_selector_list;
-pub(crate) mod custom_identifier_list;
+pub(crate) mod custom_identifier_comma_separated_list;
+pub(crate) mod custom_identifier_space_separated_list;
 pub(crate) mod declaration_list;
 pub(crate) mod declaration_or_at_rule_list;
 pub(crate) mod declaration_or_rule_list;

crates/biome_css_formatter/src/css/pseudo/pseudo_class_function_custom_identifier_list.rs

@@ -1,4 +1,4 @@
-use crate::css::lists::custom_identifier_list::FormatCssCustomIdentifierListOptions;
+use crate::css::lists::custom_identifier_comma_separated_list::FormatCssCustomIdentifierCommaSeparatedListOptions;
 use crate::css::value::identifier::FormatCssIdentifierOptions;
 use crate::prelude::*;
 use biome_css_syntax::{
@@ -30,9 +30,12 @@ impl FormatNodeRule<CssPseudoClassFunctionCustomIdentifierList>
                     .with_options(FormatCssIdentifierOptions::default().with_lowercasing()),
                 group(&format_args![
                     l_paren_token.format(),
-                    soft_block_indent(&items.format().with_options(
-                        FormatCssCustomIdentifierListOptions::default().with_fluid_layout()
-                    )),
+                    soft_block_indent(
+                        &items.format().with_options(
+                            FormatCssCustomIdentifierCommaSeparatedListOptions::default()
+                                .with_fluid_layout()
+                        )
+                    ),
                     r_paren_token.format()
                 ])
             ]

crates/biome_css_formatter/src/generated.rs

@@ -6840,29 +6840,28 @@ impl IntoFormat<CssFormatContext> for biome_css_syntax::CssCompoundSelectorList
         )
     }
 }
-impl AsFormat<CssFormatContext> for biome_css_syntax::CssCustomIdentifierList {
-    type Format<'a> = FormatRefWithRule<
-        'a,
-        biome_css_syntax::CssCustomIdentifierList,
-        crate::css::lists::custom_identifier_list::FormatCssCustomIdentifierList,
-    >;
+impl AsFormat<CssFormatContext> for biome_css_syntax::CssCustomIdentifierCommaSeparatedList {
+    type Format < 'a > = FormatRefWithRule < 'a , biome_css_syntax :: CssCustomIdentifierCommaSeparatedList , crate :: css :: lists :: custom_identifier_comma_separated_list :: FormatCssCustomIdentifierCommaSeparatedList > ;
     fn format(&self) -> Self::Format<'_> {
-        FormatRefWithRule::new(
-            self,
-            crate::css::lists::custom_identifier_list::FormatCssCustomIdentifierList::default(),
-        )
+        FormatRefWithRule :: new (self , crate :: css :: lists :: custom_identifier_comma_separated_list :: FormatCssCustomIdentifierCommaSeparatedList :: default ())
     }
 }
-impl IntoFormat<CssFormatContext> for biome_css_syntax::CssCustomIdentifierList {
-    type Format = FormatOwnedWithRule<
-        biome_css_syntax::CssCustomIdentifierList,
-        crate::css::lists::custom_identifier_list::FormatCssCustomIdentifierList,
-    >;
+impl IntoFormat<CssFormatContext> for biome_css_syntax::CssCustomIdentifierCommaSeparatedList {
+    type Format = FormatOwnedWithRule < biome_css_syntax :: CssCustomIdentifierCommaSeparatedList , crate :: css :: lists :: custom_identifier_comma_separated_list :: FormatCssCustomIdentifierCommaSeparatedList > ;
     fn into_format(self) -> Self::Format {
-        FormatOwnedWithRule::new(
-            self,
-            crate::css::lists::custom_identifier_list::FormatCssCustomIdentifierList::default(),
-        )
+        FormatOwnedWithRule :: new (self , crate :: css :: lists :: custom_identifier_comma_separated_list :: FormatCssCustomIdentifierCommaSeparatedList :: default ())
+    }
+}
+impl AsFormat<CssFormatContext> for biome_css_syntax::CssCustomIdentifierSpaceSeparatedList {
+    type Format < 'a > = FormatRefWithRule < 'a , biome_css_syntax :: CssCustomIdentifierSpaceSeparatedList , crate :: css :: lists :: custom_identifier_space_separated_list :: FormatCssCustomIdentifierSpaceSeparatedList > ;
+    fn format(&self) -> Self::Format<'_> {
+        FormatRefWithRule :: new (self , crate :: css :: lists :: custom_identifier_space_separated_list :: FormatCssCustomIdentifierSpaceSeparatedList :: default ())
+    }
+}
+impl IntoFormat<CssFormatContext> for biome_css_syntax::CssCustomIdentifierSpaceSeparatedList {
+    type Format = FormatOwnedWithRule < biome_css_syntax :: CssCustomIdentifierSpaceSeparatedList , crate :: css :: lists :: custom_identifier_space_separated_list :: FormatCssCustomIdentifierSpaceSeparatedList > ;
+    fn into_format(self) -> Self::Format {
+        FormatOwnedWithRule :: new (self , crate :: css :: lists :: custom_identifier_space_separated_list :: FormatCssCustomIdentifierSpaceSeparatedList :: default ())
     }
 }
 impl AsFormat<CssFormatContext> for biome_css_syntax::CssDeclarationList {