From 7725f77cca667aa1f7fb4b7b3219467f34e89313 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=82=A8=EC=A0=95=EC=9A=B1?=
 <113816822+HelloWook@users.noreply.github.com>
Date: Fri, 14 Aug 2026 16:53:47 +0900
Subject: [PATCH] fix: apply CSS custom properties with falsy values on
 components (#18634)

---
 .changeset/css-props-falsy-values.md                 |  5 +++++
 .../src/internal/client/dom/blocks/css-props.js      |  6 +++---
 .../component-css-props-falsy/Component.svelte       |  1 +
 .../samples/component-css-props-falsy/_config.js     | 12 ++++++++++++
 .../samples/component-css-props-falsy/main.svelte    |  5 +++++
 5 files changed, 26 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/css-props-falsy-values.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/component-css-props-falsy/Component.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/component-css-props-falsy/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/component-css-props-falsy/main.svelte

diff --git a/.changeset/css-props-falsy-values.md b/.changeset/css-props-falsy-values.md
new file mode 100644
index 0000000000..677594ddaf
--- /dev/null
+++ b/.changeset/css-props-falsy-values.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: apply CSS custom properties with falsy values on components
diff --git a/packages/svelte/src/internal/client/dom/blocks/css-props.js b/packages/svelte/src/internal/client/dom/blocks/css-props.js
index 084a5561be..e5b5458d49 100644
--- a/packages/svelte/src/internal/client/dom/blocks/css-props.js
+++ b/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) {
-				element.style.setProperty(key, value);
-			} else {
+			if (value == null || value === '') {
 				element.style.removeProperty(key);
+			} else {
+				element.style.setProperty(key, value);
 			}
 		}
 	});
diff --git a/packages/svelte/tests/runtime-runes/samples/component-css-props-falsy/Component.svelte b/packages/svelte/tests/runtime-runes/samples/component-css-props-falsy/Component.svelte
new file mode 100644
index 0000000000..0fd9beb678
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/component-css-props-falsy/Component.svelte
@@ -0,0 +1 @@
+<div>Hello</div>
diff --git a/packages/svelte/tests/runtime-runes/samples/component-css-props-falsy/_config.js b/packages/svelte/tests/runtime-runes/samples/component-css-props-falsy/_config.js
new file mode 100644
index 0000000000..78b14775e5
--- /dev/null
+++ b/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>`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/component-css-props-falsy/main.svelte b/packages/svelte/tests/runtime-runes/samples/component-css-props-falsy/main.svelte
new file mode 100644
index 0000000000..30c029b547
--- /dev/null
+++ b/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} />