ServerStyleSheet sealed after getStyleTags: second render pass against the same sheet fails

Why the sheet seals

In styled-components v5 (and v6) a ServerStyleSheet instance is designed for a single render pass. Calling getStyleTags() (or getStyleElement()) finalizes the internal style registry; after that point the sheet is considered sealed and cannot collect additional styles.

Confirmed facts

• The sheet is sealed implicitly by getStyleTags(); explicit sheet.seal() does the same but is unnecessary for normal usage.
• Attempting a second collectStyles render against the same sealed instance yields no new styles or throws an error.
• Streaming APIs such as interleaveWithNodeStream or React 18’s renderToPipeableStream avoid the limitation because styles are injected into the stream as they are encountered.

Steps for multi‑pass rendering

1. Create a fresh ServerStyleSheet for the first pass: const sheet1 = new ServerStyleSheet();
2. Wrap your app with sheet1.collectStyles(), render to string, then call const tags1 = sheet1.getStyleTags();.
3. Create a second sheet for the additional pass: const sheet2 = new ServerStyleSheet();
4. Repeat collectStyles, render, and const tags2 = sheet2.getStyleTags();
5. Concatenate the strings returned by getStyleTags() (or the inner HTML of the elements) and insert the combined markup into your HTML response.

Merging without duplication

Because each render pass generates its own scoped class names, identical components will produce the same CSS rules in both sheets. To avoid sending duplicate rules you can:

• Pass the concatenated string through a simple deduplication function that removes repeated style blocks, or
• Prefer restructuring the app so that the measurement pass does not require a second render (e.g., compute layout client‑side or use a single pass that captures all needed styles).

Verification

Ensure the new ServerStyleSheet() call lives inside the request handler or the function that performs each render pass, not as a module‑level singleton.

Diagnostic detail: Are you using a custom StyleSheetManager to wrap your app? If so, the target prop must be updated to the new sheet instance for each pass.