生产模式下,styled-component生成的style标签没有内容

In production mode, the style tag that generated by styled-component has no content

复制

https://codepen.io/wqh/pen/KKqjaWL

重现步骤

首先,抱歉我的英语不好,我希望你能明白我的意思。

打开codepenlink可以在开发者工具中看到现象:

生成的样式标签没有内容,但实际有效

例子是低版本的,但是我项目的5.3.3版本有同样的问题

预期行为

生成的样式标签内容也可以在生产模式下获取

看到一个Q&A说insertRule会导致style标签的内容变成unavailable.But我在IE11中用css-vars-ponyfill修复vars,这个需要获取样式标签的内容。

实际行为

生产模式下,生成的样式标签没有内容,这与开发模式不一致

样式在 DOM 中的注入方式在开发环境和生产环境中有所不同。

如前所述here (How styles land in the DOM),

This step differs from development mode to production mode.

In development mode, styled-components will inject a style tag inside the head of the page's DOM. This tag will include some data meta properties like the library's version used. And inside the tag, styled-components will append all the styles from your StyledComponents bound to their classNames.

In production mode however, things are a bit different. Since we need to optimize and compress stuff the most we can, the style tag injected by styled-components will still be there, but will be injected as empty.