Fix interleaveWithNodeStream streaming flow to be compatible with React 18 api

[ignatiqq]

As mentioned here - #3658
And here - #4211

New React "renderToPipeableStream" stream api decides how much HTML to send by itself and it’s not a fact that it can be valid, for example, the middle of the svg path, large base64 image or just a long text.

So in this pr I suggest you a solution to work compatible with the new react streaming api.

[quantizor]

Thank you for working on this, I have no practical project for streaming testing at this point but I'd be happy to post a test release under a tag for people to try and report back

[quantizor]

Published under styled-components@react-18-streaming-prototype for those interested in testing

[ignatiqq]

Oh, i really forgot about this pr. It's really unstable now.
But if you don't mind i can continue work on it in the next month. Now i'm really busy.
The main problem now is that it will trigger hydration issue without any scripts which should move styles outside the root react component. We should somehow give users way to control how should it work.

[quantizor]

Of course! That's why it's a test build 👍

[burnsdy]

Hi @ignatiqq,

I wrote a Transform stream implementation for handling server-side rendering of styled-components based on this PR. I noticed a couple issues with this PR due to updating the React 16 streaming approach to work with React 18 streaming:

• Original CLOSING_TAG regex is invalid
  • This regular expression only checks if the chunk begins with a closing tag (which works for React 16 streaming), not if the closing tag exists anywhere in the chunk
• Search for end of closing tag position is incorrect
  • Current approach looks for first '>' character in the chunk, which may be part of a starting tag rather than a closing tag
• Need a final method to flush the styles buffer of any remaining style tags before stream closure

I can submit my code as a separate PR, but these are the only three required changes to patch the bugs I noticed.

[ignatiqq]

@burnsdy You are right. This code is buggy. But the main reason i do not push any commits here. Becuase i find problem which i cant solve by myself here. The problem related to SSR error during new react 18 stream api. It means React will start hydrate page partially and we cant remove all "style" tags from server.

After reading the instructions from React maintainers and paying attention to other CSS in JS libraries, the only solution that I could come up with at the moment is to use a script that moves the “style” tag behind the “root” component. But this solution is not perfect and has many trade-offs, such as: performance (both in the case of multiple tag styles, if there are not many "Suspense" on the page, and if there are many "Suspense" borders on the page, we will need to execute the script after processing the css every time and process it using the sc.rehydrate function)
@quantizor What do you think about that?