Merge branch 'canary' into chore/remove-fromentries-polyfill

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.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)"`)
+  // })
+}

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, '/')