fix(format/html): preserve whitespace between a HtmlSingleTextExpression/HtmlElement and HtmlContent

Author: dyc3

.changeset/evil-fans-live.md

@@ -0,0 +1,10 @@
+---
+"@biomejs/biome": patch
+---
+
+Fixed [#8584](https://github.com/biomejs/biome/issues/8584): The HTML formatter will preserve whitespace after expressions, which now matches Svelte's Prettier plugin.
+
+```diff
+- <h1>Hello, {framework}and Svelte!</h1>
++ <h1>Hello, {framework} and Svelte!</h1>
+```

crates/biome_html_formatter/src/utils/children.rs

@@ -396,6 +396,29 @@ where
             } else {
                 builder.entry(HtmlChild::NonText(child.clone()));
             }
+
+            // Check for trailing whitespace on embedded content elements (e.g., after `}` in `{framework} `)
+            // This preserves spaces between expressions/elements and following text content.
+            if matches!(
+                &child,
+                AnyHtmlElement::AnyHtmlContent(_)
+                    | AnyHtmlElement::HtmlElement(_)
+                    | AnyHtmlElement::HtmlSelfClosingElement(_)
+            ) && let Some(last_token) = child.syntax().last_token()
+                && last_token.has_trailing_whitespace()
+            {
+                // Check if trailing trivia contains a newline
+                let has_newline = last_token
+                    .trailing_trivia()
+                    .pieces()
+                    .any(|piece| piece.is_newline());
+                if has_newline {
+                    builder.entry(HtmlChild::Newline);
+                } else {
+                    builder.entry(HtmlChild::Whitespace);
+                }
+            }
+
             prev_child_was_content = false;
         }
     }

crates/biome_html_formatter/tests/specs/html/elements/inline/mixed-block-inline.html.snap

@@ -1,7 +1,6 @@
 ---
 source: crates/biome_formatter_test/src/snapshot_builder.rs
 info: elements/inline/mixed-block-inline.html
-snapshot_kind: text
 ---
 # Input
 
@@ -30,11 +29,8 @@ Self close void elements: never
 
 ```html
 <span>
-	hello <a>foo</a> <a>foo</a>
-	<div>foo</div>
-	<a>foo</a> <a>foo</a> <a>foo</a> <b>bar</b><b>bar</b><b>bar</b> <a>foo</a>
-	<a>foo</a> <a>foo</a>
-	<div>foo</div>
+	hello <a>foo</a> <a>foo</a> <div>foo</div> <a>foo</a> <a>foo</a> <a>foo</a>
+	<b>bar</b><b>bar</b><b>bar</b> <a>foo</a> <a>foo</a> <a>foo</a> <div>foo</div>
 	<a>foo</a> <a>foo</a>
 </span>
 ```

crates/biome_html_formatter/tests/specs/html/elements/inline/tags-hug-content-longer-w-attr.html.snap

@@ -1,7 +1,6 @@
 ---
 source: crates/biome_formatter_test/src/snapshot_builder.rs
 info: elements/inline/tags-hug-content-longer-w-attr.html
-snapshot_kind: text
 ---
 # Input
 
@@ -30,7 +29,7 @@ Self close void elements: never
 
 ```html
 <b class="really long really long really long really long really long"
-	>asdfasdf foo bar things <i>much more</i>longer things lorem ipsum or
+	>asdfasdf foo bar things <i>much more</i> longer things lorem ipsum or
 	something idk i put pineapple in strombolis</b
 >
 ```

crates/biome_html_formatter/tests/specs/html/svelte/each_with_destructuring.svelte.snap

@@ -48,7 +48,7 @@ Self close void elements: never
 {/each}
 
 {#each users as { name, email }, i}
-	<div>{i}: {name}({email})</div>
+	<div>{i}: {name} ({email})</div>
 {/each}
 
 {#each products as [id, title]}

crates/biome_html_formatter/tests/specs/html/svelte/whitespace/issue-8584-w-newline.svelte

@@ -0,0 +1,8 @@
+<script>
+	const framework = "Astro";
+</script>
+
+<h1>
+	Hello, {framework}
+	and Svelte!
+</h1>

crates/biome_html_formatter/tests/specs/html/svelte/whitespace/issue-8584-w-newline.svelte.snap

@@ -0,0 +1,53 @@
+---
+source: crates/biome_formatter_test/src/snapshot_builder.rs
+info: svelte/whitespace/issue-8584-w-newline.svelte
+---
+# Input
+
+```svelte
+<script>
+	const framework = "Astro";
+</script>
+
+<h1>
+	Hello, {framework}
+	and Svelte!
+</h1>
+
+```
+
+
+=============================
+
+# 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
+Self close void elements: never
+-----
+
+```svelte
+<script>
+	const framework = "Astro";
+</script>
+
+<h1>
+	Hello, {framework}
+	and Svelte!
+</h1>
+```
+
+
+
+## Unimplemented nodes/tokens
+
+"\n\tconst framework = \"Astro\";\n" => 8..37

crates/biome_html_formatter/tests/specs/html/svelte/whitespace/issue-8584.svelte

@@ -0,0 +1,5 @@
+<script>
+	const framework = "Astro";
+</script>
+
+<h1>Hello, {framework} and Svelte!</h1>

crates/biome_html_formatter/tests/specs/html/svelte/whitespace/issue-8584.svelte.snap

@@ -0,0 +1,47 @@
+---
+source: crates/biome_formatter_test/src/snapshot_builder.rs
+info: svelte/whitespace/issue-8584.svelte
+---
+# Input
+
+```svelte
+<script>
+	const framework = "Astro";
+</script>
+
+<h1>Hello, {framework} and Svelte!</h1>
+
+```
+
+
+=============================
+
+# 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
+Self close void elements: never
+-----
+
+```svelte
+<script>
+	const framework = "Astro";
+</script>
+
+<h1>Hello, {framework} and Svelte!</h1>
+```
+
+
+
+## Unimplemented nodes/tokens
+
+"\n\tconst framework = \"Astro\";\n" => 8..37

crates/biome_html_formatter/tests/specs/html/whitespace/preserve-newline-after-element.html

@@ -0,0 +1,4 @@
+<p>
+	<span>Foo</span>
+	Bar
+</p>