Svelte 5: Add class:list directive

[brandonmcconnell]

Describe the problem

One of the most common packages many repos install once they pick up steam is clsx or a similar library to help manage their classes. While svelte already allows for easy CSS class name interpolation, a convention like clsx allows an even more flexible approach, filtering out nullish and boolean values, and preserving intended class names.

<!-- without clsx -->
<a class="staticClass {condition ? 'truthyClass' : 'falsyClass'}">…</a>

<!-- with clsx -->
<a class={clsx('staticClass', condition && 'truthyClass')}>…</a>

This is why…

• over 4,000 different public svelte projects on GitHub alone also install clsx (proof 🍮)
• nearly 1,000 different public svelte projects on GitHub alone also install classnames (proof 🍮)

Describe the proposed solution

Building this functionality into svelte directly using a directive like Astro's class:list directive would bring this capability to all svelte users, allowing svelte developers to add and manage classes more effectively, like this:

<!-- with class:list -->
<a class:list={['staticClass', condition && 'truthyClass']}>…</a>

Prior Art

Astro is the most recent and prominent prior art here, but users have been using clsx and others like it for years. This would provide a unified and built-in way to help manage classes for svelte developers.

Svelte has always been a "batteries included" framework, and I think the addition of a directive like this would follow that same trend.

Below is a list of all the issues I found related to Astro's implementation and refinement of class:list. That team started with a custom solution, but due to some gotchas, they ended up refactoring to build upon clsx itself.

• Related issues: https://github.com/withastro/astro/pulls?q=is%3Apr+class%3Alist+sort%3Acreated-asc
• Docs: https://docs.astro.build/en/reference/directives-reference/#classlist

Importance

would make my life easier

[brunnerh]

There already is a class: directive, so this is not going to work.

<a class:truthyClass={condition}>

Adding the clsx functionality has been requested before, but the only thing I see missing is multiple classes in one class: directive, which is covered by this issue.

[henrikvilhelmberglund]

This is really the only problem I have in Svelte, missing the ability to have multiple classes in one directive.
I think instead of class:list it should be classes: or just class: reworked to allow for both single and multiple classes.

[ottomated]

@brunnerh one thing missing from that is ternary classes, i.e.

<div
  class:border-red={someExpensiveFn()}
  class:border-green={!someExpensiveFn()}
/>

vs

<div class={clsx([someExpensiveFn() ? 'border-red' : 'border-green'])} />

(and yes, this can be done with string interpolation, but it causes performance issues as the entire className has to be updated rather than just the classes in question toggled)

[aholland]

The shorthand class directive would be really neat if only it automatically mapped camelCase to kebab-case. I could rename my classes, but there are css frameworks to consider.

[diegoulloao]

I really like the Astro approach on this. Should be implemented in Svelte as well. +1