From 48874f1a443e41e7f5405086a9c3d6de9af3302b Mon Sep 17 00:00:00 2001
From: Shu Ding <g@shud.in>
Date: Sat, 30 Oct 2021 11:20:26 +0200
Subject: [PATCH] Fix missing dev option for the middleware SSR loader (#30639)

Currently the `dev` option isn't passed to the render function inside the middleware SSR loader. This PR fixes it with a test case.

Fixes #30547.

## Bug

- [x] 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`
---
 .../next-middleware-ssr-loader/index.ts       |  1 +
 .../app/components/red/index.client.js        |  5 +++
 .../app/components/red/style.module.css       |  3 ++
 .../react-rsc-basic/app/pages/_app.js         |  2 +
 .../app/pages/css-modules.server.js           | 10 +++++
 .../app/pages/global-styles-rsc.server.js     |  7 ++++
 .../app/pages/global-styles.js                |  7 ++++
 .../react-rsc-basic/app/styles.css            |  3 ++
 test/integration/react-rsc-basic/test/css.js  | 27 ++++++++++++++
 .../react-rsc-basic/test/index.test.js        | 37 ++++++++++++++++++-
 10 files changed, 100 insertions(+), 2 deletions(-)
 create mode 100644 test/integration/react-rsc-basic/app/components/red/index.client.js
 create mode 100644 test/integration/react-rsc-basic/app/components/red/style.module.css
 create mode 100644 test/integration/react-rsc-basic/app/pages/css-modules.server.js
 create mode 100644 test/integration/react-rsc-basic/app/pages/global-styles-rsc.server.js
 create mode 100644 test/integration/react-rsc-basic/app/pages/global-styles.js
 create mode 100644 test/integration/react-rsc-basic/app/styles.css
 create mode 100644 test/integration/react-rsc-basic/test/css.js

diff --git a/packages/next/build/webpack/loaders/next-middleware-ssr-loader/index.ts b/packages/next/build/webpack/loaders/next-middleware-ssr-loader/index.ts
index ed8b951f9b885..562009149e308 100644
--- a/packages/next/build/webpack/loaders/next-middleware-ssr-loader/index.ts
+++ b/packages/next/build/webpack/loaders/next-middleware-ssr-loader/index.ts
@@ -141,6 +141,7 @@ export default function middlewareRSCLoader(this: any) {
             // locale: detectedLocale,
             // defaultLocale,
             // domainLocales: i18n?.domains,
+            dev: process.env.NODE_ENV !== 'production',
             App,
             Document,
             buildManifest,
diff --git a/test/integration/react-rsc-basic/app/components/red/index.client.js b/test/integration/react-rsc-basic/app/components/red/index.client.js
new file mode 100644
index 0000000000000..4213f7858900e
--- /dev/null
+++ b/test/integration/react-rsc-basic/app/components/red/index.client.js
@@ -0,0 +1,5 @@
+import styles from './style.module.css'
+
+export default function RedText({ children }) {
+  return <div className={styles.text}>{children}</div>
+}
diff --git a/test/integration/react-rsc-basic/app/components/red/style.module.css b/test/integration/react-rsc-basic/app/components/red/style.module.css
new file mode 100644
index 0000000000000..3efa99e6fb171
--- /dev/null
+++ b/test/integration/react-rsc-basic/app/components/red/style.module.css
@@ -0,0 +1,3 @@
+.text {
+  color: red;
+}
diff --git a/test/integration/react-rsc-basic/app/pages/_app.js b/test/integration/react-rsc-basic/app/pages/_app.js
index a54ebc929ab54..eee8821812081 100644
--- a/test/integration/react-rsc-basic/app/pages/_app.js
+++ b/test/integration/react-rsc-basic/app/pages/_app.js
@@ -1,3 +1,5 @@
+import '../styles.css'
+
 function App({ Component, pageProps }) {
   return <Component {...pageProps} />
 }
diff --git a/test/integration/react-rsc-basic/app/pages/css-modules.server.js b/test/integration/react-rsc-basic/app/pages/css-modules.server.js
new file mode 100644
index 0000000000000..a4499da5d1e26
--- /dev/null
+++ b/test/integration/react-rsc-basic/app/pages/css-modules.server.js
@@ -0,0 +1,10 @@
+// CSS modules can only be imported inside client components for now.
+import RedText from '../components/red/index.client'
+
+export default function CSSM() {
+  return (
+    <RedText>
+      <h1>This should be in red</h1>
+    </RedText>
+  )
+}
diff --git a/test/integration/react-rsc-basic/app/pages/global-styles-rsc.server.js b/test/integration/react-rsc-basic/app/pages/global-styles-rsc.server.js
new file mode 100644
index 0000000000000..9db6f53f3eb83
--- /dev/null
+++ b/test/integration/react-rsc-basic/app/pages/global-styles-rsc.server.js
@@ -0,0 +1,7 @@
+export default function GlobalStyle() {
+  return (
+    <div>
+      <h1 id="red">This should be in red</h1>
+    </div>
+  )
+}
diff --git a/test/integration/react-rsc-basic/app/pages/global-styles.js b/test/integration/react-rsc-basic/app/pages/global-styles.js
new file mode 100644
index 0000000000000..9db6f53f3eb83
--- /dev/null
+++ b/test/integration/react-rsc-basic/app/pages/global-styles.js
@@ -0,0 +1,7 @@
+export default function GlobalStyle() {
+  return (
+    <div>
+      <h1 id="red">This should be in red</h1>
+    </div>
+  )
+}
diff --git a/test/integration/react-rsc-basic/app/styles.css b/test/integration/react-rsc-basic/app/styles.css
new file mode 100644
index 0000000000000..33ebbce0db69a
--- /dev/null
+++ b/test/integration/react-rsc-basic/app/styles.css
@@ -0,0 +1,3 @@
+#red {
+  color: red;
+}
diff --git a/test/integration/react-rsc-basic/test/css.js b/test/integration/react-rsc-basic/test/css.js
new file mode 100644
index 0000000000000..141e88a7a8328
--- /dev/null
+++ b/test/integration/react-rsc-basic/test/css.js
@@ -0,0 +1,27 @@
+/* eslint-env jest */
+import webdriver from 'next-webdriver'
+
+export default function (context) {
+  it('should include global styles under `concurrentFeatures: true`', async () => {
+    const browser = await webdriver(context.appPort, '/global-styles')
+    const currentColor = await browser.eval(
+      `window.getComputedStyle(document.querySelector('#red')).color`
+    )
+    expect(currentColor).toMatchInlineSnapshot(`"rgb(255, 0, 0)"`)
+  })
+  it('should include global styles with `serverComponents: true`', async () => {
+    const browser = await webdriver(context.appPort, '/global-styles-rsc')
+    const currentColor = await browser.eval(
+      `window.getComputedStyle(document.querySelector('#red')).color`
+    )
+    expect(currentColor).toMatchInlineSnapshot(`"rgb(255, 0, 0)"`)
+  })
+  // TODO: fix this test
+  // it.skip('should include css modules with `serverComponents: true`', async () => {
+  //   const browser = await webdriver(context.appPort, '/css-modules')
+  //   const currentColor = await browser.eval(
+  //     `window.getComputedStyle(document.querySelector('h1')).color`
+  //   )
+  //   expect(currentColor).toMatchInlineSnapshot(`"rgb(255, 0, 0)"`)
+  // })
+}
diff --git a/test/integration/react-rsc-basic/test/index.test.js b/test/integration/react-rsc-basic/test/index.test.js
index a7853efefc5b9..1a1d373818d6c 100644
--- a/test/integration/react-rsc-basic/test/index.test.js
+++ b/test/integration/react-rsc-basic/test/index.test.js
@@ -13,6 +13,8 @@ import {
   renderViaHTTP,
 } from 'next-test-utils'
 
+import css from './css'
+
 const nodeArgs = ['-r', join(__dirname, '../../react-18/test/require-hook.js')]
 const appDir = join(__dirname, '../app')
 const distDir = join(__dirname, '../app/.next')
@@ -88,12 +90,14 @@ describe('RSC prod', () => {
     const content = JSON.parse(
       await fs.readFile(middlewareManifestPath, 'utf8')
     )
-    expect(content.clientInfo).toEqual([
+    for (const item of [
       ['/', true],
       ['/next-api/image', true],
       ['/next-api/link', true],
       ['/routes/[dynamic]', true],
-    ])
+    ]) {
+      expect(content.clientInfo).toContainEqual(item)
+    }
   })
   runTests(context)
 })
@@ -111,6 +115,35 @@ describe('RSC dev', () => {
   runTests(context)
 })
 
+describe('CSS prod', () => {
+  const context = { appDir }
+
+  beforeAll(async () => {
+    context.appPort = await findPort()
+    await nextBuild(context.appDir)
+    context.server = await nextStart(context.appDir, context.appPort)
+  })
+  afterAll(async () => {
+    await killApp(context.server)
+  })
+
+  css(context)
+})
+
+describe('CSS dev', () => {
+  const context = { appDir }
+
+  beforeAll(async () => {
+    context.appPort = await findPort()
+    context.server = await nextDev(context.appDir, context.appPort)
+  })
+  afterAll(async () => {
+    await killApp(context.server)
+  })
+
+  css(context)
+})
+
 async function runTests(context) {
   it('should render the correct html', async () => {
     const homeHTML = await renderViaHTTP(context.appPort, '/')