lol @ psuedo-selector inline styles

lol.jsx

// lol
var StyleNode = React.createClass({
  getInitialState: function() {
    return {
      hover: false,
      active: false,
      focus: false
    };
  },

  styles: function() {
    var child = React.Children.map(this.props.children, function(child) {
      return child;
    }).first();

    return _.extend.apply(null, [{}].concat((child.props.styles || []).concat([
      child.props.style,
      this.props.style,
      this.state.hover && this.props.hover,
      this.state.active && this.props.active,
      this.state.focus && this.props.focus
    ])));
  },

  render: function() {
    return React.Children.map(this.props.children, function(child) {
      return React.cloneElement(child, {
        onMouseEnter: function(ev) { this.setState({ hover: true }); }.bind(this),
        onMouseLeave: function(ev) { this.setState({ hover: false, active: false }); }.bind(this),
        onMouseDown: function(ev) { this.setState({ active: true }); }.bind(this),
        onMouseUp: function(ev) { this.setState({ active: false }); }.bind(this),
        onFocus: function(ev) { this.setState({ focus: true }); }.bind(this),
        onBlur: function(ev) { this.setState({ focus: false }); }.bind(this),
        style: _.extend.apply(null, [{}].concat(this.styles()))
      });
    }.bind(this)).first();
  }
});

// hello world
<StyleNode style={{ ... }} hover={{ ... }}><a>Hello World</a></StyleNode>