From 088632b06dfcf472228bbfb7fc9b9afd31453f7f Mon Sep 17 00:00:00 2001
From: Azat S <to@azat.io>
Date: Sun, 9 Jun 2024 18:06:29 +0300
Subject: [PATCH] fix: fix merge style func (#11971)

* fix: fix merge style func

* add test, do some drive-by tidying

* changeset

* lint

* lint, simplify

* oops, order matters for tests

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .changeset/yellow-rockets-sit.md              |  5 +++
 packages/svelte/src/internal/server/index.js  | 36 +++++++++----------
 .../_config.js                                |  7 ++++
 .../main.svelte                               |  1 +
 4 files changed, 31 insertions(+), 18 deletions(-)
 create mode 100644 .changeset/yellow-rockets-sit.md
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/inline-style-directive-null-style/_config.js
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/inline-style-directive-null-style/main.svelte

diff --git a/.changeset/yellow-rockets-sit.md b/.changeset/yellow-rockets-sit.md
new file mode 100644
index 0000000000..72ae77ab49
--- /dev/null
+++ b/.changeset/yellow-rockets-sit.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: apply style directives to element with empty style attribute
diff --git a/packages/svelte/src/internal/server/index.js b/packages/svelte/src/internal/server/index.js
index a6c41df5ce..2798817415 100644
--- a/packages/svelte/src/internal/server/index.js
+++ b/packages/svelte/src/internal/server/index.js
@@ -264,28 +264,28 @@ export function add_styles(style_object) {
 }
 
 /**
- * @param {string} style_attribute
- * @param {Record<string, string>} style_directive
+ * @param {string} attribute
+ * @param {Record<string, string>} styles
  */
-export function merge_styles(style_attribute, style_directive) {
+export function merge_styles(attribute, styles) {
 	/** @type {Record<string, string>} */
-	const style_object = {};
-	for (const individual_style of style_attribute.split(';')) {
-		const colon_index = individual_style.indexOf(':');
-		const name = individual_style.slice(0, colon_index).trim();
-		const value = individual_style.slice(colon_index + 1).trim();
-		if (!name) continue;
-		style_object[name] = value;
-	}
-	for (const name in style_directive) {
-		const value = style_directive[name];
-		if (value) {
-			style_object[name] = value;
-		} else {
-			delete style_object[name];
+	var merged = {};
+
+	if (attribute) {
+		for (var declaration of attribute.split(';')) {
+			var i = declaration.indexOf(':');
+			var name = declaration.slice(0, i).trim();
+			var value = declaration.slice(i + 1).trim();
+
+			if (name !== '') merged[name] = value;
 		}
 	}
-	return style_object;
+
+	for (name in styles) {
+		merged[name] = styles[name];
+	}
+
+	return merged;
 }
 
 /**
diff --git a/packages/svelte/tests/runtime-legacy/samples/inline-style-directive-null-style/_config.js b/packages/svelte/tests/runtime-legacy/samples/inline-style-directive-null-style/_config.js
new file mode 100644
index 0000000000..f83df4439f
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/inline-style-directive-null-style/_config.js
@@ -0,0 +1,7 @@
+import { ok, test } from '../../test';
+
+export default test({
+	html: `
+		<p style="color: red;">red</p>
+	`
+});
diff --git a/packages/svelte/tests/runtime-legacy/samples/inline-style-directive-null-style/main.svelte b/packages/svelte/tests/runtime-legacy/samples/inline-style-directive-null-style/main.svelte
new file mode 100644
index 0000000000..8a87a70706
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/inline-style-directive-null-style/main.svelte
@@ -0,0 +1 @@
+<p style:color="red" style={null}>red</p>