Styled-components: InjectGlobal function inconsistent?

[petephm]

I've come across a potential bug when using injectGlobal; I may be using it incorrectly, as it is flagged as an escape hatch in the documentation.

I declare my global styles in seperate files which I then import and pass to injectGlobal.

When I declare ONE tagged template variable and pass it into injectGlobal my JS variable doesn't apply.

However when I declare TWO tagged template variables (one template having variables the other just plain text) and pass them both into injectGlobal my JS variable does apply.

I have two examples linked below on Codepen.

Version

2.0.0

Reproduction

https://codepen.io/peteph_am/pen/MmNLPY
https://codepen.io/peteph_am/pen/dWxaQV

Steps to reproduce

1. Declare template literal variable
2. Add styles with JS variables
3. Pass to injectGlobal

Expected Behavior

JS variables should work in tagged template literals when not passed directly to injectGlobal.

Actual Behavior

JS variables don't work in tagged template literals when not passed directly to injectGlobal, unless passing multiple tagged template literals.

[k15a]

You need to call injectGlobal as a tagged template string and not as a function.

styled.injectGlobal`${reset} ${base}`

Should work fine this way.