typestyle: Theming can break due to deduping

This is wrong http://typestyle.io/#/core/-classes- :

If a dom element has two classes applied to it, the second class gets to override any first class properties

It only works if the second class is written to the generated CSS after the first class. This is not necessarily true in the presence of freestyle deduping.

HotFix workaround is of course using && like we recommended for ordering pseudo classes http://typestyle.io/#/advanced/concept-ordering-pseudo-classes:

const messageClass = style({
  color: 'grey',
  fontSize: '24px',
  width: '100%'
});

const Message = (props:{className?:string,text:string}) => {
  return (
    <p className={classes(messageClass,props.className)}>{props.text}</p>
  );
};

<div>
  {/** Without customization */}
  <Message text="Hello"/>
  {/** With customization */}
  <Message text="World" 
    className={style({
              $nest: 
                  {'&&':{color:'red'}} 
              })/>
</div>

But it is verbose. Open for a better idea.

// cc @blakeembrey for FreeStyle users 🌹