class: convert to string in the optimizer

[wmertens]

What is it about?

minimize runtime work for the class attribute

What's the motivation for this proposal?

Problems you are trying to solve:

• class={{[styles.foo]: condition}} is nice to write but it has runtime overhead

Goals you are trying to achieve:

• minimal runtime overhead where possible

---

Proposed Solution / Feature

What do you propose?

the optimizer should:

• rewrite class objects into arrays {[styles.foo]: condition} => [condition && styles.foo] arrays
• flatten arrays
• concatenate all static array elements ['meep', condition && styles.foo, 'bar'] => ['meep bar', condition && styles.foo]
• unwrap an array with only a string

Links / References

No response

[maiieul]

Or simpler solution is we deprecate the object form 🤪 And explain people that it has runtime overhead for no clear gains. FWIW it's what they did in twMerge dcastil/tailwind-merge#137 (comment).

[wmertens]

hmm good point! Should we deprecate in v2 or remove in v2? But then the migration script needs to do this change

[ianlet]

Before deprecating, can we see the numbers?

I've seen developers trying Qwik for the first time be pleasantly surprised by small conveniences like class={{ foo: condition }} working out of the box. These "it just works" moments help shape early perception and thus adoption. For a framework still growing its community, that first impression carries weight.

Since Qwik emphasizes both performance and DX, it'd be helpful to see benchmarks showing there is an actual performance issue in practice before deprecating. If it does, the compile-time optimization seems like a nice middle ground as it addresses perf without touching DX. But I understand this is more code to maintain in the core.

Personal opinions (take or leave):

• The twMerge comparison doesn't quite fit. They're solving class merging, not conditional application. Different problem.
• For projects that outgrow the built-in syntax, cn() (clsx + twMerge) is already the natural next step. The object notation serves the getting-started experience well, which is important for adoption.