Where are my css classes in a production release of styled-componets

Question

As the title states I need to understand where styled-components bundles the css in a production release.

I think this comes down to my lack of understanding about how styled-components actually works. I was under the impression that it aggregated all the styles and injected them in the head. When I run locally I can see the style tag in my head and when I expand it I see the css class names.

However in a production build it still has the style tag in the head but it's empty. Like this:

The strange thing is, when I delete that style tag from the production build all my styles disappear, like this:

How can it delete my styles if there is nothing in the tag?

The reason I ask is becuase I am trying to integrate with LivePerson so our support team can see the users screen in real-time. LivePerson achieves this by proxying the HTML CSS and Images through to their own server and "re-playing" it for the support person. However when I do this none of the styles show up, images and html are fine.

Any clarifying reasoning about where my css is located would be most appreciated

Thanks

Answer 1

I'm running into a similar issue and found this; hopefully it will help.

In production we use the CSSOM APIs to inject styles, which are represented differently in dev tools and can be read by accessing the .sheet.cssRules property on the stylesheet DOM node.

Found here. So your styled-components is working the way it should in production with the "empty" style tag. It just appears empty due to the way it is injected but actually contains your css (which is why deleting it removes your styling).

Alternatively, you can try and add a global variable

global.SC_DISABLE_SPEEDY = true

which results in some users seeing their styled-component css being populated in the corresponding style tag. More on that here.

Hopefully this answers your question.