babel-plugin-transform-cx

Transform cx calls to string literals

Example

In

class ComponentName extends React.Component {
  constructor(props) {
    super(props);
  }
  
  render() {
    return (
      <div className={cx('myClass', 'anotherClass')}>
        {this.props.children}
      </div>
    );
  }
}

babelCxTransform.setSelectorMap({
  'myClass': 'a',
  'anotherClass': 'b',
});

Out

class ComponentName extends React.Component {
  constructor(props) {
    super(props);
  }
  
  render() {
    return (
      <div className="a b">
        {this.props.children}
      </div>
    );
  }
}

Check a real world example here.

Installation

$ npm install babel-plugin-transform-cx

Usage

Via .babelrc (Recommended)

.babelrc

{
  "plugins": ["transform-cx"]
}

Via CLI

$ babel --plugins transform-cx script.js

Via Node API

require("babel-core").transform("code", {
  plugins: ["transform-cx"]
});