How to use emotion with renderToPipeableStream

[0Lucifer0]

I'm looking at how to implement SSR emotion with react 18.
React18 made renderToPipeableStream method the new recommended way and deprecated the renderToNodeStream method.

The documentation only seems to deal with the now deprecated renderToNodeStream and I can't figure out how to make it works with the pipeable stream.

cf:
https://reactjs.org/docs/react-dom-server.html#rendertonodestream
https://emotion.sh/docs/ssr#renderstylestonodestream

Documentation links:
https://emotion.sh/docs/ssr

[Andarist]

We didn't implement integration with renderToPipeableStream yet.

[Tjerk-Haaye-Henricus]

Hey there :)
Will this feature come in near future ?

[skriems]

Is there any roadmap/plan when this is going to be integrated?

[willopez]

Hello looking forward to this feature, how can we help make its implementation?

[Andarist]

You could try implementing PoC for this. We could hop on a call to discuss some challenges and stuff before that - if you would be interested in this sort of a thing.

[0Lucifer0]

kind of hacky but it works for the server side.

const stylesPipeableStream =
    (res: Response, cache: EmotionCache, nonceString: string) => {
        let content = '';
        const inlineStream = new Writable({
            write(chunk, _encoding, cb) {
                let match;
                content = content.concat(chunk.toString());
                let regex = new RegExp(`<style data-emotion="${cache.key} ([a-zA-Z0-9-_ ]+)">(.+)<\\/style>`, 'gm');
                regex.lastIndex = 0;
                while ((match = regex.exec(content)) !== null) {
                    const id = match[1];
                    const css = match[2];
                    cache.nonce = nonceString;
                    cache.inserted[id] = css;
                }

                res.write(chunk, cb);
            },
            final() {
                res.end();
            },
        });

        return inlineStream;
    };

 onShellReady() {
               ...
                stream.pipe(stylesPipeableStream(res, cache, nonce));
            },
bootstrapScriptContent: `
${Object.keys(cache.inserted).map(id => `
if(document.querySelectorAll('[data-emotion="${cache.key} ${id}"]').length === 0) {
    document.head.innerHTML += '<style data-emotion="${cache.key} ${id}"${!cache.nonce ? '' : ` nonce="${cache.nonce}"`}>${cache.inserted[id].toString()}</style>';
}`).join('\n')}
...
`

[Andarist]

Note that this won't work correctly with Suspense because you are only awaiting the shell. A more complete solution would append <script/> to our <style/>s that would move the preceding <style> to document.head. On top of that, you'd have to figure out how to properly rehydrate all the streamed <style/>s.

[0Lucifer0]

yeah and to figure out how to avoid the hydratation missmatch that force react to re render. facebook/react#24430

This solution is far from ideal that is why I didn't open a pull request with this code but at least it give some short term fix in my case to the unstyled page flashing on loading

[Andarist]

Hm, the quoted issue is somewhat weird - I don't get why React would be bothered by a script injected before <head/>. Hydration should only occur within the root (as far as I know) and that's usually part of the <body/>. Note thought that I didn't read the whole thread there.

This solution is far from ideal that is why I didn't open a pull request with this code but at least it give some short term fix in my case to the unstyled page flashing on loading

I think that you could try to insert the appropriate <script/> within write into the chunk before calling res.write with it. The simplest approach, for now, would be to insert:

<script>
  var s = document.currentScript;
  document.head.appendChild(s.previousSibling);
  s.remove();
</script>