fix: correctly handle falsy values of style directives in SSR mode (#…

…11584) fixes #11044
sveltejs · May 13, 2024 · 8592914 · 8592914
1 parent 72d493a
commit 8592914
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 1 deletion.
diff --git a/.changeset/long-owls-eat.md b/.changeset/long-owls-eat.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: correctly handle falsy values of style directives in SSR mode
diff --git a/packages/svelte/src/runtime/internal/ssr.js b/packages/svelte/src/runtime/internal/ssr.js
@@ -193,7 +193,7 @@ export function add_classes(classes) {
 /** @returns {string} */
 function style_object_to_string(style_object) {
 	return Object.keys(style_object)
-		.filter((key) => style_object[key])
+		.filter((key) => style_object[key] != null && style_object[key] !== '')
 		.map((key) => `${key}: ${escape_attribute_value(style_object[key])};`)
 		.join(' ');
 }

diff --git a/packages/svelte/test/runtime/samples/inline-style-directive-falsy-value/_config.js b/packages/svelte/test/runtime/samples/inline-style-directive-falsy-value/_config.js
@@ -0,0 +1,9 @@
+export default {
+	html: `
+		<p style="--a: 0;"></p>
+		<p style="--b: false;"></p>
+		<p></p>
+		<p></p>
+		<p></p>
+	`
+};
diff --git a/packages/svelte/test/runtime/samples/inline-style-directive-falsy-value/main.svelte b/packages/svelte/test/runtime/samples/inline-style-directive-falsy-value/main.svelte
@@ -0,0 +1,5 @@
+<p style:--a={0}></p>
+<p style:--b={false}></p>
+<p style:--c=""></p>
+<p style:--d={undefined}></p>
+<p style:--e={null}></p>