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 <[email protected]>

Author: azat-io

.changeset/yellow-rockets-sit.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: apply style directives to element with empty style attribute

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;
 }
 
 /**

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>
+	`
+});

packages/svelte/tests/runtime-legacy/samples/inline-style-directive-null-style/main.svelte

@@ -0,0 +1 @@
+<p style:color="red" style={null}>red</p>