Improve browser/server detection for static caching

Version

styled-components: > 2.2.0

I’ve just updated my existing project from 2.0.0. to 2.4.0. and noticed that the SSR CSS tags / rules are not generated correctly anymore. It seems that the rules for the first level components are generated correctly, but all the rules for sub (nested) components are not created anymore.

This is the relevant part of the code (mostly taken directly from the SSR documentation):

      const sheet = new ServerStyleSheet()
      const html = renderToString(sheet.collectStyles(
        <Router location={req.url} context={{}}>
          <App serverData={serverData} />
        </Router>,
      ))
      const css = sheet.getStyleTags()

I did some testing and this code works perfectly up to 2.2.0. Has something changed in 2.2.1 that causes this issue?

[darthtrevino]

Aye aye

[JonnyBurger]

Funny, I just experienced the same issue at the same time… I located the exact version number where it seems to break and it looks like in the 2.2.0 --> 2.2.1 update it started breaking. Going to dig now and see if I can spot the bug.