Skip to content

feat: allow objects for style attribute #14832

Open
@adiguba

Description

@adiguba
Contributor

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

Activity

Ocean-OS

Ocean-OS commented on Dec 25, 2024

@Ocean-OS
Contributor

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

brunnerh

brunnerh commented on Dec 25, 2024

@brunnerh
Member

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.

Thiagolino8

Thiagolino8 commented on Dec 26, 2024

@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

adiguba commented on Dec 27, 2024

@adiguba
ContributorAuthor

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

PuruVJ commented on Dec 27, 2024

@PuruVJ
Collaborator

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

Leonidaz commented on Dec 27, 2024

@Leonidaz
Contributor

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      Participants

      @Leonidaz@brunnerh@dummdidumm@adiguba@PuruVJ

      Issue actions

        feat: allow objects for style attribute · Issue #14832 · sveltejs/svelte