Fix missing dev option for the middleware SSR loader

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,

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>
+}

test/integration/react-rsc-basic/app/components/red/style.module.css

@@ -0,0 +1,3 @@
+.text {
+  color: red;
+}

test/integration/react-rsc-basic/app/pages/_app.js

@@ -1,3 +1,5 @@
+import '../styles.css'
+
 function App({ Component, pageProps }) {
   return <Component {...pageProps} />
 }

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>
+  )
+}

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>
+  )
+}

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>
+  )
+}

test/integration/react-rsc-basic/app/styles.css

@@ -0,0 +1,3 @@
+#red {
+  color: red;
+}

test/integration/react-rsc-basic/test/css.test.js

@@ -0,0 +1,94 @@
+/* eslint-env jest */
+
+import { join } from 'path'
+import webdriver from 'next-webdriver'
+
+import {
+  findPort,
+  killApp,
+  launchApp,
+  nextBuild as _nextBuild,
+  nextStart as _nextStart,
+  renderViaHTTP,
+} from 'next-test-utils'
+
+const nodeArgs = ['-r', join(__dirname, '../../react-18/test/require-hook.js')]
+const appDir = join(__dirname, '../app')
+const distDir = join(__dirname, '../app/.next')
+
+async function nextBuild(dir) {
+  return await _nextBuild(dir, [], {
+    stdout: true,
+    stderr: true,
+    nodeArgs,
+  })
+}
+
+async function nextStart(dir, port) {
+  return await _nextStart(dir, port, {
+    stdout: true,
+    stderr: true,
+    nodeArgs,
+  })
+}
+
+async function nextDev(dir, port) {
+  return await launchApp(dir, port, {
+    stdout: true,
+    stderr: true,
+    nodeArgs,
+  })
+}
+
+describe('CSS import - 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)
+  })
+
+  runTests(context)
+})
+
+describe('CSS import - dev', () => {
+  const context = { appDir }
+
+  beforeAll(async () => {
+    context.appPort = await findPort()
+    context.server = await nextDev(context.appDir, context.appPort)
+  })
+  afterAll(async () => {
+    await killApp(context.server)
+  })
+  runTests(context)
+})
+
+async function runTests(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)"`)
+  // })
+}