Dynamic Duplicate Class Names Get Removed
greenymcgee opened ·
Hello,
I've ran into a scenario where neither condition supplies a `className` in a `ClassDictionary`.
``` { [`text-${props.dynamicColor}`]: !!props.dynamicColor, 'text-blue': !props.dynamicColor, } ``` If `props.dynamicColor` is `blue`, then neither class gets applied. It would be ideal if the `!!props.dynamicColor` class would get applied even if it's `blue`. Otherwise one could potentially end up with a bug. I've created a [codepen](https://codepen.io/greenhouston/pen/MWKyoyP) to demonstrate. Let me know if I can answer any questions or provide anymore context.
- LU
Hi there,
This is just how JS works & it's nothing to do with clsx actually :) Objects flatten keys to its the latest value.
You can see this happening here:
```js // simplified version of your example:
let foo = { ['text-' + 'blue']: true, 'text-blue': false, }
console.log(foo); //=> { 'text-blue': false } ```
If you swapped your key order, with the `true` variant being defined last:
```js // it doesn't matter how the key is created
let foo = { 'text-blue': false, 'text-blue': true, }
console.log(foo); //=> { 'text-blue': true } ```
With this version of `foo`, clsx will give you "text-blue" output, but only because that's how the JS object resulted.
Hope that helps~!
- GR
Ya learn something new every day. Thank you for taking the time to explain some JS to me. I sincerely appreciate it!
- LU
Of course! Glad to help :)