Open
Description
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 :
Importance
nice to have
Activity
Ocean-OS commentedon Dec 25, 2024
Would this support camelCase as well as the default text formatting?
brunnerh commentedon Dec 25, 2024
I do not see much utility in this.
The object syntax is noisy and, as alluded to, the properties could potentially use either the CSS or DOM API format.
adiguba commentedon Dec 26, 2024
It's a bit the same with classes :
Especially with array syntax :
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 commentedon Dec 26, 2024
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 commentedon Dec 27, 2024
The "camelCase" format has the advantage to be compatible with shorthand properties :
PuruVJ commentedon Dec 27, 2024
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 offont-weight
, simply cuz it's easier to type out and quite readable as wellLeonidaz commentedon Dec 27, 2024
👍 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.vs
While at it, would be great if the
style:
directive supported camel case as well, e.g.style:border-style
could also be written asstyle:borderStyle
$ref()
rune for using directives on components #14831