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
+
```