test: current behavior

test/production/dynamic-css-client-navigation/dynamic-import/dynamic-import.test.ts

@@ -0,0 +1,35 @@
+import { nextTestSetup } from 'e2e-utils'
+
+describe('dynamic-css-client-navigation dynamic import', () => {
+  const { next, isTurbopack } = nextTestSetup({
+    files: __dirname,
+  })
+
+  const isTurbopackBuild = isTurbopack && process.env.TURBOPACK_BUILD
+
+  it('should not remove style when navigating from static imported component to dynamic import', async () => {
+    const browser = await next.browser('/')
+    expect(
+      await browser
+        .elementByCss('a[href="/dynamic-import"]')
+        .click()
+        .waitForElementByCss('#red-button')
+        .text()
+    ).toBe('Red Button')
+
+    const buttonBgColor = await browser.eval(
+      `window.getComputedStyle(document.querySelector('button')).backgroundColor`
+    )
+
+    // TODO: remove this condition after fix
+    if (isTurbopackBuild) {
+      expect(buttonBgColor).not.toBe('rgb(239, 239, 239)')
+      expect(buttonBgColor).toBe('rgb(255, 0, 0)')
+    } else {
+      // TODO: replace this after fix
+      // should be red, but is gray now.
+      expect(buttonBgColor).toBe('rgb(239, 239, 239)')
+      expect(buttonBgColor).not.toBe('rgb(255, 0, 0)')
+    }
+  })
+})

test/production/dynamic-css-client-navigation/dynamic-import/src/components/red-button-lazy.tsx

@@ -0,0 +1,13 @@
+import React, { useEffect, useState } from 'react'
+
+export function RedButtonLazy() {
+  const [Component, setComponent] = useState<React.ComponentType | null>(null)
+
+  useEffect(() => {
+    import('./red-button').then((module) =>
+      setComponent(() => module.RedButton)
+    )
+  }, [])
+
+  return Component && <Component />
+}

test/production/dynamic-css-client-navigation/dynamic-import/src/components/red-button.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import classes from './red.module.css'
+
+export function RedButton() {
+  return (
+    <button id="red-button" className={classes.button}>
+      Red Button
+    </button>
+  )
+}

test/production/dynamic-css-client-navigation/dynamic-import/src/components/red.module.css

@@ -0,0 +1,3 @@
+.button {
+  background-color: rgb(255, 0, 0);
+}

test/production/dynamic-css-client-navigation/dynamic-import/src/pages/dynamic-import.tsx

@@ -0,0 +1,6 @@
+import React from 'react'
+import { RedButtonLazy } from '../components/red-button-lazy'
+
+export default function DynamicImport() {
+  return <RedButtonLazy />
+}

test/production/dynamic-css-client-navigation/dynamic-import/src/pages/index.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import Link from 'next/link'
+import { RedButton } from '../components/red-button'
+import { RedButtonLazy } from '../components/red-button-lazy'
+
+export default function Home() {
+  return (
+    <>
+      {/* To reproduce, RedButton and RedButtonLazy should be imported. */}
+      <RedButton />
+      <RedButtonLazy />
+      <Link href="/dynamic-import">/dynamic-import</Link>
+    </>
+  )
+}

test/production/dynamic-css-client-navigation/next-dynamic.test.ts

