From a4c79d5ac2054c328dbef890f449974d24a0120f Mon Sep 17 00:00:00 2001
From: Carson McManus <carson.mcmanus1@gmail.com>
Date: Sat, 15 Feb 2025 11:37:47 -0500
Subject: [PATCH] fix(format/html): fix extra characters getting added in
 attribute quotes

---
 .../src/html/auxiliary/string.rs              | 10 ++-
 .../html/attributes/single-quotes.html.snap   |  2 +-
 .../html/attributes/attributes.html.snap      | 31 +------
 .../html/attributes/boolean.html.snap         | 81 -------------------
 .../whitespace/display-inline-block.html.snap | 13 +--
 5 files changed, 14 insertions(+), 123 deletions(-)
 delete mode 100644 crates/biome_html_formatter/tests/specs/prettier/html/attributes/boolean.html.snap

diff --git a/crates/biome_html_formatter/src/html/auxiliary/string.rs b/crates/biome_html_formatter/src/html/auxiliary/string.rs
index c955b68c10ad..865be5d320ca 100644
--- a/crates/biome_html_formatter/src/html/auxiliary/string.rs
+++ b/crates/biome_html_formatter/src/html/auxiliary/string.rs
@@ -8,8 +8,9 @@ impl FormatNodeRule<HtmlString> for FormatHtmlString {
         let HtmlStringFields { value_token } = node.as_fields();
 
         // Prettier always uses double quotes for HTML strings, regardless of configuration.
+        // Unless the string contains a double quote, in which case it uses single quotes.
         if let Ok(value) = value_token.as_ref() {
-            let value_text = value.text().trim();
+            let value_text = value.text_trimmed();
 
             if !(value_text.starts_with('"') && value_text.ends_with('"')) {
                 let contains_double_quote = value_text.contains('"');
@@ -18,9 +19,12 @@ impl FormatNodeRule<HtmlString> for FormatHtmlString {
                     && value_text.ends_with('\'')
                     && !contains_double_quote
                 {
-                    value.text_range().add_start(1.into()).sub_end(1.into())
+                    value
+                        .text_trimmed_range()
+                        .add_start(1.into())
+                        .sub_end(1.into())
                 } else {
-                    value.text_range()
+                    value.text_trimmed_range()
                 };
 
                 if !contains_double_quote {
diff --git a/crates/biome_html_formatter/tests/specs/html/attributes/single-quotes.html.snap b/crates/biome_html_formatter/tests/specs/html/attributes/single-quotes.html.snap
index b6ad62a0073c..57d440d4bcae 100644
--- a/crates/biome_html_formatter/tests/specs/html/attributes/single-quotes.html.snap
+++ b/crates/biome_html_formatter/tests/specs/html/attributes/single-quotes.html.snap
@@ -28,5 +28,5 @@ Indent script and style: false
 -----
 
 ```html
-<img src="foo.png'" alt='should keep "these" quotes' />
+<img src="foo.png" alt='should keep "these" quotes' />
 ```
diff --git a/crates/biome_html_formatter/tests/specs/prettier/html/attributes/attributes.html.snap b/crates/biome_html_formatter/tests/specs/prettier/html/attributes/attributes.html.snap
index 34fe5d686ac5..0f2884e263d9 100644
--- a/crates/biome_html_formatter/tests/specs/prettier/html/attributes/attributes.html.snap
+++ b/crates/biome_html_formatter/tests/specs/prettier/html/attributes/attributes.html.snap
@@ -90,29 +90,6 @@ and HTML5 Apps. It also documents Mozilla products, like Firefox OS.">
 ```diff
 --- Prettier
 +++ Biome
-@@ -1,6 +1,6 @@
--<input name="address" maxlength="200" />
-+<input name="address " maxlength="200" />
-+<input name="address'" maxlength="200" />
- <input name="address" maxlength="200" />
--<input name="address" maxlength="200" />
- <div class="foo"></div>
- <div class="foo"></div>
- <div class="foo bar"></div>
-@@ -18,11 +18,11 @@
- <div attribute="">String</div>
- <div attribute="">String</div>
- <div attribute>String</div>
--<div attribute="">String</div>
- <div attribute="">String</div>
-+<div attribute="'">String</div>
- <div attribute>String</div>
- <div attribute="">String</div>
--<div attribute="">String</div>
-+<div attribute="' ">String</div>
- <div attribute="attribute = attribute"></div>
- <div ATTRIBUTE>String</div>
- <div ATTRIBUTE="">String</div>
 @@ -61,8 +61,14 @@
    data-index-number="12314"
    data-parent="cars"
@@ -138,8 +115,8 @@ and HTML5 Apps. It also documents Mozilla products, like Firefox OS.">
 # Output
 
 ```html
-<input name="address " maxlength="200" />
-<input name="address'" maxlength="200" />
+<input name="address" maxlength="200" />
+<input name="address" maxlength="200" />
 <input name="address" maxlength="200" />
 <div class="foo"></div>
 <div class="foo"></div>
@@ -159,10 +136,10 @@ and HTML5 Apps. It also documents Mozilla products, like Firefox OS."
 <div attribute="">String</div>
 <div attribute>String</div>
 <div attribute="">String</div>
-<div attribute="'">String</div>
+<div attribute="">String</div>
 <div attribute>String</div>
 <div attribute="">String</div>
-<div attribute="' ">String</div>
+<div attribute="">String</div>
 <div attribute="attribute = attribute"></div>
 <div ATTRIBUTE>String</div>
 <div ATTRIBUTE="">String</div>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/html/attributes/boolean.html.snap b/crates/biome_html_formatter/tests/specs/prettier/html/attributes/boolean.html.snap
deleted file mode 100644
index 91e1157605c4..000000000000
--- a/crates/biome_html_formatter/tests/specs/prettier/html/attributes/boolean.html.snap
+++ /dev/null
@@ -1,81 +0,0 @@
----
-source: crates/biome_formatter_test/src/snapshot_builder.rs
-info: html/attributes/boolean.html
----
-# Input
-
-```html
-<button type="submit">This is valid.</button>
-<button type="submit" disabled>This is valid.</button>
-<button type="submit" disabled="">This is valid.</button>
-<button type="submit" disabled="disabled">This is valid.</button>
-<button type="submit" disabled=true>This is valid. This will be disabled.</button>
-<button type="submit" disabled='true'>This is valid. This will be disabled.</button>
-<button type="submit" disabled="true">This is valid. This will be disabled.</button>
-<button type="submit" disabled=false>This is valid. This will be disabled.</button>
-<button type="submit" disabled="false">This is valid. This will be disabled.</button>
-<button type="submit" disabled='false'>This is valid. This will be disabled.</button>
-<button type="submit" disabled=hahah>This is valid. This will be disabled.</button>
-<button type="submit" disabled='hahah'>This is valid. This will be disabled.</button>
-<button type="submit" disabled="hahah">This is valid. This will be disabled.</button>
-<input type="checkbox" checked disabled name="cheese">
-<input type="checkbox" checked="checked" disabled="disabled" name="cheese">
-<input type='checkbox' checked="" disabled="" name=cheese >
-<div lang=""></div>
-
-```
-
-
-# Prettier differences
-
-```diff
---- Prettier
-+++ Biome
-@@ -31,5 +31,5 @@
- </button>
- <input type="checkbox" checked disabled name="cheese" />
- <input type="checkbox" checked="checked" disabled="disabled" name="cheese" />
--<input type="checkbox" checked="" disabled="" name="cheese" />
-+<input type="checkbox'" checked="" disabled="" name="cheese " />
- <div lang=""></div>
-```
-
-# Output
-
-```html
-<button type="submit">This is valid.</button>
-<button type="submit" disabled>This is valid.</button>
-<button type="submit" disabled="">This is valid.</button>
-<button type="submit" disabled="disabled">This is valid.</button>
-<button type="submit" disabled="true">
-  This is valid. This will be disabled.
-</button>
-<button type="submit" disabled="true">
-  This is valid. This will be disabled.
-</button>
-<button type="submit" disabled="true">
-  This is valid. This will be disabled.
-</button>
-<button type="submit" disabled="false">
-  This is valid. This will be disabled.
-</button>
-<button type="submit" disabled="false">
-  This is valid. This will be disabled.
-</button>
-<button type="submit" disabled="false">
-  This is valid. This will be disabled.
-</button>
-<button type="submit" disabled="hahah">
-  This is valid. This will be disabled.
-</button>
-<button type="submit" disabled="hahah">
-  This is valid. This will be disabled.
-</button>
-<button type="submit" disabled="hahah">
-  This is valid. This will be disabled.
-</button>
-<input type="checkbox" checked disabled name="cheese" />
-<input type="checkbox" checked="checked" disabled="disabled" name="cheese" />
-<input type="checkbox'" checked="" disabled="" name="cheese " />
-<div lang=""></div>
-```
diff --git a/crates/biome_html_formatter/tests/specs/prettier/html/whitespace/display-inline-block.html.snap b/crates/biome_html_formatter/tests/specs/prettier/html/whitespace/display-inline-block.html.snap
index f6223410fb79..5b3ce8e67da1 100644
--- a/crates/biome_html_formatter/tests/specs/prettier/html/whitespace/display-inline-block.html.snap
+++ b/crates/biome_html_formatter/tests/specs/prettier/html/whitespace/display-inline-block.html.snap
@@ -40,15 +40,6 @@ Click here! Click here! Click here! Click here! Click here! Click here!
  </div>
  <div>
    <button>
-@@ -20,6 +21,6 @@
-   </button>
- </div>
- <video src="brave.webm">
--  <track kind="subtitles" src="brave.en.vtt" srclang="en" label="English" />
--  <track kind="subtitles" src="brave.en.vtt" srclang="en" label="English" />
-+  <track kind="subtitles " src="brave.en.vtt " srclang="en " label="English" />
-+  <track kind="subtitles " src="brave.en.vtt " srclang="en " label="English" />
- </video>
 ```
 
 # Output
@@ -77,7 +68,7 @@ Click here! Click here! Click here! Click here! Click here! Click here!
   </button>
 </div>
 <video src="brave.webm">
-  <track kind="subtitles " src="brave.en.vtt " srclang="en " label="English" />
-  <track kind="subtitles " src="brave.en.vtt " srclang="en " label="English" />
+  <track kind="subtitles" src="brave.en.vtt" srclang="en" label="English" />
+  <track kind="subtitles" src="brave.en.vtt" srclang="en" label="English" />
 </video>
 ```