first commit

test/e2e/app-dir/app-css/app/client-component-route/page.js

@@ -0,0 +1,20 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+
+import style from './style.module.css'
+import './style.css'
+
+export default function ClientComponentRoute() {
+  const [count, setCount] = useState(0)
+  useEffect(() => {
+    setCount(1)
+  }, [count])
+  return (
+    <>
+      <p className={style.red}>
+        hello from app/client-component-route. <b>count: {count}</b>
+      </p>
+    </>
+  )
+}

test/e2e/app-dir/app-css/app/client-component-route/style.css

@@ -0,0 +1,3 @@
+b {
+  color: blue;
+}

test/e2e/app-dir/app-css/app/client-component-route/style.module.css

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

test/e2e/app-dir/app-css/app/client-nested/layout.js

@@ -0,0 +1,20 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+
+import styles from './style.module.css'
+import './style.css'
+
+export default function ClientNestedLayout({ children }) {
+  const [count, setCount] = useState(0)
+  useEffect(() => {
+    setCount(1)
+  }, [])
+  return (
+    <>
+      <h1 className={styles.red}>Client Nested. Count: {count}</h1>
+      <button onClick={() => setCount(count + 1)}>{count}</button>
+      {children}
+    </>
+  )
+}

test/e2e/app-dir/app-css/app/client-nested/page.js

@@ -0,0 +1,7 @@
+export default function ClientPage() {
+  return (
+    <>
+      <p>hello from app/client-nested</p>
+    </>
+  )
+}

test/e2e/app-dir/app-css/app/client-nested/style.css

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

test/e2e/app-dir/app-css/app/client-nested/style.module.css

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

test/e2e/app-dir/app-css/app/css/css-client/client-foo.css

@@ -0,0 +1,3 @@
+.foo {
+  color: blue;
+}

test/e2e/app-dir/app-css/app/css/css-client/client-layout.css

@@ -0,0 +1,3 @@
+body {
+  background: cyan;
+}

test/e2e/app-dir/app-css/app/css/css-client/client-page.css

@@ -0,0 +1,6 @@
+h1 {
+  color: red !important;
+}
+h1::after {
+  content: ' (from css-client!!!!)';
+}

test/e2e/app-dir/app-css/app/css/css-client/foo.js

@@ -0,0 +1,5 @@
+import './client-foo.css'
+
+export default function Foo() {
+  return <b className="foo">foo</b>
+}

test/e2e/app-dir/app-css/app/css/css-client/inner/ClientComponent.module.css

@@ -0,0 +1,3 @@
+.yuge {
+  font-size: 100px;
+}

test/e2e/app-dir/app-css/app/css/css-client/inner/foo.js

@@ -0,0 +1,11 @@
+'use client'
+
+import styles from './ClientComponent.module.css'
+
+export default function ClientComponent() {
+  return (
+    <div id="client-component" className={styles.yuge}>
+      Client Component
+    </div>
+  )
+}

test/e2e/app-dir/app-css/app/css/css-client/inner/page.js

@@ -0,0 +1,5 @@
+import Foo from './foo'
+
+export default function Page() {
+  return <Foo />
+}

test/e2e/app-dir/app-css/app/css/css-client/layout.js

@@ -0,0 +1,14 @@
+'use client'
+
+import './client-layout.css'
+
+import Foo from './foo'
+
+export default function ServerLayout({ children }) {
+  return (
+    <>
+      {children}
+      <Foo />
+    </>
+  )
+}

test/e2e/app-dir/app-css/app/css/css-client/page.js

@@ -0,0 +1,17 @@
+'use client'
+
+import 'next/link'
+
+import './client-page.css'
+import styles from './inner/ClientComponent.module.css'
+
+export default function Page() {
+  return (
+    <>
+      <h1>Page!!!</h1>
+      <div id="css-modules" className={styles.yuge}>
+        huge
+      </div>
+    </>
+  )
+}

test/e2e/app-dir/app-css/app/css/css-conflict-layers/blue-button.js

