[v2] @font-face breaks styles

[marc-rutkowski]

Version

2.0.0-3

Reproduction

https://github.com/marc-rutkowski/styled-components-v2-font-face
(standard create-react-app)

Steps to reproduce

git clone git@github.com:marc-rutkowski/styled-components-v2-font-face.git
yarn
yarn start

Dev server starts and the app home page displays a red background and use the Pangolin webfont.
@font-face is set by using the injectGlobal helper in App.js

Now, switch to styled-components v2 :

yarn remove styled-components
yarn add styled-components@next
yarn start

Expected Behavior

Same rendering than with styled-components v1.x

Actual Behavior

@font-face breaks styling. The red background is not visible anymore and default font is used instead of the custom one.
If the @font-face rule is removed the red background appears has before.

Maybe related to #462 ?

ps: thanks for this great lib!

[thysultan]

Thanks, will push a patch for this.

[thysultan]

patched upstream(parser), cc @mxstbr.

[k15a]

Awesome 👍

[marc-rutkowski]

@thysultan thank you for the very fast reply and fix! It works fine now.

@k15a maybe this issue should be stay open until deps are updated to stylis@1.1.2+ ?
Let me know if you want a PR for this...

ps: It took me awhile to understand that it was fixed by this commit ;-)

[k15a]

@marc-rutkowski Ahh. I thought that we are using version ranges so the patches are covered. OFC it should stay open then^^ PRs are always great 👍
@mxstbr Why did we change that?