feat: allow objects for style attribute

[adiguba]

Describe the problem

Since #14714, Svelte allow objects/arrays for class attribute.
I think there should be an equivalent for the style attribute, at least for objects (I don't see any usage for array).

Describe the proposed solution

I expect to have something like this :

<div style={{
	'font-size': size,
	border: "1px solid",
	color
}}>
   ...
</div>

This could be easily done by wrapping the object into a function, but I think this could be handheld internaly.

Example :

https://svelte.dev/playground/hello-world?version=5.16.0#H4sIAAAAAAAACq1S24rbMBD9lakI2IbUbkpZimMH-tS-9QPWC-vLuOtEkYQ0TrM1_vdKirOJqfetGIN0zszozMwZmCiPyFL2AzmX8Ftq3kCITUfYRGzN2o6jYenjwOhVuTgHWHzK-qZUbE7IyWFVaXAJr6UgFGTLsMzUulO0K0RB3VFJTTBAbcwZRmi1PEIQJ-4a702wdUHu50hQSy415LAyVBKGQcXL-hBE2ytvuj94R28e1NmzWXJ7UWQGOdYEVSea9FTyHvPBFx69oEwq6qTY-dpZMt3mTI-LxC-NKBYZjc0dbuV4CbtlMa6LuZbNJ3VerOs6XCQ-f3mP-Doj7qT4MYvsZQOGXrkbil1BODgiaO3yPjpdQeqHvHZoJXWDOoWCbdQZjORdUzDP-HEWYozGnT-mME0YEp9u777JLHnZXHaiNNrDdxSo7eqaiwRIr8v_L1qy5PKK-6whCc_EUtI9jut3jD2ZcO7qG3hn6cJW80Zue1G72Xo_hyYCL9r6vIXQQJ6D6Dl_QwvSSL0WHr1YncZbghMlW3B5OQSy2ttNBf8m__REbKXoDo199MoXFNuGCHUYPq5PTxHkOzjBh0nEXdSxVDbkcI15Xg2HMV0Np_H5LQog3stOhME2iGZCJxHGyx_ng30a_wKyD94cWwQAAA==

Importance

nice to have

[Ocean-OS]

Would this support camelCase as well as the default text formatting?

[brunnerh]

I do not see much utility in this.

<div style={{
	'font-size': size,
	border: "1px solid",
	color
}}>
vs
<div style="
	font-size: {size};
	border: 1px solid;
	color: {color};
">

The object syntax is noisy and, as alluded to, the properties could potentially use either the CSS or DOM API format.

[adiguba]

I do not see much utility in this.

It's a bit the same with classes :

<div class={{ festive }}>
vs
<div class="{festive?'festive':''}">

Especially with array syntax :

<div class={['flex', 'festive']}>
vs
<div class="flex festive">

the properties could potentially use either the CSS or DOM API format.

This can be managed quite easily to accept both (ie : uppersace will be replaced with '-' + c.toLowerCase())

https://svelte.dev/playground/untitled?version=5.16.0#H4sIAAAAAAAACnVTYWvbMBD9K5opyGaus2xlbE4cKPswGGP9UMZgTaGOfU6UKJKRLllS4_8-SXYSe4s_GOT3nu7ene4qT6Rb8GLvp0CGHHIv9ArGQXvxU-XhsbScBQzeKu_LMtJ74GixRarhGp5JgSDQhPGmOlOsxNlczJFtS6mQVCTT-kBqUii5JTQa2d9orenEiuzHAUkmuVQkITcaUwSfLniabWgwOfGavUKHHn8sDx12IVUO6hfLcdUVnTSnGHjkLojRsj3kfuUcIC1MAbc2A41dorDBm6iP9lZMqJac5bRHuYQt4gqwx9qmnI4ujRCOig2ogUNm3DKRx_uU7yCpHFe7fk1liUyKmSt9Omr_-swOrhJLBSCuMgryDm5sOQvmaOsc8GSpvqXxu_JwNbx9h6vE-7sh4lOP6Djq9HTAWEfxj7-BZB8G8CHXn4e8mZ_VuBkg82ZmgH13DuqZ26TpaDVuVKWCWfXt8eFHpFExsWTFsZGGROw4D8ldUFvhVxCgzJTm7VTGzZj2YlsHNp6jhFk0hAN6Maod1OHAwrbL1d_WC9hZ1bmJ5ha02InMVkya3AFp14IVxNckSZzxMzpHBbhTwqHNCmN9uWBNyYLYewmhcrE2_aP_X35wRGSsKAbaJD3xc4xMQQjK95_C_XNAkhnZkzetiY5qm5ZGsjlpqgt1TvJyU20iBaXZJ7jn3B893d_-fh4tQ-JnQTKjt_RtFqH8Lv-A-mK65QdBHd9U-_plcolWn5MSEq0lEz6d0KBXd5tOu1t1_52e679it_iDdgUAAA==

[Thiagolino8]

the properties could potentially use either the CSS or DOM API format.

This can be managed quite easily to accept both (ie : uppersace will be replaced with '-' + c.toLowerCase())

Accepting both would be the worst case scenario
If the proposal goes ahead only one standard should be accepted
I think it should be the CSS format

[adiguba]

The "camelCase" format has the advantage to be compatible with shorthand properties :

<!-- using text : -->
<div style="font-weight: {fontWeight}; font-size: {fontSize} background-color: {backgroundColor}"> ... </div>

<!-- using style: directive : -->
<div style:font-weight={fontWeight} style:font-size={fontSize} style:background-color={backgroundColor}> ... </div>

<!-- using JS object : -->
<div style={{fontWeight, fontSize, backgroundColor}}> ... </div>

[PuruVJ]

I'm in with this idea, it would allow passing dynamic CSS to children, like the new improvements in svelte 5. I would go with fontWeight instead of font-weight, simply cuz it's easier to type out and quite readable as well

[Leonidaz]

I do not see much utility in this.

It's a bit the same with classes :

<div class={{ festive }}>
vs
<div class="{festive?'festive':''}">

Especially with array syntax :

<div class={['flex', 'festive']}>
vs
<div class="flex festive">

the properties could potentially use either the CSS or DOM API format.

This can be managed quite easily to accept both (ie : uppersace will be replaced with '-' + c.toLowerCase())

https://svelte.dev/playground/untitled?version=5.16.0#H4sIAAAAAAAACnVTYWvbMBD9K5opyGaus2xlbE4cKPswGGP9UMZgTaGOfU6UKJKRLllS4_8-SXYSe4s_GOT3nu7ene4qT6Rb8GLvp0CGHHIv9ArGQXvxU-XhsbScBQzeKu_LMtJ74GixRarhGp5JgSDQhPGmOlOsxNlczJFtS6mQVCTT-kBqUii5JTQa2d9orenEiuzHAUkmuVQkITcaUwSfLniabWgwOfGavUKHHn8sDx12IVUO6hfLcdUVnTSnGHjkLojRsj3kfuUcIC1MAbc2A41dorDBm6iP9lZMqJac5bRHuYQt4gqwx9qmnI4ujRCOig2ogUNm3DKRx_uU7yCpHFe7fk1liUyKmSt9Omr_-swOrhJLBSCuMgryDm5sOQvmaOsc8GSpvqXxu_JwNbx9h6vE-7sh4lOP6Djq9HTAWEfxj7-BZB8G8CHXn4e8mZ_VuBkg82ZmgH13DuqZ26TpaDVuVKWCWfXt8eFHpFExsWTFsZGGROw4D8ldUFvhVxCgzJTm7VTGzZj2YlsHNp6jhFk0hAN6Maod1OHAwrbL1d_WC9hZ1bmJ5ha02InMVkya3AFp14IVxNckSZzxMzpHBbhTwqHNCmN9uWBNyYLYewmhcrE2_aP_X35wRGSsKAbaJD3xc4xMQQjK95_C_XNAkhnZkzetiY5qm5ZGsjlpqgt1TvJyU20iBaXZJ7jn3B893d_-fh4tQ-JnQTKjt_RtFqH8Lv-A-mK65QdBHd9U-_plcolWn5MSEq0lEz6d0KBXd5tOu1t1_52e679it_iDdgUAAA==

👍 Definitely a great idea! Even though it can be done in user-land, I agree that it would be really convenient to have svelte supporting this out of the box like it does now with classes, especially given how little code the cssx function produces for the runtime (187 bytes white space removed).

I also agree that it should support both css prop syntax and camel case to avoid dealing with accessing object props with a string notation ['some-thing'] and easier object composition { 'font-style': fontStyle } vs { fontStyle }

Depending on a use case, would be much more convenient than using the style: directive.

<script>
let style = $state({
	fontSize: '16px',
	borderStyle: 'solid',
	borderWidth: '1px',
	color: 'black',
});
</script>

<input {style}>

vs

<script>
let style = $state({
	fontSize: '16px',
	borderStyle: 'solid',
	borderWidth: '1px',
	color: 'black',
});
</script>

<input
   style:font-size={style.fontSize}
   style:border-style={style.borderStyle}
   style:border-width={style.borderWidth}
   style:color={style.color}
>

While at it, would be great if the style: directive supported camel case as well, e.g. style:border-style could also be written as style:borderStyle