babel-plugin-optimize-clsx

babel-plugin-optimize-clsx

Babel plugin to optimize clsx and classNames function calls

Install

yarn add babel-plugin-optimize-clsx --dev
or
npm install babel-plugin-optimize-clsx --save-dev

Example

Extract object properties

Transforms

clsx(
  'foo',
  {
    [classes.disabled]: disabled,
    [classes.focusVisible]: focusVisible && !disabled,
  },
  'bar',
);

to

clsx('foo', disabled && classes.disabled, focusVisible && !disabled && classes.focusVisible, 'bar');

Extract and create conditional expression

Transforms

clsx(
  'foo',
  {
    [classes.disabled]: disabled,
    [classes.focusVisible]: focusVisible && !disabled,
  },
  'bar',
);

to

clsx('foo', 'bar', disabled ? classes.disabled : focusVisible && classes.focusVisible);

Extract and combine

Transforms

clsx({
  [classes.disabled]: disabled,
  [classes.focusVisible]: this.state.focusVisible,
  [focusVisibleClassName]: this.state.focusVisible,
});

to

clsx(
  this.state.focusVisible && [classes.focusVisible, focusVisibleClassName],
  disabled && classes.disabled,
);

Benchmarks

Benchmarks can be found in the benchmark directory

Options

Name	Type	Default value
libraries	string[]	['clsx', 'classnames']

By default the plugin looks for import and require statements for clsx and classnames and uses that to know which function calls to optimize. If you're using another library with a compatible API you can overwrite that with this option.

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

---

Name	Type	Default value
functionNames	string[]	[]

If you want the plugin to match on all functions with a specific name, no matter where it comes from you can specify them using this option. An example for this is if you have clsx as a global function and thus don't import it.

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

Changelog

2.0.0 (2019-05-21)

Bug Fixes

• combine: don't create an arrayExpression with just one item (699d6f5)
• extract: transform static keys into string literals (#2) (213ff5b)
• helper: use count instead of total length (5ffec80)

Features

• add support for creating conditional expressions (dab4b1a)
• get function name from imports (#1) (0c18712)

Performance Improvements

• combine: skip if argument length is less than 2 (2bc0714)

BREAKING CHANGES

• No longer matches on all clsx and classnames function calls, instead looks for imports(and require) and uses the names specified there. If the file doesn't contain imports nothing will be done, to get the old behaviour back you can set the functionNames option to ['clsx', 'classnames']