Global styles are inserted after component styles

[ryall]

Version

styled-components: 3.2.0 (also happens on 3.1.6)

Reproduction

• Add styles with injectGlobal
• Add styles with components

Expected Behavior

• Global styles appear before component styles

Actual Behavior

• Global styles appear after component styles, breaking CSS flow

[kitten]

This is expected behaviour.

We inject everything in order. When you create a component a marker is injected so that the order of creation is guaranteed. So if you'd like injectGlobal to inject something first, then it must be called first, before any component is created.

An index.js file is usually the best place to put it, or to load it from.

In v3.2.0 we worsened a small bug—that was actually present before—that caused us not to move @import rules above every other stylesheet and into a separate one. v3.2.1 will fix this (See #1577)

[ryall]

OK thanks for the explanation. I actually thought I was doing this already but simply needed to move my global style import to happen before the App component import. It now works, thanks.