CSS-in-JS to CSS

Button.jsx

import React from 'react';
import styles from './styles.css.js';

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

export default Button;

styles-converted-by-webpack.css

/* same output as css-loader's :local() provides */
.hash1 {
  align-items: center;
  background: blue;
  color: red;
}

.hash2 {
  align-items: center;
  color: red;
}

styles.css.js

import theme from '../theme';

const styles = {
  button: {
    alignItems: 'center',
    background: theme.background,
    color: theme.color
  },
  icon: {
    alignItems: 'center',
    color: theme.color
  }
};

export default styles;

I dig this style - is this related to what you're doing with react-web-sdk? I'd love to use this as an alternative to css-loader?modules ...