styled-components: [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.

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 19 (15 by maintainers)

Most upvoted comments

@mxstbr included in v2.0.0

thysultan on Apr 1, 2017

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

geelen on Mar 27, 2017

Yes it does disable mixins and variables, planning on a release that removes them, since you could use middleware to re-construct them, :global selector is not, will improve the compact option to include it with that release.

thysultan on Mar 26, 2017

Which means there are probably more v2 features that might not be rerendered and stays in the page (@mixin, @include, @global, :global, :host, :host(), :host-context()).

@mxstbr can you weigh in here? I thought we weren’t adding any of these?

For the record, I’m extremely against any CSS metaprogramming in Styled Components without very careful consideration. At the moment, the only two things we allow are nesting (&) and autoprefixing. So just because Stylis or PostCSS supports something, doesn’t mean we will expose it. You have all of JS to build mixins, and injectGlobal for global rules, anything that diverges from our simplified superset of raw CSS makes it vastly more difficult to build tooling like @philpl’s preprocessor in the future.

geelen on Mar 26, 2017

Um… what is :global? That’s not a thing in Styled Components (unless someone merged something without me noticing…)

geelen on Mar 23, 2017