Support ergonomic merging styles into child components

[JAStanton]

const STYLES = dapper.compile({
  root: {
    position: 'relative',
  },
  child: {
    position: 'absolute',
    top: 0,
    left: 0,
  },
});

class Parent extends Component {
  
  styles = dapper.reactTo(this, STYLES);

  render() {
    return (
      <div className={this.styles.root}>
        <Child className={this.styles.child} />
      </div>
    );
  }
}

const STYLES2 = dapper.compile({
  root: {
    color: 'red',
  },
});

class Child extends Component {

   styles = dapper.reactTo(this, STYLES2);

  render() {
    return (
      <div className={this.styles.root} />
    );
  }

}

I would expect Child styles to compile to:

.dapper-child-a {
  color: 'red',
  position: 'absolute',
  top: 0,
  left: 0,
}

[RylanH]

Does add ergonomics for sure, and I'd agree it would be good once we implement #39.

Downside are:

• there is no guarantee someone defined he prop in the TS typings or propTypes
• its a bit "magic"