A problem with react-css-themr

[birdofpreyru]

While react-css-themr is a very cool way for theming re-usable components, it turns out it has a serious caveate in our setup:

• Deep-mergin of themes relies on order of CSS classes in the bundle;
• Webpack does not really guarantee that order, so results of theming might be inconsistent between builds, and some changes in the code may affect theming of components in unexpected places.

Part of the problem is that we already depend on react-css-themr in many places.

It looks like we should:

1. Investigate a bit more, what is the most reliable way to make default / context / ad-hoc theming of reusable components;
2. Document it;
3. Ensure that existing code follows this way;

P.S.: Probably, the best solution would be to prohibit using deep theme merging (which is default), as not safe for our setup. Soft merge (when any class from a theme source with higher priority just completely overrides the same classes from themes with lower priority), will demand a bit more work while styling (though, thanks to SCSS imports, it is not a big deal, we can reuse and extend on SCSS side), but will be safe in our setup.

Also, if we go with solf merges, we should avoid using default themes, as they will just override context styles. If we need default styles anywhere, we should specify via ThemeProvider (child ThemeProviders can override this where necessary).