@@ -0,0 +1,6 @@
+import { Button } from './button'
+import styles from './blue-button.module.css'
+
+export function BlueButton() {
+  return <Button className={'btn-blue ' + styles['blue-button']}>Button</Button>
+}

test/e2e/app-dir/app-css/app/css/css-conflict-layers/blue-button.module.css

@@ -0,0 +1,4 @@
+.blue-button {
+  color: white;
+  background: blue;
+}

test/e2e/app-dir/app-css/app/css/css-conflict-layers/button.js

@@ -0,0 +1,5 @@
+import styles from './button.module.css'
+
+export function Button({ className = '' }) {
+  return <div className={'btn ' + styles.button + ' ' + className}>Button</div>
+}

test/e2e/app-dir/app-css/app/css/css-conflict-layers/button.module.css

@@ -0,0 +1,5 @@
+.button {
+  display: inline-block;
+  border: 1px solid black;
+  background: white;
+}

test/e2e/app-dir/app-css/app/css/css-conflict-layers/layout.js

@@ -0,0 +1,12 @@
+import { BlueButton } from './blue-button'
+
+export default function ServerLayout({ children }) {
+  return (
+    <>
+      <div>
+        Blue Button: <BlueButton />
+      </div>
+      {children}
+    </>
+  )
+}

test/e2e/app-dir/app-css/app/css/css-conflict-layers/page.css

@@ -0,0 +1,3 @@
+body {
+  font-size: large;
+}

test/e2e/app-dir/app-css/app/css/css-conflict-layers/page.js

@@ -0,0 +1,13 @@
+import './page.css'
+
+import { Button } from './button'
+
+export default function Page() {
+  return (
+    <>
+      <div>
+        Button: <Button />
+      </div>
+    </>
+  )
+}

test/e2e/app-dir/app-css/app/css/css-duplicate-2/client/page.js

@@ -0,0 +1,7 @@
+'use client'
+
+import styles from '../style.module.css'
+
+export default function Page() {
+  return <div className={styles.foo}>Hello</div>
+}

test/e2e/app-dir/app-css/app/css/css-duplicate-2/layout.js

@@ -0,0 +1,5 @@
+import styles from './style.module.css'
+
+export default function Layout({ children }) {
+  return <div className={styles.foo}>{children}</div>
+}

test/e2e/app-dir/app-css/app/css/css-duplicate-2/server/page.js

@@ -0,0 +1,5 @@
+import styles from '../style.module.css'
+
+export default function Page() {
+  return <div className={styles.foo}>Hello</div>
+}

test/e2e/app-dir/app-css/app/css/css-duplicate-2/style.module.css

@@ -0,0 +1,3 @@
+.foo::before {
+  content: '_randomized_string_for_testing_';
+}

test/e2e/app-dir/app-css/app/css/css-duplicate/a/page.js

@@ -0,0 +1,5 @@
+import Comp from '../comp'
+
+export default function Page() {
+  return <Comp />
+}

test/e2e/app-dir/app-css/app/css/css-duplicate/b/page.js

@@ -0,0 +1,5 @@
+import Comp from '../comp'
+
+export default function Page() {
+  return <Comp />
+}

test/e2e/app-dir/app-css/app/css/css-duplicate/comp.js

@@ -0,0 +1,7 @@
+'use client'
+
+import './style.css'
+
+export default function Comp() {
+  return <h1 className="red">Hello</h1>
+}

test/e2e/app-dir/app-css/app/css/css-duplicate/style.css

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

test/e2e/app-dir/app-css/app/css/css-external/page.js

@@ -0,0 +1,9 @@
+import '@picocss/pico/css/pico.classless.min.css'
+
+export default function Page() {
+  return (
+    <main>
+      <p>Hello world!</p>
+    </main>
+  )
+}

test/e2e/app-dir/app-css/app/css/css-nested/layout.js

@@ -0,0 +1,14 @@
+'use client'
+
+import './style.css'
+import styles from './style.module.css'
+
+export default function ClientLayout({ children }) {
+  return (
+    <>
+      <div className={styles['client-css']}>Client Layout: CSS Modules</div>
+      <div className="client-css">Client Layout: Global CSS</div>
+      {children}
+    </>
+  )
+}

