@font-face rules not resolving via @import url() call within injectGlobal

[bkrypt]

Hey guys,

Firstly, thanks for this awesome package. It has been a huge aid in working with and styling React components. Great job!

Now, the potential issue. I upgraded to v2.0.0 this morning, since I'm early enough in my current project to still switch major versions, and everything worked as expected (well, almost).

Prior to v2 (v1.4.6), I was @importing my web font inside a call to injectGlobal, which resided within a global-styles.js file that was imported early on in my app entry point. This worked as expected and imported the appropriate @font-face rules. However, v2 doesn't seem to resolve that @import anymore and I end up with local fallback fonts being rendered.

The current fix I'm using is to manually resolve the contents of the @import url and inject that into the injectGlobal call, as explicitly defining the @font-face rules works 100%.

Version

2.0.0

Reproduction

Please excuse the font choice in this demo. ;p I just picked the least popular one on Google Fonts because I needed a font webpackbin didn't already have locally.

Just switch between the two import './global-styles-*' statements in main.js to see the issue.

Webpackbin Demo

Steps to reproduce

Attempt to @import a web font within injectGlobal.

Expected Behavior

Resolve and define the explicit @font-face rules for the specific web font.

Actual Behavior

The @import doesn't seem to resolve at all.

[mxstbr]

@thysultan is this an issue with stylis, and is it fixed in v3 possibly?

[thysultan]

I think it is an issue with stylis, https://jsbin.com/dalusav/edit?js,console, it works on V3 though https://jsbin.com/xakaved/edit?js,console

[kitten]

Ok, just merged v3 and will release the patch later. So I'll consider this closed :)