styled-components和css inject 混用产生冲突

问题

最近遇到一个css相关的问题，项目里同时用了react-emotion 和react-loadable，然后发现在开发模式和生产模式下css表现的不一样，同样优先级的rule在两种模式下顺序颠倒了。

image.png

开发模式下，emotion的rule 优先级更高，但是到生产模式，ant自带的rule优先级更高。

Styled-compoents

https://medium.com/styled-components/how-styled-components-works-618a69970421
react-emotion 属于这种风格的动态添加css, 核心是使用了CSSOM 相关的api。https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet

chrome和ff的devtools对这种api支持都不太好，chrome只能显示，不能修改，而且element tab下面什么也看不到（生产模式）。
https://bugs.chromium.org/p/chromium/issues/detail?id=387952
https://stackoverflow.com/questions/52582995/impossible-to-edit-styles-in-chrome
https://stackoverflow.com/questions/51544215/styled-component-styles-are-disabled-in-chrome-devtools

问题分析

首先，这个问题本身是因为在同一元素上使用了emotion来修改ant的默认样式，emotion也仅仅只是添加class, 导致优先级一样，谁胜出完全取决于最终生成的代码顺序，所以本质上要避免这种问题， 好歹像scoped style那样多搞个属性什么的把优先级提高一下。
其次，ant和emotion的css 都是动态添加进去的，很难区分谁先谁后。一般来说，ant这种动态inject是在head末尾添加style标签，而emotion这种在生产模式下只在head里有一个style标签，而且一般比较靠前（第一次添加的时候），导致后面动态load的模块inject的css的优先级会比较高。

image.png

至于到底各种css inject是怎么实现的，后面有时间再看吧