test/e2e/app-dir/app-css/app/css/css-nested/page.js

@@ -0,0 +1,5 @@
+'use client'
+
+export default function Page() {
+  return null
+}

test/e2e/app-dir/app-css/app/css/css-nested/style.css

@@ -0,0 +1,3 @@
+.client-css {
+  color: green;
+}

test/e2e/app-dir/app-css/app/css/css-nested/style.module.css

@@ -0,0 +1,3 @@
+.client-css {
+  color: green;
+}

test/e2e/app-dir/app-css/app/css/css-page-shared-loading/loading.js

@@ -0,0 +1,12 @@
+import styles from './style.module.css'
+
+export default function Page() {
+  return (
+    <>
+      <h1>Loading</h1>
+      <div id="cssm" className={styles.mod}>
+        CSSM
+      </div>
+    </>
+  )
+}

test/e2e/app-dir/app-css/app/css/css-page-shared-loading/page.js

@@ -0,0 +1,12 @@
+import styles from './style.module.css'
+
+export default function Page() {
+  return (
+    <>
+      <h1>Page</h1>
+      <div id="cssm" className={styles.mod}>
+        CSSM
+      </div>
+    </>
+  )
+}

test/e2e/app-dir/app-css/app/css/css-page-shared-loading/style.module.css

@@ -0,0 +1,3 @@
+.mod {
+  color: blue;
+}

test/e2e/app-dir/app-css/app/css/css-page/layout.js

@@ -0,0 +1,5 @@
+import './style2.css'
+
+export default function ServerLayout({ children }) {
+  return <>{children}</>
+}

test/e2e/app-dir/app-css/app/css/css-page/page.js

@@ -0,0 +1,14 @@
+import './style.css'
+
+import styles from './style.module.css'
+
+export default function Page() {
+  return (
+    <>
+      <h1>Page</h1>
+      <div id="cssm" className={styles.mod}>
+        CSSM
+      </div>
+    </>
+  )
+}

test/e2e/app-dir/app-css/app/css/css-page/style.css

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

test/e2e/app-dir/app-css/app/css/css-page/style.module.css

@@ -0,0 +1,3 @@
+.mod {
+  color: blue;
+}

test/e2e/app-dir/app-css/app/css/css-page/style2.css

@@ -0,0 +1,3 @@
+body {
+  background: #ccc;
+}

test/e2e/app-dir/app-css/app/css/foo.js

@@ -0,0 +1 @@
+import './style.module.css'

test/e2e/app-dir/app-css/app/css/layout.js

@@ -0,0 +1,15 @@
+import './style.css'
+import './css-page/style.css'
+import styles from './style.module.css'
+
+export default function ServerLayout({ children }) {
+  return (
+    <>
+      <div id="server-cssm" className={styles['server-css'] || 'undefined'}>
+        Server Layout: CSS Modules
+      </div>
+      <div className="server-css">Server Layout: Global CSS</div>
+      {children}
+    </>
+  )
+}

test/e2e/app-dir/app-css/app/css/sass-client/global.sass

@@ -0,0 +1,3 @@
+#sass-client-layout
+  color: brown
+

test/e2e/app-dir/app-css/app/css/sass-client/global.scss

@@ -0,0 +1,3 @@
+#scss-client-layout {
+  color: burlywood;
+}

test/e2e/app-dir/app-css/app/css/sass-client/inner/global.sass

@@ -0,0 +1,3 @@
+#sass-client-page
+  color: wheat
+

test/e2e/app-dir/app-css/app/css/sass-client/inner/global.scss

@@ -0,0 +1,3 @@
+#scss-client-page {
+  color: tomato;
+}

test/e2e/app-dir/app-css/app/css/sass-client/inner/page.js

@@ -0,0 +1,19 @@
+'use client'
+
+import './global.scss'
+import './global.sass'
+import sass from './styles.module.sass'
+import scss from './styles.module.scss'
+
+export default function Page() {
+  return (
+    <>
+      <div id="sass-client-page" className={sass.mod}>
+        sass client page
+      </div>
+      <div id="scss-client-page" className={scss.mod}>
+        scss client page
+      </div>
+    </>
+  )
+}

