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

dummdidumm · web-flow · commit 8592914fdd33 · 2024-05-13T21:06:11.000+02:00
fixes #11044
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>

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'svelte': patch
 +---
++
 +fix: correctly handle falsy values of style directives in SSR mode
Original file line number	Diff line number	Diff line change
`@@ -193,7 +193,7 @@ export function add_classes(classes) {`
`193`	`193`	`/** @returns {string} */`
`194`	`194`	`function style_object_to_string(style_object) {`
`195`	`195`	`return Object.keys(style_object)`
`196`		`- .filter((key) => style_object[key])`
	`196`	`+ .filter((key) => style_object[key] != null && style_object[key] !== '')`
`197`	`197`	.map((key) => `${key}: ${escape_attribute_value(style_object[key])};`)
`198`	`198`	`.join(' ');`
`199`	`199`	`}`