Install

yarn add babel-plugin-optimize-clsx --devornpm install babel-plugin-optimize-clsx --save-dev

Requirements

Examples

Object properties

clsx({[classes.disabled]:disabled,[classes.focusVisible]:focusVisible&&!disabled,});// Transforms toclsx(disabled&&classes.disabled,focusVisible&&!disabled&&classes.focusVisible);

Conditional expressions

clsx({[classes.disabled]:disabled,[classes.focusVisible]:focusVisible&&!disabled,});// Transforms toclsx(disabled ?classes.disabled :focusVisible&&classes.focusVisible);

Combine arguments

clsx({[classes.focusVisible]:this.state.focusVisible,[focusVisibleClassName]:this.state.focusVisible,});// Transforms toclsx(this.state.focusVisible&&[classes.focusVisible,focusVisibleClassName]);

PropTypes

functionfoo(props){const{position:p}=props;constx=clsx({[classes.x]:p==='top',[classes.y]:p==='bottom',});}foo.propTypes={position:PropTypes.oneOf(['top','bottom']),};// Transforms tofunctionfoo(props){const{position:p}=props;constx=clsx(p==='top' ?classes.x :classes.y);}foo.propTypes={position:PropTypes.oneOf(['top','bottom']),};

String literals

constx=clsx({btn:true,'col-md-1':true,['btn-primary']:true,});// Transforms toconstx='btn col-md-1 btn-primary';

Unnecessary function calls

constx=clsx({btn:true,'btn-foo':isDisabled,'btn-bar':!isDisabled,});// Transforms toconstx='btn '+(isDisabled ?'btn-foo' :'btn-bar');

Benchmarks

Options

{"plugins": [["babel-plugin-optimize-clsx",{"libraries": ["clsx","classnames","my-custom-library"]}]]}

{"plugins": [["babel-plugin-optimize-clsx",{"functionNames": ["myClsxImplementation"]}]]}

importclsxfrom'clsx';constx=clsx('foo','bar');consty=clsx({classA:foo==='a',classB:foo!=='a'});constz=clsx({classA:foo==='a',classB:foo!=='a',classC:bar==='c',classD:bar!=='c',});// Transforms toconstx='foo bar';consty=foo==='a' ?'classA' :'classB';constz=(foo==='a' ?'classA ' :'classB ')+(bar==='c' ?'classC' :'classD');