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
{children}
+}
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
}
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 (
+
+ This should be in red
+
+ )
+}
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 (
+
+
This should be in red
+
+ )
+}
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 (
+
+
This should be in red
+
+ )
+}
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, '/')