fix(format/html): make element children break if attributes break

biomejs · Feb 6, 2025 · a90247b · a90247b
1 parent feda489
commit a90247b
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 9 deletions.
diff --git a/crates/biome_html_formatter/src/html/auxiliary/element.rs b/crates/biome_html_formatter/src/html/auxiliary/element.rs
@@ -103,9 +103,11 @@ impl FormatNodeRule<HtmlElement> for FormatHtmlElement {
             None
         };
 
+        let attr_group_id = f.group_id("element-attr-group-id");
         FormatNodeRule::fmt(
             &FormatHtmlOpeningElement::default().with_options(FormatHtmlOpeningElementOptions {
                 r_angle_is_borrowed: borrowed_r_angle.is_some(),
+                attr_group_id,
             }),
             &opening_element,
             f,
@@ -130,10 +132,16 @@ impl FormatNodeRule<HtmlElement> for FormatHtmlElement {
                 } => {
                     write!(
                         f,
-                        [best_fitting![
-                            format_args![flat_children],
-                            format_args![expanded_children]
-                        ]]
+                        [
+                            // If the attribute group breaks, prettier always breaks the children as well.
+                            &if_group_breaks(&expanded_children).with_group_id(Some(attr_group_id)),
+                            // If the attribute group does NOT break, print whatever fits best for the children.
+                            &if_group_fits_on_line(&best_fitting![
+                                format_args![flat_children],
+                                format_args![expanded_children]
+                            ])
+                            .with_group_id(Some(attr_group_id)),
+                        ]
                     )?;
                 }
             }

diff --git a/crates/biome_html_formatter/src/html/auxiliary/opening_element.rs b/crates/biome_html_formatter/src/html/auxiliary/opening_element.rs
@@ -1,5 +1,5 @@
 use crate::prelude::*;
-use biome_formatter::{write, FormatRuleWithOptions};
+use biome_formatter::{write, FormatRuleWithOptions, GroupId};
 use biome_html_syntax::{HtmlOpeningElement, HtmlOpeningElementFields};
 #[derive(Debug, Clone, Default)]
 pub(crate) struct FormatHtmlOpeningElement {
@@ -11,18 +11,23 @@ pub(crate) struct FormatHtmlOpeningElement {
     /// [FormatHtmlElementList]: crate::html::lists::element_list::FormatHtmlElementList
     /// [HtmlElementList]: biome_html_syntax::HtmlElementList
     r_angle_is_borrowed: bool,
+
+    attr_group_id: Option<GroupId>,
 }
 
 pub(crate) struct FormatHtmlOpeningElementOptions {
     /// Whether or not the r_angle is borrowed, and therefore managed by a different formatter.
     pub r_angle_is_borrowed: bool,
+
+    pub attr_group_id: GroupId,
 }
 
 impl FormatRuleWithOptions<HtmlOpeningElement> for FormatHtmlOpeningElement {
     type Options = FormatHtmlOpeningElementOptions;
 
     fn with_options(mut self, options: Self::Options) -> Self {
         self.r_angle_is_borrowed = options.r_angle_is_borrowed;
+        self.attr_group_id = Some(options.attr_group_id);
         self
     }
 }
@@ -39,7 +44,6 @@ impl FormatNodeRule<HtmlOpeningElement> for FormatHtmlOpeningElement {
         let bracket_same_line = f.options().bracket_same_line().value();
         write!(f, [l_angle_token.format(), name.format()])?;
 
-        let attr_group_id = f.group_id("element-attr-group-id");
         write!(
             f,
             [&group(&format_with(|f| {
@@ -58,7 +62,7 @@ impl FormatNodeRule<HtmlOpeningElement> for FormatHtmlOpeningElement {
                 }
                 Ok(())
             }))
-            .with_group_id(Some(attr_group_id))]
+            .with_group_id(self.attr_group_id)]
         )?;
 
         Ok(())

diff --git a/crates/biome_html_formatter/tests/specs/html/elements/bracket-same-line/element.html.snap b/crates/biome_html_formatter/tests/specs/html/elements/bracket-same-line/element.html.snap
@@ -42,7 +42,9 @@ Indent script and style: false
 	style="color: red"
 	data-foo="bar"
 	data-bar="foo"
->hello world</div>
+>
+	hello world
+</div>
 ```
 
 ## Output 1
@@ -64,5 +66,7 @@ Indent script and style: false
 	class="world really-long-class-name another-really-long-class-name"
 	style="color: red"
 	data-foo="bar"
-	data-bar="foo">hello world</div>
+	data-bar="foo">
+	hello world
+</div>
 ```