🦋 Changeset detected

Latest commit:7650bb4

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

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

Playground

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

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

this is an automated message

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:

<divclass={{'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:

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

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

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

<divclass={{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.

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

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 ofclsx({ 'foo': true' }) is common).

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

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 insideset_class() ?

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 aclass attribute

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 usingclsx.

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!)

Great, can you make it work with custom components?

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

It does.NavBar just needs to useprops.class

Out of curiosity, are there any plans to deprecate/remove theclass: directive, even if just for the sake of having one good, idiomatic way of doing things?

I believe the intention is to eventually deprecate it and then later remove it, but I don't know that there's a specific timeline in mind for that.

IMHO I think that the style directive is still useful, since it actually takes precedence over the class attribute, and allow to remove classnames, which is not possible with clsx() alone.

For example :

<script>let active=$state(false);</script><divclass={["active", {active}]}></div><divclass="active"class:active></div>

Will output :

<divclass="active"></div><div></div>

Soclass:directives allows the component to keep control of some classes.

Exemple in REPL

That's an interesting example, but is there a use-case for wanting to remove classes from the class list (instead of just controlling them directly)?

It could be usefull if you spread the class, but want to have the control on some class name.