diff --git a/crates/biome_html_formatter/src/html/auxiliary/element.rs b/crates/biome_html_formatter/src/html/auxiliary/element.rs index 6e4100e77c17..44dc1badb402 100644 --- 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 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 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 index 89139c86ecae..cbe358a06780 100644 --- 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,11 +11,15 @@ 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, } 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 for FormatHtmlOpeningElement { @@ -23,6 +27,7 @@ impl FormatRuleWithOptions for FormatHtmlOpeningElement { 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 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 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 index e9346ea33517..811febbd8084 100644 --- 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 +> + hello world + ``` ## 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 + data-bar="foo"> + hello world + ```