11 files changed, 159 insertions, 2 deletions
diff --git a/tests/integration/fmt_tests.rs b/tests/integration/fmt_tests.rs
index 7a37ec2fc..c2d38f0d8 100644
--- a/tests/integration/fmt_tests.rs
+++ b/tests/integration/fmt_tests.rs
@@ -37,6 +37,18 @@ fn fmt_test() {
   let badly_formatted_css = t.path().join("badly_formatted.css");
   badly_formatted_original_css.copy(&badly_formatted_css);
 
+  let fixed_html = testdata_fmt_dir.join("badly_formatted_fixed.html");
+  let badly_formatted_original_html =
+    testdata_fmt_dir.join("badly_formatted.html");
+  let badly_formatted_html = t.path().join("badly_formatted.html");
+  badly_formatted_original_html.copy(&badly_formatted_html);
+
+  let fixed_component = testdata_fmt_dir.join("badly_formatted_fixed.svelte");
+  let badly_formatted_original_component =
+    testdata_fmt_dir.join("badly_formatted.svelte");
+  let badly_formatted_component = t.path().join("badly_formatted.svelte");
+  badly_formatted_original_component.copy(&badly_formatted_component);
+
   let fixed_ipynb = testdata_fmt_dir.join("badly_formatted_fixed.ipynb");
   let badly_formatted_original_ipynb =
     testdata_fmt_dir.join("badly_formatted.ipynb");
@@ -56,12 +68,14 @@ fn fmt_test() {
     .args_vec(vec![
       "fmt".to_string(),
       "--unstable-css".to_string(),
+      "--unstable-html".to_string(),
+      "--unstable-component".to_string(),
       "--unstable-yaml".to_string(),
       format!(
-        "--ignore={badly_formatted_js},{badly_formatted_md},{badly_formatted_json},{badly_formatted_css},{badly_formatted_yaml},{badly_formatted_ipynb}",
+        "--ignore={badly_formatted_js},{badly_formatted_md},{badly_formatted_json},{badly_formatted_css},{badly_formatted_html},{badly_formatted_component},{badly_formatted_yaml},{badly_formatted_ipynb}",
       ),
       format!(
-        "--check {badly_formatted_js} {badly_formatted_md} {badly_formatted_json} {badly_formatted_css} {badly_formatted_yaml} {badly_formatted_ipynb}",
+        "--check {badly_formatted_js} {badly_formatted_md} {badly_formatted_json} {badly_formatted_css} {badly_formatted_html} {badly_formatted_component} {badly_formatted_yaml} {badly_formatted_ipynb}",
       ),
     ])
     .run();
@@ -78,11 +92,15 @@ fn fmt_test() {
       "fmt".to_string(),
       "--check".to_string(),
       "--unstable-css".to_string(),
+      "--unstable-html".to_string(),
+      "--unstable-component".to_string(),
       "--unstable-yaml".to_string(),
       badly_formatted_js.to_string(),
       badly_formatted_md.to_string(),
       badly_formatted_json.to_string(),
       badly_formatted_css.to_string(),
+      badly_formatted_html.to_string(),
+      badly_formatted_component.to_string(),
       badly_formatted_yaml.to_string(),
       badly_formatted_ipynb.to_string(),
     ])
@@ -98,11 +116,15 @@ fn fmt_test() {
     .args_vec(vec![
       "fmt".to_string(),
       "--unstable-css".to_string(),
+      "--unstable-html".to_string(),
+      "--unstable-component".to_string(),
       "--unstable-yaml".to_string(),
       badly_formatted_js.to_string(),
       badly_formatted_md.to_string(),
       badly_formatted_json.to_string(),
       badly_formatted_css.to_string(),
+      badly_formatted_html.to_string(),
+      badly_formatted_component.to_string(),
       badly_formatted_yaml.to_string(),
       badly_formatted_ipynb.to_string(),
     ])
@@ -115,18 +137,24 @@ fn fmt_test() {
   let expected_md = fixed_md.read_to_string();
   let expected_json = fixed_json.read_to_string();
   let expected_css = fixed_css.read_to_string();
+  let expected_html = fixed_html.read_to_string();
+  let expected_component = fixed_component.read_to_string();
   let expected_yaml = fixed_yaml.read_to_string();
   let expected_ipynb = fixed_ipynb.read_to_string();
   let actual_js = badly_formatted_js.read_to_string();
   let actual_md = badly_formatted_md.read_to_string();
   let actual_json = badly_formatted_json.read_to_string();
   let actual_css = badly_formatted_css.read_to_string();
+  let actual_html = badly_formatted_html.read_to_string();
+  let actual_component = badly_formatted_component.read_to_string();
   let actual_yaml = badly_formatted_yaml.read_to_string();
   let actual_ipynb = badly_formatted_ipynb.read_to_string();
   assert_eq!(expected_js, actual_js);
   assert_eq!(expected_md, actual_md);
   assert_eq!(expected_json, actual_json);
   assert_eq!(expected_css, actual_css);
+  assert_eq!(expected_html, actual_html);
+  assert_eq!(expected_component, actual_component);
   assert_eq!(expected_yaml, actual_yaml);
   assert_eq!(expected_ipynb, actual_ipynb);
 }
diff --git a/tests/specs/fmt/unstable_component/__test__.jsonc b/tests/specs/fmt/unstable_component/__test__.jsonc
new file mode 100644
index 000000000..a8f8697da
--- /dev/null
+++ b/tests/specs/fmt/unstable_component/__test__.jsonc
@@ -0,0 +1,25 @@
+{
+  "tempDir": true,
+  "tests": {
+    "nothing": {
+      "args": "fmt",
+      "output": "Checked 1 file\n"
+    },
+    "flag": {
+      "args": "fmt --unstable-css --unstable-component",
+      "output": "[WILDLINE]badly_formatted.svelte\nChecked 1 file\n"
+    },
+    "config_file": {
+      "steps": [{
+        "args": [
+          "eval",
+          "Deno.writeTextFile('deno.json', '{\\n  \"unstable\": [\"fmt-css\", \"fmt-component\"]\\n}\\n')"
+        ],
+        "output": "[WILDCARD]"
+      }, {
+        "args": "fmt",
+        "output": "[WILDLINE]badly_formatted.svelte\nChecked 2 files\n"
+      }]
+    }
+  }
+}
diff --git a/tests/specs/fmt/unstable_component/badly_formatted.svelte b/tests/specs/fmt/unstable_component/badly_formatted.svelte
new file mode 100644
index 000000000..3a3cbe9b3
--- /dev/null
+++ b/tests/specs/fmt/unstable_component/badly_formatted.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+let a:number
+let b  :   number
+</script>
+
+<div class:active={ active } > {a+b} </div>
+
+<style>
+.active{}
+</style>
diff --git a/tests/specs/fmt/unstable_html/__test__.jsonc b/tests/specs/fmt/unstable_html/__test__.jsonc
new file mode 100644
index 000000000..2394805ad
--- /dev/null
+++ b/tests/specs/fmt/unstable_html/__test__.jsonc
@@ -0,0 +1,25 @@
+{
+  "tempDir": true,
+  "tests": {
+    "nothing": {
+      "args": "fmt",
+      "output": "Checked 1 file\n"
+    },
+    "flag": {
+      "args": "fmt --unstable-css --unstable-html",
+      "output": "[WILDLINE]badly_formatted.html\nChecked 1 file\n"
+    },
+    "config_file": {
+      "steps": [{
+        "args": [
+          "eval",
+          "Deno.writeTextFile('deno.json', '{\\n  \"unstable\": [\"fmt-css\", \"fmt-html\"]\\n}\\n')"
+        ],
+        "output": "[WILDCARD]"
+      }, {
+        "args": "fmt",
+        "output": "[WILDLINE]badly_formatted.html\nChecked 2 files\n"
+      }]
+    }
+  }
+}
diff --git a/tests/specs/fmt/unstable_html/badly_formatted.html b/tests/specs/fmt/unstable_html/badly_formatted.html
new file mode 100644
index 000000000..de7706ac7
--- /dev/null
+++ b/tests/specs/fmt/unstable_html/badly_formatted.html
@@ -0,0 +1,9 @@
+<div class=container > content </div>
+
+<script>
+let  counter=0
+</script>
+
+<style>
+.container{padding:8px}
+</style>
diff --git a/tests/testdata/fmt/badly_formatted.html b/tests/testdata/fmt/badly_formatted.html
new file mode 100644
index 000000000..de7706ac7
--- /dev/null
+++ b/tests/testdata/fmt/badly_formatted.html
@@ -0,0 +1,9 @@
+<div class=container > content </div>
+
+<script>
+let  counter=0
+</script>
+
+<style>
+.container{padding:8px}
+</style>
diff --git a/tests/testdata/fmt/badly_formatted.md b/tests/testdata/fmt/badly_formatted.md
index 29d73b365..642918cea 100644
--- a/tests/testdata/fmt/badly_formatted.md
+++ b/tests/testdata/fmt/badly_formatted.md
@@ -53,3 +53,13 @@ function foo(): number {
 ```css
 #app>.btn{ color : #000 }
 ```
+
+```html
+<div class=container > content </div>
+```
+
+```svelte
+<script lang=ts>
+let a:number
+</script>
+```
diff --git a/tests/testdata/fmt/badly_formatted.svelte b/tests/testdata/fmt/badly_formatted.svelte
new file mode 100644
index 000000000..9c1988d3a
--- /dev/null
+++ b/tests/testdata/fmt/badly_formatted.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+let a:number
+let b  :   number
+</script>
+
+<div class:active={ active } style=" width : 1PX; height:1PX; " > {a+b} </div>
+
+<style>
+.active{}
+</style>
diff --git a/tests/testdata/fmt/badly_formatted_fixed.html b/tests/testdata/fmt/badly_formatted_fixed.html
new file mode 100644
index 000000000..c0c06cd9b
--- /dev/null
+++ b/tests/testdata/fmt/badly_formatted_fixed.html
@@ -0,0 +1,11 @@
+<div class="container">content</div>
+
+<script>
+  let counter = 0;
+</script>
+
+<style>
+  .container {
+    padding: 8px;
+  }
+</style>
diff --git a/tests/testdata/fmt/badly_formatted_fixed.md b/tests/testdata/fmt/badly_formatted_fixed.md
index db2afc809..21176742b 100644
--- a/tests/testdata/fmt/badly_formatted_fixed.md
+++ b/tests/testdata/fmt/badly_formatted_fixed.md
@@ -46,3 +46,13 @@ function foo(): number {
   color: #000;
 }
 ```
+
+```html
+<div class="container">content</div>
+```
+
+```svelte
+<script lang="ts">
+  let a: number;
+</script>
+```
diff --git a/tests/testdata/fmt/badly_formatted_fixed.svelte b/tests/testdata/fmt/badly_formatted_fixed.svelte
new file mode 100644
index 000000000..7557e758d
--- /dev/null
+++ b/tests/testdata/fmt/badly_formatted_fixed.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+  let a: number;
+  let b: number;
+</script>
+
+<div class:active style="width: 1px; height: 1px">{a + b}</div>
+
+<style>
+  .active {}
+</style>