From ba1d8312a18cdc5d9ddadd55fe90c69de5a041a6 Mon Sep 17 00:00:00 2001
From: Carson McManus <carson.mcmanus1@gmail.com>
Date: Mon, 22 Dec 2025 14:36:08 -0500
Subject: [PATCH] fix(format/html): add space before `/>`

---
 .changeset/rotten-pans-ring.md                | 10 +++++
 .../html/auxiliary/self_closing_element.rs    |  8 +++-
 .../astro-component-casing.astro.snap         |  4 +-
 .../large-self-closing.svelte                 |  6 +++
 .../large-self-closing.svelte.snap            | 43 +++++++++++++++++++
 .../svelte-component-casing.svelte.snap       |  6 +--
 .../vue-component-casing.vue.snap             |  4 +-
 .../svelte/await_dynamic_import.svelte.snap   |  2 +-
 .../specs/html/vue/event-with-colon.vue.snap  |  2 +-
 .../tests/specs/html/vue/issue-8174.vue.snap  |  4 +-
 10 files changed, 76 insertions(+), 13 deletions(-)
 create mode 100644 .changeset/rotten-pans-ring.md
 create mode 100644 crates/biome_html_formatter/tests/specs/html/component-frameworks/large-self-closing.svelte
 create mode 100644 crates/biome_html_formatter/tests/specs/html/component-frameworks/large-self-closing.svelte.snap

diff --git a/.changeset/rotten-pans-ring.md b/.changeset/rotten-pans-ring.md
new file mode 100644
index 000000000000..2f4d99ca4564
--- /dev/null
+++ b/.changeset/rotten-pans-ring.md
@@ -0,0 +1,10 @@
+---
+"@biomejs/biome": patch
+---
+
+Fixed an issue with the HTML formatter where it wouldn't add a space before the `/>` in self closing elements. This brings the HTML formatter more in line with Prettier.
+
+```diff
+-<Component/>
++<Component />
+```
diff --git a/crates/biome_html_formatter/src/html/auxiliary/self_closing_element.rs b/crates/biome_html_formatter/src/html/auxiliary/self_closing_element.rs
index db1694a42da6..d250ffe28b80 100644
--- a/crates/biome_html_formatter/src/html/auxiliary/self_closing_element.rs
+++ b/crates/biome_html_formatter/src/html/auxiliary/self_closing_element.rs
@@ -56,9 +56,9 @@ impl FormatNodeRule<HtmlSelfClosingElement> for FormatHtmlSelfClosingElement {
                     // To resolve this, these tokens either need to be passed to or deferred to sibling text elements when
                     // whitespace sensitivity would require it.
                     if slash_token.is_some() {
-                        write!(f, [slash_token.format()])?;
+                        write!(f, [if_group_fits_on_line(&space()), slash_token.format()])?;
                     } else {
-                        write!(f, [token("/")])?;
+                        write!(f, [if_group_fits_on_line(&space()), token("/")])?;
                     }
                 }
                 // We remove the slash only from void elements
@@ -67,6 +67,10 @@ impl FormatNodeRule<HtmlSelfClosingElement> for FormatHtmlSelfClosingElement {
                         write!(f, [format_removed(slash_token)])?;
                     }
                 } else {
+                    if slash_token.is_some() {
+                        // only add a space before the slash if it exists.
+                        write!(f, [space()])?;
+                    }
                     write!(f, [slash_token.format()])?;
                 }
 
diff --git a/crates/biome_html_formatter/tests/specs/html/component-frameworks/astro-component-casing.astro.snap b/crates/biome_html_formatter/tests/specs/html/component-frameworks/astro-component-casing.astro.snap
index 7b69b59a43b4..0b398e097ef0 100644
--- a/crates/biome_html_formatter/tests/specs/html/component-frameworks/astro-component-casing.astro.snap
+++ b/crates/biome_html_formatter/tests/specs/html/component-frameworks/astro-component-casing.astro.snap
@@ -42,8 +42,8 @@ import Button from './Button.astro';
 import TextInput from './TextInput.astro';
 ---
 
