[internal] Streaming Server Side Rendering doesn't work. Emotion by itself does work

Current behavior 😯

Hi!

I got Streaming Server Side Rendering working with my Deno Web Framework and I would like to use Emotion and also MaterialUI.

Expected behavior 🤔

When doing Streaming Server Side Rendering, the <style> tags are rendered before the component and they contain all the css needed to display that component. This way the component and the style tags can be sent to the browser while other components are still rendering on the server.

Steps to reproduce 🕹

/** @jsx jsx */
import { css, jsx } from '@emotion/react';
import {
  AppBar,
  Button,
  IconButton,
  Toolbar,
  Typography,
} from '@mui/material';
import { Menu as MenuIcon } from '@mui/icons-material';

import { NavigationItem } from '../../lib/navigation.tsx';

export type NavbarProps = {
  items: NavigationItem[];
};

export function NavbarOrganism({ items }: NavbarProps) {
  return (
    <AppBar position='static'>
      <Toolbar>
        <IconButton
          size='large'
          edge='start'
          color='inherit'
          aria-label='menu'
          sx={{ mr: 2 }}
        >
          <MenuIcon />
        </IconButton>
        <Typography variant='h6' component='div' sx={{ flexGrow: 1 }}>
          News
        </Typography>
        <div
          css={css`
            background-color: #f00;
            font-weight: bold;
          `}
        >
          NEI
        </div>
        <Button color='inherit'>Login</Button>
      </Toolbar>
    </AppBar>
  );
}

This renders to:

            <header class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation4 MuiAppBar-root MuiAppBar-colorPrimary MuiAppBar-positionStatic css-1x7skt0">
               <div class="MuiToolbar-root MuiToolbar-gutters MuiToolbar-regular css-i6s8oy">
                  <button class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit MuiIconButton-edgeStart MuiIconButton-sizeLarge css-jziuck" tabindex="0" type="button" aria-label="menu">
                     <svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-vubbuv" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="MenuIcon">
                        <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path>
                     </svg>
                  </button>
                  <div class="MuiTypography-root MuiTypography-h6 css-1a3lqbo">News</div>
                  <style data-emotion="css uuyzvw">.css-uuyzvw{background-color:#f00;font-weight:bold;}</style>
                  <div class="css-uuyzvw">NEI</div>
                  <button class="MuiButton-root MuiButton-text MuiButton-textInherit MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorInherit MuiButtonBase-root  css-b7766g" tabindex="0" type="button">
                     Login<!-- -->
                  </button>
               </div>
            </header>

As you can see, only the emotion call is rendered correctly and the MaterialUI parts are not. They do work and emotion does pick them up but only in the browser and after a considerable amount of time loading dependencies. This means I get a Flash of Unstyled Content for around 5 seconds while the red text is already there from the first paint it got streamed into the browser.

Please support Streaming Server Side Rendering because Emotion supports this.

Context 🔦

I am NOT using Node.js but using Deno. Deno supports Web Streams. My React Web Framework supports Streaming Server Rendering by utilizing Web Streams. Emotion supports Streaming Server Rendering. MaterialUI does not.

Your environment 🌎

System:
OS: Linux 5.10 Manjaro Linux
Binaries:
Node: 17.5.0 - ~/.nvm/versions/node/v17.5.0/bin/node
Yarn: 1.22.17 - ~/.nvm/versions/node/v17.5.0/bin/yarn
npm: 8.4.1 - ~/.nvm/versions/node/v17.5.0/bin/npm
Browsers:
Chrome: Not Found
Firefox: 101.0
npmPackages:
typescript: ^4.6.4 => 4.7.3

Start with the provided Deno Web Streams reproduction using React, Emotion, and Material UI, then trace how Material UI styles are emitted during streaming server-side rendering. Done means streamed output places the required style tags before each component and avoids the reported flash of unstyled content.