Automatically include "extended" CSS

[tizmagik]

Currently, only the first-level CSS is included/injected by react-csjs out of the box. It would be nice to also include all of the "extended" styles as well.

See rtsao/csjs#51 for more details.

[tizmagik]

As a workaround for now, instead of doing this:

const labelBase = csjs`
  .boldBase {
    font-weight: bold;
  }
`;

const styles = csjs`
  .label extends ${labelBase.boldBase} {
    color: blue;
  }
`;

You can do this:

const labelBase = `
    font-weight: bold;
`;

const styles = csjs`
  .label {
    ${labelBase}
    color: blue;
  }
`;

Notice labelBase does not need to be run through the csjs function since it's just strings.

You can also take it a step further and provide "mixin-like" functional bases, e.g.

import {darken} from 'color'; // some color lib

const styles = csjs`
  .label {
    ${labelBase}
    color: ${darken('blue', 20)}
  }
`