Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Styled components fills head tag with additional unused style tags, doesn't clean them up

See original GitHub issue

Hi guys, unsure if this is an issue or intended behavior but thought I’d raise this to get a clear answer…

Version

styled-components: 2.4.0

Reproduction

We found this in our own apps at my work place and thought it was only for us, but I can also reproduce on the styled components website: https://www.styled-components.com/

(neither of the code bins worked to create a reproduction)

Steps to reproduce

Go to https://www.styled-components.com/
Open developer tools, inspect the documents <head /> tag
Inside the editor example on the web page, being making changes to the buttons border (for example)
See all the additional tags appearing in the head of the document with every keypress/change to the example

2018-01-17_08-49-09

Expected Behavior

I expected/thought that styled component should try to minimize the number of style tags appearing in the head by cleaning up or removing unused styles.

I am or was under the impression that this sort of thing was not occurring before, but I definitely could be mistaken…

Actual Behavior

Head tag has additional style tags and css classes added that remain unused and are not removed.

This pollutes the head tag of the document, especially noticable on SPAs with lots of styled-components in use.

We are seeing a new style tag added with anywhere between 5 to 20 additional classes appearing on every click/navigation in our app.

This a portion of our apps document head after a few minutes of usage:

Thanks 👍

Issue Analytics

State:
Created 6 years ago
Comments:7 (3 by maintainers)

Top GitHub Comments

1reaction

South-Pawcommented, Feb 28, 2018

I don’t think we’ll be reducing the dynamicness of our entire component library, it’s very much built on top of styled components 😄

But after a month of having this occur (and it was happening before as well) we haven’t seen, had or received any performance complaints or other issues with it so I guess that means it’s fine as it is.

Thanks for the awesome package and keep it up 👍

1reaction

kittencommented, Jan 16, 2018

A separate component will be created every time you call styled(). This component receives a componentId and injects it’s styles under there with a hash.

The amount of styles you have there might mean that you have a large app.

But it might also indicate that you’re calling styled() in a render function / stateless component and are recreating it every time. Or it might mean that you’re passing arbitrarily complex float values to it