Show react stack trace on warnings

[chasestarr]

Thought of this in response to new React.warn() and React.error() utilities. Was concerned about warnings from mixing long/short hand property names since it comes up often, but could possibly apply to others.

Trouble is that console.warn is called from the atomic-engine rather than the react package. Unsure exactly how the warn call could be 'caught' in the react code, but maybe there is another approach I'm not thinking of.

contrived example: https://codesandbox.io/s/9y8j4jkkw with error message below has no stack trace information. Imagine if working in a larger codebase, or customizing a dependency that uses styletron.

Styles `{"margin":"20px"}` and `{"marginTop":"10px"}` in object yielding class "ae af ag"
may result in unexpected behavior. Mixing shorthand and longhand properties within the
same style object is unsupported with atomic rendering. 

[rtsao]

Yeah I was thinking about this; I think we can add some way to have context passed from the react package to the engine and/or vice-versa.

The simplest thing I can think of would be adding an additional argument to each engine method call.

const ctx = {
  warn: msg => React.warn(msg),
  error: msg => React.error(msg),
};

engine.injectStyle(style, ctx);

Alternatively, this could be a callback.

[rtsao]

Alternatively, styletron-react could use try/catch and re-throw errors after calling React.error. But this can't be used for warnings, so making this part of the styletron-engine-atomic API might be better.

[rtsao]

React.warn and React.error was reverted and never released, but we can still get access to the stack via

React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactDebugCurrentFrame.getStackAddendum()