first commit

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