CSS grows during successive server-side rendering

In our SSR we see an increase in CSS response size whenever a new route / React-loadable page component has been triggered.

For example the CSS sizes would grow as follows:

• Homepage: 70 kB
• Product detail page: 80 kB
• Homepage: 75 kB

Reproduction

I don’t have a separate reproduction, and saw that there is already a test case for SSR that checks that styles don’t leak. But maybe we’re triggering some special path (e.g. Global Styles?) that are not covered by the test?

Steps to reproduce

In our app:

    const styleSheet = new ServerStyleSheet();

      renderToString(
        styleSheet.collectStyles(
          <>
            <GlobalStyle />
            <HelmetProvider context={context}>
              <Capture report={moduleName => modules.push(moduleName)}>
                {children}
              </Capture>
            </HelmetProvider>
          </>
        )

console.error(styleSheet.getStyleTags().length); // this grows after a different page was rendered

Expected Behavior

When loading the same page / route, the CSS size should be the same from the first to the last request.

Actual Behavior

CSS size grows over time when switching between different pages / routes.

Workaround

I found the follow workaround: Resetting the master StyleSheet (no idea why we’d need that anyway, as it’s empty for the first render, so I thought it wouldn’t hurt to be also empty on successive renders. But maybe it helps with caching / performance?):

const StyleSheet = require('styled-components')
  .__DO_NOT_USE_OR_YOU_WILL_BE_HAUNTED_BY_SPOOKY_GHOSTS.StyleSheet;


    StyleSheet.reset(true); // ⬅️ the fix
    const styleSheet = new ServerStyleSheet();

Might this be a repetition / related to #1602?

[tp]

@probablyup Sorry for the late reply, we’ve been busy shipping other updates.

Just checked with alpha (954ab995b8b3a5efed5403249c1014aa3432effb), and the behavior is indeed good (no size variations across requests).

[probablyup]

Awesome, great to hear! There’s a bunch of fixes in the beta channel so if you ship that at work I recommend using styled-components@beta now.