feat: allow objects/arrays for style attribute

[adiguba]

• Closes feat: allow objects for style attribute #14832
• Allow the style attribute to accept objects/arrays, in a way similar to feat: allow objects/arrays for class attribute #14714 (I based this PR on this work)

style can receive strings/arrays/objects to build the style CSS text :

• strings are left untouched.
• the key/values of objects are transformed into CSS property/value, by converting property name to kebab-case.
• arrays are flatten and joined.

All these lines are equivalent :

<div style="font-size: 1em; opacity: 0"></div>
<div style={{'font-size': '1em', opacity: 0}}></div>
<div style={{fontSize: '1em', opacity: 0}}></div>
<div style={{font_size: '1em', opacity: 0}}></div>
<div style={['font-size: 1em', 'opacity: 0']}></div>
<div style={['font-size: 1em', {opacity: 0}]}></div>

Notes :

• I added a test but it currently fail due to issue Spread is not consistent with attribute for style #15309
  Will fix it according to the decision of this issue...
• I wrote the docs, but I am not an english speaker, so this should be read/corrected.
• I have a doubt for line 58 of src/compiler/phases/2-analyze/visitors/Attribute.js
  For class there a call to mark_subtree_dynamic(context.path) but I don't know if this is required here.

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: e6717ca

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

[svelte-docs-bot]

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

[github-actions]

Playground

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

[Thiagolino8]

I think allowing multiple casings is actually a mistake, as it would remove what would probably be the biggest value added by this feature, which would be intellisense

[Ocean-OS]

I like this, but I'm not sure why arrays would be allowed in the style attribute, aren't objects sufficient for most scenarios?

[adiguba]

@Thiagolino8 : personally I like the idea of having the choice between snake_case or camelCase.
But if multiple casings will cause problems with intellisense, we can restrict to one (but whitch one ?)

@Ocean-OS : like for classes, arrays allow to simply extends a value received from props, who can be a string or an object...