test/e2e/app-dir/app-css/app/css/sass-client/inner/styles.module.sass

@@ -0,0 +1,2 @@
+.mod
+  background-color: indigo

test/e2e/app-dir/app-css/app/css/sass-client/inner/styles.module.scss

@@ -0,0 +1,3 @@
+.mod {
+  background-color: aqua;
+}

test/e2e/app-dir/app-css/app/css/sass-client/layout.js

@@ -0,0 +1,20 @@
+'use client'
+
+import './global.scss'
+import './global.sass'
+import sass from './styles.module.sass'
+import scss from './styles.module.scss'
+
+export default function Layout({ children }) {
+  return (
+    <>
+      <div id="sass-client-layout" className={sass.mod}>
+        sass client layout
+      </div>
+      <div id="scss-client-layout" className={scss.mod}>
+        scss client layout
+      </div>
+      {children}
+    </>
+  )
+}

test/e2e/app-dir/app-css/app/css/sass-client/styles.module.sass

@@ -0,0 +1,2 @@
+.mod
+  background-color: darksalmon

test/e2e/app-dir/app-css/app/css/sass-client/styles.module.scss

@@ -0,0 +1,3 @@
+.mod {
+  background-color: darkred;
+}

test/e2e/app-dir/app-css/app/css/sass/global.sass

@@ -0,0 +1,3 @@
+#sass-server-layout
+  color: brown
+

test/e2e/app-dir/app-css/app/css/sass/global.scss

@@ -0,0 +1,3 @@
+#scss-server-layout {
+  color: burlywood;
+}

test/e2e/app-dir/app-css/app/css/sass/inner/global.sass

@@ -0,0 +1,3 @@
+#sass-server-page
+  color: wheat
+

test/e2e/app-dir/app-css/app/css/sass/inner/global.scss

@@ -0,0 +1,3 @@
+#scss-server-page {
+  color: tomato;
+}

test/e2e/app-dir/app-css/app/css/sass/inner/page.js

@@ -0,0 +1,17 @@
+import './global.scss'
+import './global.sass'
+import sass from './styles.module.sass'
+import scss from './styles.module.scss'
+
+export default function Page() {
+  return (
+    <>
+      <div id="sass-server-page" className={sass.mod}>
+        sass server page
+      </div>
+      <div id="scss-server-page" className={scss.mod}>
+        scss server page
+      </div>
+    </>
+  )
+}

test/e2e/app-dir/app-css/app/css/sass/inner/styles.module.sass

@@ -0,0 +1,2 @@
+.mod
+  background-color: indigo

test/e2e/app-dir/app-css/app/css/sass/inner/styles.module.scss

@@ -0,0 +1,3 @@
+.mod {
+  background-color: aqua;
+}

test/e2e/app-dir/app-css/app/css/sass/layout.js

@@ -0,0 +1,18 @@
+import './global.scss'
+import './global.sass'
+import sass from './styles.module.sass'
+import scss from './styles.module.scss'
+
+export default function Layout({ children }) {
+  return (
+    <>
+      <div id="sass-server-layout" className={sass.mod}>
+        sass server layout
+      </div>
+      <div id="scss-server-layout" className={scss.mod}>
+        scss server layout
+      </div>
+      {children}
+    </>
+  )
+}

test/e2e/app-dir/app-css/app/css/sass/styles.module.sass

@@ -0,0 +1,2 @@
+.mod
+  background-color: darksalmon

test/e2e/app-dir/app-css/app/css/sass/styles.module.scss

@@ -0,0 +1,3 @@
+.mod {
+  background-color: darkred;
+}

test/e2e/app-dir/app-css/app/css/style.css

@@ -0,0 +1,3 @@
+.server-css {
+  color: blue;
+}

test/e2e/app-dir/app-css/app/css/style.module.css

@@ -0,0 +1,3 @@
+.server-css {
+  color: green;
+}

test/e2e/app-dir/app-css/app/dashboard/client-comp-client.jsx

