feat: allow objects/arrays for class attribute

[dummdidumm]

This basically implements https://github.com/lukeed/clsx within Svelte, allowing people to use objects/arrays to conditionally set classes. This has a couple advantages over class:, including:

• allowing you to set multiple classes at once (closes Allow multiple classes in class: directive #7170, closes Svelte 5: Add class:list directive #12610)
• allowing you to set classes with special characters in them (closes Class directive breaks with token "/" for TailwindCSS width classes #4072)
• since the power and expressiveness of array/object syntax is at your disposal, dynamic conditional classes are possible (closes Dynamic conditional CSS classes #7294)
• allowing you to use the same syntax on component props, and you can just forward it to the class attribute

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: 7650bb4

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
svelte	Minor

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

[github-actions]

Playground

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

[Rich-Harris]

preview: https://svelte-dev-git-preview-svelte-14714-svelte.vercel.app/

this is an automated message

[ottomated]

I really love this feature. I'm not super knowledgeable in css performance, but would it be worth it eventually to precompile optimized versions of this?

For example, if svelte sees a static object key at compile time:

<div class={{ 'a b c': condition, d: condition2 }}></div>

it could generate something like this:

$.toggle_classes(div_1, ["a", "b", "c"], condition);
$.toggle_class(div_1, "d", condition2);

which is more fine grained and avoids setting the entire className when one condition changes.

Any more complicated dynamic classes could still use clsx under the hood:

<div class={{ foo: condition, [dynamic_classes]: condition2 }}></div>

$.toggle_class(div_1, "foo", condition);
$.set_class(div_1, $.clsx({ [dynamic_classes]: condition2 }), "");

[ottomated]

Alternatively, would it simplify things to compile directly to a ternary statement?

<div class={{ foo: condition, [dynamic_classes]: condition2 }}></div>

could become

$.set_class(div_1, (condition ? "foo" : "") + (condition2 ? ` ${dynamic_classes}` : ""), "");

which seems like it would be more performant and remove the need for some of the metadata that this feature added.

[dummdidumm]

I would need to perf test this to be sure, but I'm pretty certain that the runtime overhead of this is negligible. Turning specific statements into ternaries is interesting, but again I'm unsure if the perf impact is visible, also it results in a bit more code per component

[ottomated]

Turning specific statements into ternaries is interesting, but again I'm unsure if the perf impact is visible, also it results in a bit more code per component

True, it does add a bit of code size, although it does enable rollup to treeshake it (the pattern of clsx({ 'foo': true' }) is common).

[Rich-Harris]

going to tweak the docs because this looks a bit nutty 😆

[adiguba]

Hi,

Just a little question : <div class={clazz}> will generate something like this :

$.set_class(div, $.clsx(clazz), "")

Any reason to call $.clsx() here ?
Couldn't this be done inside set_class() ?

[Rich-Harris]

If the compiler is certain that it's unnecessary, then it doesn't get added. Putting it inside set_class would mean it was included in the bundle for every app that has a class attribute

[wbudd]

Great to have this feature!

Question: the doc text of this PR states:

Since Svelte 5.15, class can be an object or array, and is converted to a string using clsx.

But Svelte 5.15 was released a few days ago it and doesn't contain this yet it seems... deferred to 5.16 maybe? (Just eager to get my hands on this one!)

[dummdidumm]

Thanks, fixed (you won't have to wait much longer)

[orefalo]

Great, can you make it work with custom components?

<Navbar
    class={{
        'fixed start-0 top-0': true,
        'border-b': scrollPos,
        'bg-gray-50': !scrollPos
    }}
>