[V2] :global doesn't rerender. :global stay on the page when component is unmounted

I have found a bug in 2.0.0-9 using global injection.

When I use :global within a component for example :

styled.div`
    :global(body) {
      ${props.isOpen ? `margin-right: ${props.size}px !important;` : ''}
    }

    ${!props.isOpen ? `transform: translate3d(${props.size-10}px, 0, 0);` : ''}
`

Version

2.0.0-8

Reproduction

Unfortunately it’s hard to produce a reproduction, webpackbin work bad these days. I don’t know how to use styled template literal in codepen.

Steps to reproduce

Using react-router, create a router that container a css injection that use :global. Go on that page, then change to another page, the css stay injected

Expected Behavior

• When the component is rerendered with a new props.size :global should apply the new css
• if the components get umounted, the style injected in body are removed from on the page.

Actual Behavior

• When the component is rerendered with a new props.size :global doesn’t refresh the css
• if the components get umounted, the style injected in body stay on the page.

[thysultan]

@mxstbr included in v2.0.0

[geelen]

Yeah if we can remove :global, @global and :host and let people use & and injectGlobal that would be great, thanks @thysultan!