feat(format/html): attribute formatting

crates/biome_html_formatter/src/html/auxiliary/attribute.rs

@@ -1,10 +1,12 @@
 use crate::prelude::*;
-use biome_html_syntax::HtmlAttribute;
-use biome_rowan::AstNode;
+use biome_formatter::write;
+use biome_html_syntax::{HtmlAttribute, HtmlAttributeFields};
 #[derive(Debug, Clone, Default)]
 pub(crate) struct FormatHtmlAttribute;
 impl FormatNodeRule<HtmlAttribute> for FormatHtmlAttribute {
     fn fmt_fields(&self, node: &HtmlAttribute, f: &mut HtmlFormatter) -> FormatResult<()> {
-        format_verbatim_node(node.syntax()).fmt(f)
+        let HtmlAttributeFields { name, initializer } = node.as_fields();
+
+        write![f, [name.format(), initializer.format()]]
     }
 }

crates/biome_html_formatter/src/html/auxiliary/attribute_initializer_clause.rs

@@ -1,6 +1,6 @@
 use crate::prelude::*;
-use biome_html_syntax::HtmlAttributeInitializerClause;
-use biome_rowan::AstNode;
+use biome_formatter::write;
+use biome_html_syntax::{HtmlAttributeInitializerClause, HtmlAttributeInitializerClauseFields};
 #[derive(Debug, Clone, Default)]
 pub(crate) struct FormatHtmlAttributeInitializerClause;
 impl FormatNodeRule<HtmlAttributeInitializerClause> for FormatHtmlAttributeInitializerClause {
@@ -9,6 +9,8 @@ impl FormatNodeRule<HtmlAttributeInitializerClause> for FormatHtmlAttributeIniti
         node: &HtmlAttributeInitializerClause,
         f: &mut HtmlFormatter,
     ) -> FormatResult<()> {
-        format_verbatim_node(node.syntax()).fmt(f)
+        let HtmlAttributeInitializerClauseFields { eq_token, value } = node.as_fields();
+
+        write![f, [eq_token.format(), value.format()]]
     }
 }

crates/biome_html_formatter/src/html/auxiliary/opening_element.rs

@@ -12,15 +12,11 @@ impl FormatNodeRule<HtmlOpeningElement> for FormatHtmlOpeningElement {
             r_angle_token,
         } = node.as_fields();
 
-        write!(
-            f,
-            [
-                l_angle_token.format(),
-                name.format(),
-                attributes.format(),
-                r_angle_token.format(),
-            ]
-        )?;
+        write!(f, [l_angle_token.format(), name.format(),])?;
+        if attributes.len() > 0 {
+            write!(f, [space(), attributes.format()])?
+        }
+        write!(f, [r_angle_token.format()])?;
 
         Ok(())
     }

crates/biome_html_formatter/src/html/auxiliary/string.rs

@@ -1,10 +1,37 @@
 use crate::prelude::*;
-use biome_html_syntax::HtmlString;
-use biome_rowan::AstNode;
+use biome_formatter::{format_args, write};
+use biome_html_syntax::{HtmlString, HtmlStringFields};
 #[derive(Debug, Clone, Default)]
 pub(crate) struct FormatHtmlString;
 impl FormatNodeRule<HtmlString> for FormatHtmlString {
     fn fmt_fields(&self, node: &HtmlString, f: &mut HtmlFormatter) -> FormatResult<()> {
-        format_verbatim_node(node.syntax()).fmt(f)
+        let HtmlStringFields { value_token } = node.as_fields();
+
+        // Prettier always uses double quotes for HTML strings, regardless of configuration.
+        if let Ok(value) = value_token.as_ref() {
+            let value_text = value.text().trim();
+
+            if !(value_text.starts_with('"') && value_text.ends_with('"')) {
+                let range = if value_text.starts_with('\'') && value_text.ends_with('\'') {
+                    value.text_range().add_start(1.into()).sub_end(1.into())
+                } else {
+                    value.text_range()
+                };
+                write!(
+                    f,
+                    [format_replaced(
+                        value,
+                        &group(&format_args![
+                            text("\""),
+                            located_token_text(value, range),
+                            text("\""),
+                        ])
+                    )]
+                )?;
+                return Ok(());
+            }
+        }
+
+        write!(f, [value_token.format()])
     }
 }

crates/biome_html_formatter/src/html/lists/attribute_list.rs

@@ -1,10 +1,24 @@
 use crate::prelude::*;
+use biome_formatter::{write, AttributePosition};
 use biome_html_syntax::HtmlAttributeList;
 #[derive(Debug, Clone, Default)]
 pub(crate) struct FormatHtmlAttributeList;
 impl FormatRule<HtmlAttributeList> for FormatHtmlAttributeList {
     type Context = HtmlFormatContext;
     fn fmt(&self, node: &HtmlAttributeList, f: &mut HtmlFormatter) -> FormatResult<()> {
-        f.join().entries(node.iter().formatted()).finish()
+        let line_break = if f.options().attribute_position() == AttributePosition::Multiline {
+            hard_line_break()
+        } else {
+            soft_line_break_or_space()
+        };
+
+        write!(
+            f,
+            [&group(&soft_block_indent(&format_with(|f| {
+                f.join_with(&line_break)
+                    .entries(node.iter().formatted())
+                    .finish()
+            })))]
+        )
     }
 }

crates/biome_html_formatter/tests/quick_test.rs

@@ -13,13 +13,8 @@ mod language {
 #[test]
 // use this test check if your snippet prints as you wish, without using a snapshot
 fn quick_test() {
-    let src = r#"
-<div>
-    <p>hello
-    </p>
-</div>
-
-    "#;
+    let src =
+        r#"<div foo="bar" disabled class="w-full h-full bg-green text-white" id="foo"></div>"#;
     let source_type = HtmlFileSource::html();
     let tree = parse_html(src);
     let options = HtmlFormatOptions::new()

crates/biome_html_formatter/tests/specs/attributes-break.html

@@ -0,0 +1 @@
+<div foo="bar" disabled class="w-full h-full bg-green text-white" id="foo"></div>

crates/biome_html_formatter/tests/specs/attributes-break.html.snap

@@ -0,0 +1,33 @@
+---
+source: crates/biome_formatter_test/src/snapshot_builder.rs
+info: attributes-break.html
+---
+# Input
+
+```html
+<div foo="bar" disabled class="w-full h-full bg-green text-white" id="foo"></div>
+
+```
+
+
+=============================
+
+# Outputs
+
+## Output 1
+
+-----
+Indent style: Tab
+Indent width: 2
+Line ending: LF
+Line width: 80
+Attribute Position: Auto
+-----
+
+```html
+<div
+	foo="bar"
+	disabled
+	class="w-full h-full bg-green text-white"
+	id="foo"
+></div>```

crates/biome_html_formatter/tests/specs/attributes-no-break.html

@@ -0,0 +1 @@
+<div foo="bar" id="foo"></div>

crates/biome_html_formatter/tests/specs/attributes-no-break.html.snap

@@ -0,0 +1,28 @@
+---
+source: crates/biome_formatter_test/src/snapshot_builder.rs
+info: attributes-no-break.html
+---
+# Input
+
+```html
+<div foo="bar" id="foo"></div>
+
+```
+
+
+=============================
+
+# Outputs
+
+## Output 1
+
+-----
+Indent style: Tab
+Indent width: 2
+Line ending: LF
+Line width: 80
+Attribute Position: Auto
+-----
+
+```html
+<div foo="bar" id="foo"></div>```