Better class merging utility function.

[TeddyLourson]

Description

Coming from tailwind, they have a utility package called tailwind-merge that allows to merge mutiple classnames into one and avoid conflicts.

From what I understood there is the cx utility function that acts the same in panda but not quite the way I expect it to work.

Problem Statement/Justification

I have a simple Card component with a cva that has some pre-defined padding as a base.
Then I merge the class passed as props with cx.

  return (
    <div
      class={cx(
        card({ intent, on, disabled }),
        classList?.toString()
      )}
      {...rest}
    >
      <Slot />
    </div>
  );

For simplicity's sake, let's say the class given as props is css({p:0}). Since the classList given as props is the second arg of cx I expect it to override the base padding of the card cva. However, I can see the padding is still there.

Isn't that how cx is supposed to work ?

Proposed Solution or API

The classes passed to cx (or maybe a potential new utility function pandaMerge) should merge in a way that the classes passed as second, third,... arguments should override the previous ones whenever they have conflicting classes.

Alternatives

I can add an exclamation mark to make the passed class as important but that's not ideal.

I can add a noPadding variant to the cva which sets padding: 0 but that's not ideal.

Additional Information

No response

[rolanday]

+1. putting it more simply for the following expression:

cx(css({ bg: "red.500" }), css({ bg: "red.200" }));

expecting:

bg_red.200

actual:

bg_red.500 bg_red.200

[anubra266]

@rolanday This is exaclty what cx is built for, it simply concatenates strings

[rolanday]

Thanks for the response. Is there a tailwind-merge equivalent? Issue I'm seeing is last style does not always win, which can be a problem if wanting to override a component style.

After cx'ing, I have something like text_blue text_green which is styled as blue, expecting green (and, ideally, reduced to just text_green). Can panda handle this?

Thanks!

-Roland.

[anubra266]

@rolanday The team is currently looking into a solution that matches this

[TeddyLourson]

The cx utility function doesn't seem to be working the way I described it above (or the way @rolanday explained). Seems like a dealbreaker (to me atleast) if you can't "override" the classes in a component in a predictable way. I expect it to work the same as tailwind's twMerge or pretty close to it.

[osdiab]

I ran into this issue as well and posted it in Discord, though phrased it differently with emotion as my frame of reference regarding overriding default styles. Having such a utility seems essential for Panda to allow for style composability at the same level as other CSS in JS frameworks.

[osdiab]

For those tuning in, this is the fabled PR

#1195

[lukemartin]

+1 for this. I was just trying to fix a simple rendering issue on the Panda docs site, and I'm unable to proceed because I can't override some default padding defined at the component level.

Given these two outputs:

<div class="p_3 p_5">...</div>
<div class="p_5 p_3">...</div>

The winner here will either be p_3 or p_5 depending on where the classes are defined in the CSS file, not by the order of classes in the class attribute, which isn't an easy thing to control.

[anubra266]

#1195

[theMasix]

#2056

[brettinternet]

Thank you very much for the improvement in #1195. Is there any way for css class styles to override the styled styles?

e.g. https://play.panda-css.com/Q6USHNgHNe

[brettinternet]

It looks like the appropriate way to override styled styles is with the css prop #804 (comment)

[brettinternet]

So the order of specificity appears to be:

1. css prop css={{ color: 'blue' }}
2. color prop on styled components color="red"
3. styled component definition styled('div', { color: 'hotpink' }), with variants taking higher priority
4. cx class names from last to first className={cx([yellowClassName, redClassName])}

While the first three options will consolidate the overrides into one DOM class, if you also have classes defined then they'll also show up. This is probably expected.

In other words, for a single component you should probably stick to either styled() and its css={{}} prop or use classNames with cx{[]}.

Do I have that right?