[Svelte 5] style-directive reactivity problems

[adiguba]

Describe the bug

I found two problems with reactivity with the style:property directive.

1. The style directive is not reactive when used with a function.
   Example :

<div style:background-color={getColor()}>1</div>

I think that the $.style() should be inside a $.render_effect(), but this is not the case.

---

2. All the style-directives of an element are re-rendered when one of the state change.

<div style:background-color={color} style:color={randomColor()}>2</div>

randomColor() is not a reactive function, but it's called when the color state is updated.

All the $.style() are inside the same $.render_effect().
I think they should have separate calls...

---

Perhaps all the $.style() should be called directly, and the $.render_effect() be called inside the $.style() function.

Reproduction

See REPL

Logs

No response

System Info

REPL

Severity

annoyance

[adiguba]

Another example with this REPL

Check "Show Blocks" to show the blocks, when edit the title via the checkbox.
=> The associed style:opacity will be applied again, even if it's a static non-reactive value !

Working example on Svelte 4 : REPL

If we use a reactive attribute on a element, all the associated style:property directive will be re-rendered on each update, even if the value is not modified.

	$.render_effect(() => {
		if (div_2_title !== (div_2_title = $.get(title))) {
			$.attr(div_2, "title", div_2_title);
		}

		// this should not be here, or under a if clause
		$.style(div_2, "opacity", "0.2");
	});