babel-plugin-reactjss-class-info v1.1.2

babel-plugin-reactjss-class-info

This is experimental specific solution to a problem for integrating Selenium tests with reactjss. I do not plan adding features unless there is a personal need, but feel free to use this if it benefits you.

Install

npm install --save-dev babel-plugin-reactjss-class-info

Usage

.babelrc

{
  plugins: ["reactjss-class-info"]
}

Examples

Input

myfile.js

import React from 'react';
import classnames from 'classnames';

class ReactComponent extends React.Component {
  render() {
    const { classes } = this.props;

    return(
      <ReactComponent className={classes.main}>
        <header
          onClick={this.handleClick}
          className={classnames({
            [classes.header]: true,
            [classes.hovered]: false
          })}
        />
        <div
          id="component-body"
          className={classnames(
            [classes.one, classes.two],
            classes.three,
            { [classes.four]: true }
          )}
        >
          I am the body
        </div>
      </ReactComponent>
    )
  }
}

Output

myfile.js

import React from 'react';
import classnames from 'classnames';

class ReactComponent extends React.Component {
  render() {
    const { classes } = this.props;

    return(
      <ReactComponent
        className={classes.main}
        data-qa-class="myfile_ReactComponent_main"
      >
        <header
          onClick={this.handleClick}
          className={classnames({
            [classes.header]: true,
            [classes.hovered]: false
          })}
          data-qa-class="myfile_header_header-hovered"
        />
        <div
          id="component-body"
          className={classnames(
            [classes.one, classes.two],
            classes.three,
            { [classes.four]: true }
          )}
          data-qa-class="myfile_div_one-two-three-four"
        >
          I am the body
        </div>
      </ReactComponent>
    )
  }
}

Currently, the plugin will output the class in the following format:

[filename]_[component name]_[all classes delimited by -]