Thanks for your amazing work here!

I think we should add obj-str and classcat to default libraries.

obj-str's author is the same of clsx: @lukeed.

I will ask them to link to this project in their Readme.

See for why https://twitter.com/lukeed05/status/1740841680364773646

It would help reduce the bundle size on Material UI's side: mui/material-ui#40366.

cc @lukeed

Input:

clsx(a, b, { [foo]: bar }, c);

Output:

clsx(a, b, c, bar && foo)

Problem

In the generated call, when bar is true, the expression results in clsx(a, b, c, foo) it should be clsx(a,b,foo,c).

The order of classes th in the class attribute matters: https://codepen.io/dfernandez-asapp/pen/mdJBQOX

I've noticed incorrect behavior when clsx is called with an object with computed property names.
A simplified case:

const checkedClassName = 'checked';

const stateClasses = {
    [checkedClassName]: isChecked,
};

return (
    <div className={clsx(stateClasses)} />
);

produces the following output:

var checkedClassName = 'checked';
var stateClasses = (0, _clsx["default"])(isChecked && checkedClassName);
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
    className: clsx(stateClasses)
});

Notice the clsx instead of _clsx in 4th line.

If, however, the stateClasses object is used in any way before being passed in to clsx, all the calls are correctly transformed:

const checkedClassName = 'checked';

const stateClasses = {
    [checkedClassName]: isChecked,
};

console.log(stateClasses);

return (
    <div className={clsx(stateClasses)} />
);

is transformed into

var checkedClassName = 'checked';
var stateClasses = (0, _defineProperty2["default"])({}, checkedClassName, isChecked);
console.log(stateClasses);
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
    className: (0, _clsx["default"])(stateClasses)
});

I tried this out for DIM in DestinyItemManager/DIM#4225 but ended up having to roll back because we saw the list of classes for some of our components getting collapsed into nothing. I tried writing a test in this repo that matched what we were doing, but it worked there. So it must have been something about our particular setup, either with babel/webpack caching or something else.

The code that was getting messed up looked like this:

classNames('store-cell', 'account-wide', `bucket-${bucket.id}`);

I think if I remember right this was getting transformed into the string "bucket-".

I'm not sure if there were other parts that were getting broken. It had looked fine when running in the development server, but after I had to roll back I noticed that if I was running in the dev server it would render fine on the first pass, but if I hot-reloaded a file then it would start deleting my classes.

Hey 👋

Was wondering if you'd be interested in supporting JSX props as valid targets for optimisation? Our component library uses the clsx API for it's className prop and would be a valid target for optimisation.

e.g.

<Box className={{
  [classes.disabled]: disabled,
  [classes.focusVisible]: focusVisible && !disabled,
}} />

// Transforms to

<Box className={[disabled && classes.disabled, focusVisible && !disabled && classes.focusVisible]} />

Understand this is a slightly different scenario but still relevant.

Hi @merceyz thanks for this plugin.

I was wonder if it possible to support Tagged template literals. Here an example with cslx:

const classes = clsx`bg-white text-gray-800`;
const multiline = clsx`
  bg-white
  text-gray-800
`;