From 1c799957ba342cabfd8a24b6d9d52e4b6ac21ec2 Mon Sep 17 00:00:00 2001 From: Carson McManus Date: Mon, 3 Feb 2025 16:15:41 -0500 Subject: [PATCH] fix(format/html): make element children break if attributes break --- .../src/html/auxiliary/element.rs | 16 ++++++--- .../src/html/auxiliary/opening_element.rs | 10 ++++-- .../bracket-same-line/element.html.snap | 8 +++-- .../tags-dont-hug-content-2.html.snap.new | 35 +++++++++++++++++++ .../tags-dont-hug-content.html.snap.new | 33 +++++++++++++++++ .../specs/html/long-content.html.snap.new | 33 +++++++++++++++++ 6 files changed, 126 insertions(+), 9 deletions(-) create mode 100644 crates/biome_html_formatter/tests/specs/html/elements/inline/tags-dont-hug-content-2.html.snap.new create mode 100644 crates/biome_html_formatter/tests/specs/html/elements/inline/tags-dont-hug-content.html.snap.new create mode 100644 crates/biome_html_formatter/tests/specs/html/long-content.html.snap.new diff --git a/crates/biome_html_formatter/src/html/auxiliary/element.rs b/crates/biome_html_formatter/src/html/auxiliary/element.rs index 6e4100e77c17..9e900080d534 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)), + // Otherwise, we can do 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..e97ea64768f9 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::{group_id::DebugGroupId, write, FormatRuleWithOptions}; 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: DebugGroupId, } 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 + ``` diff --git a/crates/biome_html_formatter/tests/specs/html/elements/inline/tags-dont-hug-content-2.html.snap.new b/crates/biome_html_formatter/tests/specs/html/elements/inline/tags-dont-hug-content-2.html.snap.new new file mode 100644 index 000000000000..896070e0d227 --- /dev/null +++ b/crates/biome_html_formatter/tests/specs/html/elements/inline/tags-dont-hug-content-2.html.snap.new @@ -0,0 +1,35 @@ +--- +source: crates/biome_formatter_test/src/snapshot_builder.rs +assertion_line: 211 +info: elements/inline/tags-dont-hug-content-2.html +--- +# Input + +```html + + asdfasdf foo bar things much more longer things lorem ipsum or something idk i put pineapple in strombolis + + +``` + + +============================= + +# Outputs + +## Output 1 + +----- +Indent style: Tab +Indent width: 2 +Line ending: LF +Line width: 80 +Attribute Position: Auto +Bracket same line: false +Whitespace sensitivity: css +Indent script and style: false +----- + +```html + +``` diff --git a/crates/biome_html_formatter/tests/specs/html/elements/inline/tags-dont-hug-content.html.snap.new b/crates/biome_html_formatter/tests/specs/html/elements/inline/tags-dont-hug-content.html.snap.new new file mode 100644 index 000000000000..a9195340c2dd --- /dev/null +++ b/crates/biome_html_formatter/tests/specs/html/elements/inline/tags-dont-hug-content.html.snap.new @@ -0,0 +1,33 @@ +--- +source: crates/biome_formatter_test/src/snapshot_builder.rs +assertion_line: 211 +info: elements/inline/tags-dont-hug-content.html +--- +# Input + +```html + asdfasdf foo bar things much more longer things lorem ipsum or something idk i put pineapple in strombolis + +``` + + +============================= + +# Outputs + +## Output 1 + +----- +Indent style: Tab +Indent width: 2 +Line ending: LF +Line width: 80 +Attribute Position: Auto +Bracket same line: false +Whitespace sensitivity: css +Indent script and style: false +----- + +```html + +``` diff --git a/crates/biome_html_formatter/tests/specs/html/long-content.html.snap.new b/crates/biome_html_formatter/tests/specs/html/long-content.html.snap.new new file mode 100644 index 000000000000..a7e486bc3317 --- /dev/null +++ b/crates/biome_html_formatter/tests/specs/html/long-content.html.snap.new @@ -0,0 +1,33 @@ +--- +source: crates/biome_formatter_test/src/snapshot_builder.rs +assertion_line: 211 +info: long-content.html +--- +# Input + +```html +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dapibus velit non justo tempus pretium. Praesent orci lorem, pellentesque sit amet ullamcorper sed, consectetur quis odio. In felis nulla, pellentesque a dolor eget, semper vestibulum nisi. Sed imperdiet dui a massa placerat ullamcorper. Praesent eleifend purus eget arcu faucibus, ac fringilla nulla aliquet. Aliquam id accumsan libero. Duis efficitur nisi quis massa mollis ultricies. Sed condimentum sit amet urna in cursus. Ut id tortor vestibulum, mollis enim sed, ornare ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut nec dapibus est. Maecenas orci purus, blandit eu faucibus eu, lacinia id turpis.
+ +``` + + +============================= + +# Outputs + +## Output 1 + +----- +Indent style: Tab +Indent width: 2 +Line ending: LF +Line width: 80 +Attribute Position: Auto +Bracket same line: false +Whitespace sensitivity: css +Indent script and style: false +----- + +```html +
+```