@@ -0,0 +1,18 @@
+'use client'
+
+import styles from './client-comp.module.css'
+
+import { useEffect, useState } from 'react'
+
+export default function ClientComp() {
+  const [state, setState] = useState({})
+  useEffect(() => {
+    setState({ test: 'HELLOOOO' })
+  }, [])
+  return (
+    <>
+      <p className={styles.client}>Hello</p>
+      {state.test}
+    </>
+  )
+}

test/e2e/app-dir/app-css/app/dashboard/client-comp.module.css

@@ -0,0 +1,3 @@
+.client {
+  color: #2e5aea;
+}

test/e2e/app-dir/app-css/app/dashboard/global.css

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

test/e2e/app-dir/app-css/app/dashboard/layout.js

@@ -0,0 +1,11 @@
+import './style.css'
+import './global.css'
+
+export default function DashboardLayout(props) {
+  return (
+    <div className="dangerous-text">
+      <h1 className="green">Dashboard</h1>
+      {props.children}
+    </div>
+  )
+}

test/e2e/app-dir/app-css/app/dashboard/page.js

@@ -0,0 +1,16 @@
+import ClientComp from './client-comp-client'
+
+export default function DashboardPage(props) {
+  return (
+    <>
+      <p id="from-dashboard" className="p">
+        hello from app/dashboard
+      </p>
+      <p className="bold">BOLD</p>
+      <p className="green">this is green</p>
+      <ClientComp />
+    </>
+  )
+}
+
+export const runtime = 'edge'

test/e2e/app-dir/app-css/app/dashboard/style.css

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

test/e2e/app-dir/app-css/app/deep/deep.module.css

@@ -0,0 +1,4 @@
+.layout {
+  color: rgb(124, 124, 0);
+  background-color: rgb(25, 42, 56);
+}

test/e2e/app-dir/app-css/app/deep/layout.js

@@ -0,0 +1,9 @@
+import css from './deep.module.css'
+
+export default function Layout({ children }) {
+  return (
+    <div className={css.layout}>
+      deep layout<div>{children}</div>
+    </div>
+  )
+}

test/e2e/app-dir/app-css/app/deep/loading.js

@@ -0,0 +1,3 @@
+export default function Loading({ children }) {
+  return <div>ly layout loading</div>
+}

test/e2e/app-dir/app-css/app/deep/ly/layout.js

@@ -0,0 +1,10 @@
+import css from './ly.module.css'
+
+export default async function Layout({ children }) {
+  await new Promise((resolve) => setTimeout(resolve, 1000))
+  return (
+    <div className={css.layout}>
+      ly layout<div>{children}</div>
+    </div>
+  )
+}

test/e2e/app-dir/app-css/app/deep/ly/ly.module.css

@@ -0,0 +1,4 @@
+.layout {
+  color: rgb(105, 0, 124);
+  background-color: rgb(79, 101, 119);
+}

test/e2e/app-dir/app-css/app/deep/ly/nest/ed/ed.module.css

@@ -0,0 +1,4 @@
+.page {
+  color: rgb(124, 0, 0);
+  background-color: rgb(201, 218, 232);
+}

test/e2e/app-dir/app-css/app/deep/ly/nest/ed/page.js

@@ -0,0 +1,9 @@
+import css from './ed.module.css'
+
+export default function Page() {
+  return (
+    <div className={css.page}>
+      <p>ed page</p>
+    </div>
+  )
+}

test/e2e/app-dir/app-css/app/deep/ly/nest/layout.js

@@ -0,0 +1,9 @@
+import css from './nest.module.css'
+
+export default function Layout({ children }) {
+  return (
+    <div className={css.layout}>
+      nest layout<div>{children}</div>
+    </div>
+  )
+}

test/e2e/app-dir/app-css/app/deep/ly/nest/nest.module.css

@@ -0,0 +1,4 @@
+.layout {
+  color: rgb(0, 124, 2);
+  background-color: rgb(156, 173, 187);
+}

test/e2e/app-dir/app-css/app/error/client-component/error.js

