Fix styled-jsx not working in client components in the edge runtime w…

…hen SSR (#37042)

The Edge SSR server and the client bundle should share the same Styled JSX instance to ensure the context can be passed correctly, same with the way we handle `next/head`.

## Bug

- [ ] Related issues linked using `fixes #number`
- [x] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes by running `yarn lint`

packages/next/build/webpack-config.ts

@@ -1035,7 +1035,7 @@ export default async function getBaseWebpackConfig(
                 enforce: true,
                 name: 'rsc-runtime-deps',
                 filename: 'rsc-runtime-deps.js',
-                test: /(node_modules\/react\/|\/shared\/lib\/head-manager-context\.js)/,
+                test: /(node_modules\/react\/|\/shared\/lib\/head-manager-context\.js|node_modules\/styled-jsx\/)/,
               },
             }
           : undefined
@@ -1280,7 +1280,7 @@ export default async function getBaseWebpackConfig(
               // Move shared dependencies from sc_server and sc_client into the
               // same layer.
               {
-                test: /(node_modules\/react\/|\/shared\/lib\/head-manager-context\.js)/,
+                test: /(node_modules\/react\/|\/shared\/lib\/head-manager-context\.js|node_modules\/styled-jsx\/)/,
                 layer: 'rsc_shared_deps',
               },
             ]

test/integration/react-streaming-and-server-components/app/components/styled-jsx.client.js

@@ -0,0 +1,12 @@
+export default function Comp() {
+  return (
+    <div>
+      <h1>Red</h1>
+      <style jsx>{`
+        h1 {
+          color: red;
+        }
+      `}</style>
+    </div>
+  )
+}

test/integration/react-streaming-and-server-components/app/pages/styled-jsx.server.js

@@ -0,0 +1,13 @@
+import Comp from '../components/styled-jsx.client'
+
+export default function Page() {
+  return (
+    <div>
+      <Comp />
+    </div>
+  )
+}
+
+export const config = {
+  runtime: 'edge',
+}

test/integration/react-streaming-and-server-components/test/rsc.js

@@ -270,6 +270,13 @@ export default function (context, { runtime, env }) {
     expect(content).toContain('This should be in red')
   })
 
+  it('should SSR styled-jsx correctly', async () => {
+    const html = await renderViaHTTP(context.appPort, '/styled-jsx')
+    const styledJsxClass = getNodeBySelector(html, 'h1').attr('class')
+
+    expect(html).toContain(`h1.${styledJsxClass}{color:red}`)
+  })
+
   it('should handle 404 requests and missing routes correctly', async () => {
     const id = '#text'
     const content = 'custom-404-page'