Support JSX props about babel-plugin-optimize-clsx HOT 5 CLOSED

@merceyz The last iteration I had on an unstyled version of the Material-UI components was using the following:

cxFactory.js

import capitalize from './capitalize';

export default function cxFactory(classes, name) {
  return (key1, key2) => {
    if (classes && classes[key1]) {
      return classes[key1];
    }
    return `${name}-${key1}${key2 ? capitalize(key2) : ''}`;
  };
}

Component.unstyled.js

  const cx = cxFactory(classes, 'MuiTableCell');

  return (
    <Component
      ref={ref}
      {...passProps('root', { variant, table, align, padding, size, as })}
      className={clsx(
      className={clsx(
        cx('root'),
        {
          [cx('head')]: variant === 'head',
          [cx('stickyHeader')]: variant === 'head' && table && table.stickyHeader,
          [cx('body')]: variant === 'body',
          [cx('footer')]: variant === 'footer',
          [cx('align', align)]: align !== 'inherit',
          [cx('padding', padding)]: padding !== 'default',
          [cx('size', size)]: size !== 'medium',
        },
        className,
      )}

But it was just an experiment, in which we still rely on clsx. Unless we come up with a solution that doesn't require to merge classnames, not like above, I believe we will keep using clsx? What other concern do you have in mind, that we switch back to classnames (I doubt it)?
clsx seems to start to grow outside of Material-UI, which is great, I hope it will become a standard in the React community.

from babel-plugin-optimize-clsx.

Hello,

Sure, sounds like a perfectly reasonable target for optimization. Is this something you'd be willing to implement?

from babel-plugin-optimize-clsx.

I'll try find some time to have a crack 👍

from babel-plugin-optimize-clsx.

@MattsJones If you don't have time I can take care of it, I have some ideas on how this could be done.

@oliviertassinari @eps1lon what is the likelyhood that Material-UI will continue to have all components run their className run through clsx? Could make Material-UI a default target for this optimization.

from babel-plugin-optimize-clsx.

What other concern do you have in mind

I was planning on having material-ui components be a target of this optimization by default, but for that to happen the className prop of all the components must always be passed to something like clsx. This makes this project depend on the internals of material-ui though so I scrapped that rather quickly.

from babel-plugin-optimize-clsx.