Aphrodite as CSS Modules

any-component.js

import styles from './styles.js';


redner() {
  const props = this.props;
  
  const classList = classname(props.className, css.button, {
    [css.primary]: props.primary
  });
  
  return <Button className={classList}>{this.props.children}</Button>
}

aphrodite-css-helper.js

import { StyleSheet, css } from 'aphrodite/no-important';

export default stylesheet => {
  const styles = StyleSheet.create(stylesheet);
  
  return Object.keys(stylesheet).reduce((classList, className) => {
    classList[className] = css(styles[className]);
    return classList;
  }, {});
};

style.js

import css form 'aphrodite-css-helper.js';

export default css({
  button: {
   color: 'white'
  },
  primary: {
   color: 'blue'
  },
});

This is how we use CSS in JS: Aphrodite + little helper.
Use Aphrodite as CSS Modules :)