React SSR Streaming Bug

[chin2km]

React SSR Streaming bug

I have followed the documentation on react SSR streaming (doc) and endup having a broken generated html in styled-components v6. The same code works just fine in styled-components v5.3.5.

I understand that new streaming methods in React (renderToPipeableStream) is not supported yet in styled-components (issue). But renderToNodeStream is seemingly supported according to the docs but in practice its breaking.

Environment

System:

• OS: macOS 14.1
• CPU: (10) arm64 Apple M1 Pro
• Memory: 3.11 GB / 32.00 GB
• Shell: 5.9 - /bin/zsh

Binaries:

• Node: 20.0.0 - ~/.nodenv/versions/20.0.0/bin/node
• Yarn: 1.22.22 - ~/.nodenv/versions/20.0.0/bin/yarn
• npm: 9.6.4 - ~/.nodenv/versions/20.0.0/bin/npm
• pnpm: 8.15.6 - ~/.nodenv/versions/20.0.0/bin/pnpm
• bun: 0.1.10 - ~/.bun/bin/bun

npmPackages:

• babel-plugin-styled-components: 2.1.4 => 2.1.4
• styled-components: 6.1.8 => 6.1.8

Reproduction

Minimal reproduction using webpack: https://github.com/chin2km/styled-components-react-streaming-bug

Steps to reproduce

start the application using yarn dev:ssr and the html generated for react streaming is broken.

Expected Behavior

it works just like when using renderToString

Actual Behavior

The generated html breaks the html by injecting the <style> tags at wrong points in the html stream.