-<Button label="test button"/>
-<TextInput placeholder="enter text"/>
+<Button label="test button" />
+<TextInput placeholder="enter text" />
 <button>native button</button>
 <input type="text">
 ```
diff --git a/crates/biome_html_formatter/tests/specs/html/component-frameworks/large-self-closing.svelte b/crates/biome_html_formatter/tests/specs/html/component-frameworks/large-self-closing.svelte
new file mode 100644
index 000000000000..b7a5bf30a9cb
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/html/component-frameworks/large-self-closing.svelte
@@ -0,0 +1,6 @@
+<Button
+	label="test button"
+	variant="primary"
+	size="lg"
+	class="text-2xl bg-amber-600 font-bold"
+/>
diff --git a/crates/biome_html_formatter/tests/specs/html/component-frameworks/large-self-closing.svelte.snap b/crates/biome_html_formatter/tests/specs/html/component-frameworks/large-self-closing.svelte.snap
new file mode 100644
index 000000000000..4255bbd38b12
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/html/component-frameworks/large-self-closing.svelte.snap
@@ -0,0 +1,43 @@
+---
+source: crates/biome_formatter_test/src/snapshot_builder.rs
+info: component-frameworks/large-self-closing.svelte
+---
+# Input
+
+```svelte
+<Button
+	label="test button"
+	variant="primary"
+	size="lg"
+	class="text-2xl bg-amber-600 font-bold"
+/>
+
+```
+
+
+=============================
+
+# 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
+<Button
+	label="test button"
+	variant="primary"
+	size="lg"
+	class="text-2xl bg-amber-600 font-bold"
+/>
+```
diff --git a/crates/biome_html_formatter/tests/specs/html/component-frameworks/svelte-component-casing.svelte.snap b/crates/biome_html_formatter/tests/specs/html/component-frameworks/svelte-component-casing.svelte.snap
index 00e178b7cea3..e5c3b7d8549e 100644
--- a/crates/biome_html_formatter/tests/specs/html/component-frameworks/svelte-component-casing.svelte.snap
+++ b/crates/biome_html_formatter/tests/specs/html/component-frameworks/svelte-component-casing.svelte.snap
@@ -46,9 +46,9 @@ Self close void elements: never
   import Select from './Select.svelte';
 </script>
 
-<Button label="test button"/>
-<TextInput placeholder="enter text"/>
-<Select options={['a', 'b']}/>
+<Button label="test button" />
+<TextInput placeholder="enter text" />
+<Select options={['a', 'b']} />
 <button>native button</button>
 <input type="text">
 <select>
diff --git a/crates/biome_html_formatter/tests/specs/html/component-frameworks/vue-component-casing.vue.snap b/crates/biome_html_formatter/tests/specs/html/component-frameworks/vue-component-casing.vue.snap
index 644080dce768..55c051f977a4 100644
--- a/crates/biome_html_formatter/tests/specs/html/component-frameworks/vue-component-casing.vue.snap
+++ b/crates/biome_html_formatter/tests/specs/html/component-frameworks/vue-component-casing.vue.snap
@@ -44,8 +44,8 @@ import TextInput from './TextInput.vue';
 </script>
 
 <template>
-	<Button label="test button"/>
-	<TextInput placeholder="enter text"/>
+	<Button label="test button" />
+	<TextInput placeholder="enter text" />
 	<button>native button</button>
 </template>
 ```
diff --git a/crates/biome_html_formatter/tests/specs/html/svelte/await_dynamic_import.svelte.snap b/crates/biome_html_formatter/tests/specs/html/svelte/await_dynamic_import.svelte.snap
index b7fdce1d61b3..b044e6eb54f8 100644
--- a/crates/biome_html_formatter/tests/specs/html/svelte/await_dynamic_import.svelte.snap
+++ b/crates/biome_html_formatter/tests/specs/html/svelte/await_dynamic_import.svelte.snap
@@ -32,6 +32,6 @@ Self close void elements: never
 
 ```svelte
 {#await import('./Component.svelte') then { default: Component }}
-	<Component/>
+	<Component />
 {/await}
 ```
diff --git a/crates/biome_html_formatter/tests/specs/html/vue/event-with-colon.vue.snap b/crates/biome_html_formatter/tests/specs/html/vue/event-with-colon.vue.snap
index e8ab8faee7f0..b510d61418fd 100644
--- a/crates/biome_html_formatter/tests/specs/html/vue/event-with-colon.vue.snap
+++ b/crates/biome_html_formatter/tests/specs/html/vue/event-with-colon.vue.snap
@@ -29,5 +29,5 @@ Self close void elements: never
 -----
 
 ```vue
-<Foo @update:modelValue="onUpdate"/>
+<Foo @update:modelValue="onUpdate" />
 ```
diff --git a/crates/biome_html_formatter/tests/specs/html/vue/issue-8174.vue.snap b/crates/biome_html_formatter/tests/specs/html/vue/issue-8174.vue.snap
index b1a383144c19..05b5f9313a50 100644
--- a/crates/biome_html_formatter/tests/specs/html/vue/issue-8174.vue.snap
+++ b/crates/biome_html_formatter/tests/specs/html/vue/issue-8174.vue.snap
@@ -30,6 +30,6 @@ Self close void elements: never
 -----
 
 ```vue
-<Component v-if="operation" :property="123"/>
-<Component v-else :property="123"/>
+<Component v-if="operation" :property="123" />
+<Component v-else :property="123" />
 ```