content: import React from 'react';
  import {StyleSheet, css} from 'aphrodite-simple';
  
  const decorateBaseComponent = Component => {
    return class BaseComponent extends Component {
      constructor() {
        super();
        this.styles_ = this.createStyleSheet();
        this.cssHelper = this.cssHelper.bind(this);
      }
  
      createStyleSheet() {
        if (!this.styles) {
          return {};
        }
  
        const styles = this.styles();
  
        if (typeof styles !== 'object') {
          throw new TypeError('Component `styles` returns a non-object');
        }
  
        return StyleSheet.create(this.styles());
      }
  
      // wrap aphrodite's css helper for two reasons:
      // - we can give the element an unaltered global classname
      //   that can be used to introduce global css side effects
      //   for example, through the configuration, web inspector
      //   or user agent extensions
      // - the user doesn't need to keep track of both `css`
      //    and `style`, and we make that whole ordeal easier
      cssHelper(...args) {
        const classes = args
          .map(c => {
            if (c) {
              // we compute the global name from the given
              // css class and we prepend the component name
              //
              // it's important classes never get mangled by
              // uglifiers so that we can avoid collisions
              const component = this.constructor.name.toString().toLowerCase();
              const globalName = `${component}_${c}`;
              return [globalName, css(this.styles_[c])];
            }
            return null;
          })
          // skip nulls
          .filter(v => Boolean(v))
          // flatten
          .reduce((a, b) => a.concat(b));
        return classes.length ? classes.join(' ') : null;
      }
  
      render() {
        // convert static objects from `babel-plugin-transform-jsx`
        // to `React.Element`.
        if (!this.template) {
          throw new TypeError("Component doesn't define `template`");
        }
  
        // invoke the template creator passing our css helper
        return this.template(this.cssHelper);
      }
    };
  };
  
  export const PureComponent = decorateBaseComponent(React.PureComponent);
  export const Component = decorateBaseComponent(React.Component);
  