Style directive inconsistent for client-side rendering and server-side rendering

[PeppeL-G]

Describe the bug

I have the following code in a +page.svelte file:

<script>
	let numbers = [0, 1, 2]
</script>

<ul>
	{#each numbers as number}
		<li style:--number={number}>{number}</li>
	{/each}
</ul>

Then I use npm run dev, and when client-side JS is enabled in my web browser, the inspected HTML code looks like this (as I expect):

<ul>
   <li style="--number: 0;">0</li>
   <li style="--number: 1;">1</li>
   <li style="--number: 2;">2</li>
</ul>

But if I disable client-side JS in my web browser, the inspected HTML code looks like this (not as I expect; style="--number: 0;" is missing from the first <li>):

<ul>
   <li>0</li>
   <li style="--number: 1;">1</li>
   <li style="--number: 2;">2</li>
</ul>

Using npm run build (using adapter-static) on my real project also generates the HTML code with the missing style attribute for the 0 value, so I'm guessing server-side rendering for some reason removes it because 0 is falsy.

Reproduction

1. git clone https://github.com/PeppeL-G/svelte-bug-style.git
2. cd svelte-bug-style (the code is in the src/routes/+page.svelte-page)
3. npm install
4. npn run dev
5. Open http://localhost:5173/ in a web browser, and:
   1. Try with client-side JS enabled and check the HTML code
   2. Try with client-side JS disabled and check the HTML code

Logs

No response

System Info

System:
    OS: macOS 14.1.2
    CPU: (8) arm64 Apple M2
    Memory: 178.52 MB / 8.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.3.1 - /usr/local/bin/node
    npm: 9.6.7 - /usr/local/bin/npm
  Browsers:
    Chrome: 123.0.6312.87.        (I actually use Firefox, don't know why it's not listed)
    Safari: 17.1.2
  npmPackages:
    @sveltejs/adapter-auto: ^3.2.0 => 3.2.0 
    @sveltejs/kit: ^2.5.5 => 2.5.5 
    @sveltejs/vite-plugin-svelte: ^3.0.2 => 3.0.2 
    svelte: ^4.2.12 => 4.2.12 
    vite: ^5.2.7 => 5.2.7

Severity

annoyance

Additional Information

A workaround that works for me is to use a CSS rule that assigns all involved elements 0 as the default value:

<style>
	li{
		--number: 0;
	}
</style>

[Rishab49]

the root cause of this problem is style_object_to_string function

svelte/packages/svelte/src/internal/server/index.js

Lines 380 to 385 in f7c8fd5

	function style_object_to_string(style_object) {
	return Object.keys(style_object)
	.filter(/** @param {any} key */ (key) => style_object[key])
	.map(/** @param {any} key */ (key) => `${key}: ${escape(style_object[key], true)};`)
	.join(' ');
	}

which return empty string when style_object[key] is 0
quick fix to this bug is .filter(/** @param {any} key */ (key) => String(style_object[key]))