"atomic css" as compiled output

production.css

.abcd {
  align-items: center;
}

.efgh {
  background: blue;
}

.ijkl {
  color: red;
}

production.html

<button class="abcd efgh ijkl">
  <span class="abcd ijkl"></span>
  Button
</button>

source.jsx

var React = require('react')
var StyleSheet = require('react-style')

var classes = Stylesheet.create({
  button: {
    alignItems: 'center',
    background: 'blue',
    color: 'red'
  },
  icon: {
    alignItems: 'center',
    color: 'red'
  }
});

class Button extends React.Component{
  render() {
    return (
      <button className={classes.button}>
        <span className={classes.icon} />
        Button
      </button>
    );
  }
}

export default Button;