import external fonts is broken in 3.2.0

[piuccio]

Version

styled-components: 3.2.0
babel-plugin-styled-components: 1.5.1

Reproduction

Sorry I tried to reproduce it here but it works fine, however you can see the issue on this repo it's a clone of react-boilerplate.

There's a file called global-styles.js that injects global CSS, including the following

import { injectGlobal } from 'styled-components';

/* eslint no-unused-expressions: 0 */
injectGlobal`
  @import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
`

Steps to reproduce

npm install with styled-component 3.2.0 and npm start it'll load a local server. Inspect the styles and you'll see that Noto Sans is not used.

Kill the server, change package.json to 3.1.6, npm install && npm start and the fonts are now Noto Sans

Expected Behavior

Always use Noto Sans

Actual Behavior

Uses fallback font

[kitten]

It is in fact reproducible: https://codesandbox.io/s/6wk63nr91n

It seems that I've forgotten to port over some exceptions for @import in the migration.

Unfortunately I think it'll be tough to make this work in tandem with #1493, as the @import rules need to be at the beginning of the stylesheet, but at the same time we need to be able to remove them at any time.

Edit: For now, I think it'd be best if you pull out your @import into a <link> element

cc @mxstbr @probablyup

[mxstbr]

Oh damn, we really need to fix this.

[kitten]

@piuccio Can you help me to test out a prerelease that addresses this bug please? It's published as styled-components@dev version 3.2.1-0. It's from the PR referenced above and seems to fix the problem in the CodeSandbox, where I reproduced the bug, just fine: https://codesandbox.io/s/v6v6r73j37

[piuccio]

@kitten I tested 3.2.1-2 and it works fine. Thanks for the quick fix