fix: apply CSS custom properties with falsy values on components (#18634)

.changeset/css-props-falsy-values.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: apply CSS custom properties with falsy values on components

packages/svelte/src/internal/client/dom/blocks/css-props.js

@@ -18,10 +18,10 @@ export function css_props(element, get_styles) {
 		for (var key in styles) {
 			var value = styles[key];
 
-			if (value) {
+			if (value == null || value === '') {
-				element.style.setProperty(key, value);
-			} else {
 				element.style.removeProperty(key);
+			} else {
+				element.style.setProperty(key, value);
 			}
 		}
 	});

packages/svelte/tests/runtime-runes/samples/component-css-props-falsy/Component.svelte

@@ -0,0 +1 @@
+<div>Hello</div>

packages/svelte/tests/runtime-runes/samples/component-css-props-falsy/_config.js

@@ -0,0 +1,12 @@
+import { test } from '../../test';
+
+export default test({
+	ssrHtml: `<svelte-css-wrapper style="display: contents; --zero: 0; --one: 1;"><div>Hello</div></svelte-css-wrapper>`,
+
+	async test({ assert, target }) {
+		assert.htmlEqual(
+			target.innerHTML,
+			`<svelte-css-wrapper style="display: contents; --zero: 0; --one: 1;"><div>Hello</div></svelte-css-wrapper>`
+		);
+	}
+});

packages/svelte/tests/runtime-runes/samples/component-css-props-falsy/main.svelte

@@ -0,0 +1,5 @@
+<script>
+	import Component from './Component.svelte';
+</script>
+
+<Component --zero={0} --one={1} --empty={''} --nullish={null} />