@@ -0,0 +1,14 @@
+'use client'
+
+import styles from './style.module.css'
+
+export default function ErrorBoundary({ error, reset }) {
+  return (
+    <>
+      <p id="error-boundary-message">An error occurred: {error.message}</p>
+      <button id="reset" onClick={() => reset()} className={styles.button}>
+        Try again
+      </button>
+    </>
+  )
+}

test/e2e/app-dir/app-css/app/error/client-component/page.js

@@ -0,0 +1,20 @@
+'use client'
+
+import { useState } from 'react'
+
+export default function Page() {
+  const [clicked, setClicked] = useState(false)
+  if (clicked) {
+    throw new Error('this is a test')
+  }
+  return (
+    <button
+      id="error-trigger-button"
+      onClick={() => {
+        setClicked(true)
+      }}
+    >
+      Trigger Error!
+    </button>
+  )
+}

test/e2e/app-dir/app-css/app/error/client-component/style.module.css

@@ -0,0 +1,3 @@
+.button {
+  font-size: 50px;
+}

test/e2e/app-dir/app-css/app/externalLayer/external-layer.css

@@ -0,0 +1,11 @@
+@import url('https://cdn.jsdelivr.net/npm/modern-css-reset/dist/reset.min.css')
+layer(default);
+/* Any external stylesheet should work. Using this css-reset because it is very small and backed by CDN */
+
+@layer default, new;
+
+@layer new {
+  h1 {
+    margin: 5px;
+  }
+}

test/e2e/app-dir/app-css/app/externalLayer/page.js

@@ -0,0 +1,5 @@
+import './external-layer.css'
+
+export default function Home() {
+  return <h1>Hello</h1>
+}

test/e2e/app-dir/app-css/app/hmr/global.css

@@ -0,0 +1,3 @@
+body {
+  background: gray;
+}

test/e2e/app-dir/app-css/app/hmr/import/actual-styles.css

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

test/e2e/app-dir/app-css/app/hmr/import/page.css

@@ -0,0 +1 @@
+@import './actual-styles.css';

test/e2e/app-dir/app-css/app/hmr/import/page.js

@@ -0,0 +1,5 @@
+import './page.css'
+
+export default function Page() {
+  return <div>hello!</div>
+}

test/e2e/app-dir/app-css/app/hmr/page.js

@@ -0,0 +1,5 @@
+import './global.css'
+
+export default function Page() {
+  return <div>hello!</div>
+}

test/e2e/app-dir/app-css/app/layout.js

@@ -0,0 +1,13 @@
+import '../styles/global.css'
+import './style.css'
+
+export const revalidate = 0
+
+export default function Root({ children }) {
+  return (
+    <html className="this-is-the-document-html">
+      <head></head>
+      <body className="this-is-the-document-body">{children}</body>
+    </html>
+  )
+}

test/e2e/app-dir/app-css/app/loading-bug/[categorySlug]/loading.js

@@ -0,0 +1,5 @@
+import './style.css'
+
+export default function Loading() {
+  return <h2>Loading...</h2>
+}

test/e2e/app-dir/app-css/app/loading-bug/[categorySlug]/page.js

@@ -0,0 +1,15 @@
+import { use } from 'react'
+
+const fetchCategory = async (categorySlug) => {
+  // artificial delay
+  await new Promise((resolve) => setTimeout(resolve, 3000))
+
+  return categorySlug + 'abc'
+}
+
+export default function Page(props) {
+  const params = use(props.params)
+  const category = use(fetchCategory(params.categorySlug))
+
+  return <div id="category-id">{category}</div>
+}

test/e2e/app-dir/app-css/app/loading-bug/[categorySlug]/style.css

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

test/e2e/app-dir/app-css/app/mdx/content.js

@@ -0,0 +1,3 @@
+import styles from './content.module.css'
+
+export const Content = () => <h1 className={styles.root}>Hello World!</h1>

test/e2e/app-dir/app-css/app/mdx/content.module.css

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

test/e2e/app-dir/app-css/app/mdx/page.mdx

@@ -0,0 +1,3 @@
+import { Content } from './content'
+
+<Content />