fix: spreading style is not consistent with attribute

[adiguba]

• Closes Spread is not consistent with attribute for style #15309

When we pass the style value directly, set_attribute() is used.
But with spreading, it was set by an assign on element.style.cssText (or node[prop] for custom-element).

This cause the text to be parsed/corrected by the browser, and the value of the attribute will be different.

With this fix, spreading also use set_attribute() for style.

Before submitting the PR, please make sure you do the following

• It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs
• Prefix your PR title with feat:, fix:, chore:, or docs:.
• This message body should clearly illustrate what problems it solves.
• Ideally, include a test that fails without this PR but passes with it.
• If this PR changes code within packages/svelte/src, add a changeset (npx changeset).

Tests and linting

• Run the tests with pnpm test and lint the project with pnpm lint

[changeset-bot]

🦋 Changeset detected

Latest commit: c3934d6

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
svelte	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

Playground

pnpm add https://pkg.pr.new/svelte@15323

[dummdidumm]

If that is necessary, was it reall inconsistent before? Also see my question in the related issue

[Rich-Harris]

I wonder if we should go the other way, i.e. always use style.cssText? If there's a style: directive, it gets normalized anyway, meaning that this...

<script>
	let { style = 'invalid-key:0; margin:4px;;color: green ;color:blue ' } = $props();
</script>

<div {style}></div>
<div {...{style}}></div>

<div {style} style:padding={0}></div>
<div {...{style}} style:padding={0}></div>

...results in this:

<div style="invalid-key:0; margin:4px;;color: green ;color:blue "></div>
<div style="invalid-key:0; margin:4px;;color: green ;color:blue "></div>
<div style="margin: 4px; color: blue; padding: 0px;"></div>
<div style="margin: 4px; color: blue; padding: 0px;"></div>

Feels like if we're making this change for the sake of consistency, we should go all the way. In microbenchmark conditions it's slightly slower to use style.cssText but I suspect that's just because the styles are calculated lazily, meaning it would make no difference in the real world

[Rich-Harris]

Ah, I see — it makes SSR/hydration more finicky, at least as far as the tests are concerned

[svelte-docs-bot]

Preview: https://svelte-dev-git-preview-svelte-15323-svelte.vercel.app/