:root { .some-class & { ... } } does not work as expected

Version

2.1.0

Reproduction

https://www.webpackbin.com/bins/-Kn_3D4-c-UzcHsTAZyh

Steps to reproduce

injectGlobal`
  :root {
    .some-class & {
      color: red;
    }
  }
`

Expected Behavior

Should produce .some-class:root selector

Actual Behavior

instead of .some-class :root which does not work as expected. (Old parser was smart enough to remove that space).

[thysultan]

Managed to reproduce, it’s when the namespace value is an empty string – "", Which is how i think injectGlobal uses stylis to process global css.

Should be fixed in the next patch release.

[kitten]

sorry, was afk for a bit 😉 yea, we’re passing an empty namespace there, since it’s global css 😃

https://github.com/styled-components/styled-components/blob/master/src/utils/stringifyRules.js#L27