From 32153e318d7b5be0dae9334801dba31881f077bc Mon Sep 17 00:00:00 2001
From: xxkl1 <84455605+xxkl1@users.noreply.github.com>
Date: Wed, 19 Apr 2023 21:21:24 +0800
Subject: [PATCH] fix: inline style value become undefined (#8517)

fixes #8462

---------

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
---
 src/runtime/internal/dom.ts                           |  4 ++--
 .../samples/inline-style-become-undefined/_config.js  | 11 +++++++++++
 .../samples/inline-style-become-undefined/main.svelte |  9 +++++++++
 3 files changed, 22 insertions(+), 2 deletions(-)
 create mode 100644 test/runtime/samples/inline-style-become-undefined/_config.js
 create mode 100644 test/runtime/samples/inline-style-become-undefined/main.svelte

diff --git a/src/runtime/internal/dom.ts b/src/runtime/internal/dom.ts
index c025313c15..066fa6eb1c 100644
--- a/src/runtime/internal/dom.ts
+++ b/src/runtime/internal/dom.ts
@@ -307,7 +307,7 @@ export function attr(node: Element, attribute: string, value?: string) {
 	else if (node.getAttribute(attribute) !== value) node.setAttribute(attribute, value);
 }
 
-/** 
+/**
  * List of attributes that should always be set through the attr method,
  * because updating them through the property setter doesn't work reliably.
  * In the example of `width`/`height`, the problem is that the setter only
@@ -641,7 +641,7 @@ export function set_input_type(input, type) {
 }
 
 export function set_style(node, key, value, important) {
-	if (value === null) {
+	if (value == null) {
 		node.style.removeProperty(key);
 	} else {
 		node.style.setProperty(key, value, important ? 'important' : '');
diff --git a/test/runtime/samples/inline-style-become-undefined/_config.js b/test/runtime/samples/inline-style-become-undefined/_config.js
new file mode 100644
index 0000000000..a2a0727efa
--- /dev/null
+++ b/test/runtime/samples/inline-style-become-undefined/_config.js
@@ -0,0 +1,11 @@
+export default {
+	async test({ assert, target, window }) {
+		const div = target.querySelector('div');
+		const click = new window.MouseEvent('click');
+
+		assert.htmlEqual(target.innerHTML, '<div style="background: red;"></div>');
+		await div.dispatchEvent(click);
+		await Promise.resolve();
+		assert.htmlEqual(target.innerHTML, '<div style=""></div>');
+	}
+};
diff --git a/test/runtime/samples/inline-style-become-undefined/main.svelte b/test/runtime/samples/inline-style-become-undefined/main.svelte
new file mode 100644
index 0000000000..ee38934fc7
--- /dev/null
+++ b/test/runtime/samples/inline-style-become-undefined/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	let bg = "red";
+
+	const handle = () => {
+			bg = undefined;
+	};
+</script>
+
+<div style:background={bg} on:click={handle}></div>