@@ -0,0 +1,61 @@
+import { nextTestSetup } from 'e2e-utils'
+
+describe('dynamic-css-client-navigation next/dynamic', () => {
+  const { next, isTurbopack } = nextTestSetup({
+    files: __dirname,
+  })
+
+  const isTurbopackBuild = isTurbopack && process.env.TURBOPACK_BUILD
+
+  it('should not remove style when navigating from static imported component to next/dynamic', async () => {
+    const browser = await next.browser('/')
+    expect(
+      await browser
+        .elementByCss('a[href="/next-dynamic"]')
+        .click()
+        .waitForElementByCss('#red-button')
+        .text()
+    ).toBe('Red Button')
+
+    const buttonBgColor = await browser.eval(
+      `window.getComputedStyle(document.querySelector('button')).backgroundColor`
+    )
+
+    // TODO: remove this condition after fix
+    if (isTurbopackBuild) {
+      expect(buttonBgColor).not.toBe('rgb(239, 239, 239)')
+      expect(buttonBgColor).toBe('rgb(255, 0, 0)')
+    } else {
+      // TODO: replace this after fix
+      // should be red, but is gray now.
+      expect(buttonBgColor).toBe('rgb(239, 239, 239)')
+      expect(buttonBgColor).not.toBe('rgb(255, 0, 0)')
+    }
+  })
+
+  it('should not remove style when navigating from static imported component to next/dynamic with ssr: false', async () => {
+    const browser = await next.browser('/')
+    expect(
+      await browser
+        .elementByCss('a[href="/next-dynamic-ssr-false"]')
+        .click()
+        .waitForElementByCss('#red-button')
+        .text()
+    ).toBe('Red Button')
+
+    const buttonBgColor = await browser.eval(
+      `window.getComputedStyle(document.querySelector('button')).backgroundColor`
+    )
+
+    // TODO: remove this condition after fix
+    if (isTurbopackBuild) {
+      expect(buttonBgColor).not.toBe('rgb(239, 239, 239)')
+      expect(buttonBgColor).toBe('rgb(255, 0, 0)')
+    } else {
+      // TODO: replace this after fix
+      // should be red, but is gray now.
+      expect(buttonBgColor).toBe('rgb(239, 239, 239)')
+      expect(buttonBgColor).not.toBe('rgb(255, 0, 0)')
+    }
+  })
+})

test/production/dynamic-css-client-navigation/react-lazy.test.ts

@@ -0,0 +1,26 @@
+import { nextTestSetup } from 'e2e-utils'
+
+describe('dynamic-css-client-navigation react lazy', () => {
+  const { next } = nextTestSetup({
+    files: __dirname,
+  })
+
+  it('should not remove style when navigating from static imported component to react lazy', async () => {
+    const browser = await next.browser('/')
+    expect(
+      await browser
+        .elementByCss('a[href="/react-lazy"]')
+        .click()
+        .waitForElementByCss('#red-button')
+        .text()
+    ).toBe('Red Button')
+
+    const buttonBgColor = await browser.eval(
+      `window.getComputedStyle(document.querySelector('button')).backgroundColor`
+    )
+    // TODO: replace this after fix
+    // should be red, but is gray now.
+    expect(buttonBgColor).toBe('rgb(239, 239, 239)')
+    expect(buttonBgColor).not.toBe('rgb(255, 0, 0)')
+  })
+})

test/production/dynamic-css-client-navigation/src/components/red-button.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import classes from './red.module.css'
+
+export function RedButton() {
+  return (
+    <button id="red-button" className={classes.button}>
+      Red Button
+    </button>
+  )
+}

test/production/dynamic-css-client-navigation/src/components/red.module.css

@@ -0,0 +1,3 @@
+.button {
+  background-color: rgb(255, 0, 0);
+}

test/production/dynamic-css-client-navigation/src/pages/index.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import Link from 'next/link'
+import { RedButton } from '../components/red-button'
+
+export default function Home() {
+  return (
+    <>
+      {/* To reproduce, RedButton should be imported. */}
+      <RedButton />
+      <Link href="/next-dynamic">/next-dynamic</Link>
+      <Link href="/next-dynamic-ssr-false">/next-dynamic-ssr-false</Link>
+      <Link href="/react-lazy">/react-lazy</Link>
+    </>
+  )
+}

test/production/dynamic-css-client-navigation/src/pages/next-dynamic-ssr-false.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import dynamic from 'next/dynamic'
+
+const NextDynamicRedButton = dynamic(
+  () => import('../components/red-button').then((module) => module.RedButton),
+  { ssr: false }
+)
+
+export default function NextDynamic() {
+  return <NextDynamicRedButton />
+}

test/production/dynamic-css-client-navigation/src/pages/next-dynamic.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import dynamic from 'next/dynamic'
+
+const NextDynamicRedButton = dynamic(() =>
+  import('../components/red-button').then((module) => module.RedButton)
+)
+
+export default function NextDynamic() {
+  return <NextDynamicRedButton />
+}

test/production/dynamic-css-client-navigation/src/pages/react-lazy.tsx

@@ -0,0 +1,15 @@
+import React, { lazy, Suspense } from 'react'
+
+const ReactLazyRedButton = lazy(() =>
+  import('../components/red-button').then((module) => ({
+    default: module.RedButton,
+  }))
+)
+
+export default function ReactLazy() {
+  return (
+    <Suspense fallback={null}>
+      <ReactLazyRedButton />
+    </Suspense>
+  )
+}