From 6e734d92a1c5323cb798575989639462dbf70626 Mon Sep 17 00:00:00 2001
From: Shu Ding <g@shud.in>
Date: Sat, 29 Oct 2022 01:38:55 -0700
Subject: [PATCH] Fix CSS imports from outside of the app dir when src folder
 is present (#42108)

Previously we use `path.join(compiler.context, chunk.name)` as the entry
name, which isn't always the case especially when there is the `src`
folder. This PR fixes that by using `appDir`.

## Bug

- [ ] Related issues linked using `fixes #number`
- [x] Integration tests added
- [ ] Errors have a helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the
feature request has been accepted for implementation before opening a
PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have a helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes by running `pnpm build && pnpm lint`
- [ ] The "examples guidelines" are followed from [our contributing
doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 packages/next/build/webpack-config.ts                 |  1 +
 .../webpack/plugins/flight-client-entry-plugin.ts     |  5 ++++-
 test/e2e/app-dir/app-alias.test.ts                    | 11 ++++++++++-
 test/e2e/app-dir/app-alias/ui/button.tsx              |  4 +++-
 test/e2e/app-dir/app-alias/ui/style.module.css        |  3 +++
 5 files changed, 21 insertions(+), 3 deletions(-)
 create mode 100644 test/e2e/app-dir/app-alias/ui/style.module.css

diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts
index 28a6dbb3d9ae..262191856048 100644
--- a/packages/next/build/webpack-config.ts
+++ b/packages/next/build/webpack-config.ts
@@ -2094,6 +2094,7 @@ export default async function getBaseWebpackConfig(
               dev,
             })
           : new FlightClientEntryPlugin({
+              appDir,
               dev,
               isEdgeServer,
             })),
diff --git a/packages/next/build/webpack/plugins/flight-client-entry-plugin.ts b/packages/next/build/webpack/plugins/flight-client-entry-plugin.ts
index ff43c478d751..bb781e778b3b 100644
--- a/packages/next/build/webpack/plugins/flight-client-entry-plugin.ts
+++ b/packages/next/build/webpack/plugins/flight-client-entry-plugin.ts
@@ -26,6 +26,7 @@ import { traverseModules } from '../utils'
 
 interface Options {
   dev: boolean
+  appDir: string
   isEdgeServer: boolean
 }
 
@@ -41,10 +42,12 @@ const flightCSSManifest: FlightCSSManifest = {}
 
 export class FlightClientEntryPlugin {
   dev: boolean
+  appDir: string
   isEdgeServer: boolean
 
   constructor(options: Options) {
     this.dev = options.dev
+    this.appDir = options.appDir
     this.isEdgeServer = options.isEdgeServer
   }
 
@@ -247,7 +250,7 @@ export class FlightClientEntryPlugin {
           if (!chunk.name) return
           if (!chunk.name.endsWith('/page')) return
 
-          const entryName = path.join(compiler.context, chunk.name)
+          const entryName = path.join(this.appDir, '..', chunk.name)
 
           if (!cssImportsForChunk[entryName]) {
             cssImportsForChunk[entryName] = []
diff --git a/test/e2e/app-dir/app-alias.test.ts b/test/e2e/app-dir/app-alias.test.ts
index b6c0bf069798..6180195a2f46 100644
--- a/test/e2e/app-dir/app-alias.test.ts
+++ b/test/e2e/app-dir/app-alias.test.ts
@@ -1,6 +1,7 @@
 import { createNext, FileRef } from 'e2e-utils'
 import { NextInstance } from 'test/lib/next-modes/base'
 import { renderViaHTTP } from 'next-test-utils'
+import webdriver from 'next-webdriver'
 import path from 'path'
 
 describe('app-dir alias handling', () => {
@@ -27,6 +28,14 @@ describe('app-dir alias handling', () => {
 
   it('should handle typescript paths alias correctly', async () => {
     const html = await renderViaHTTP(next.url, '/button')
-    expect(html).toContain('<button>click</button>')
+    expect(html).toContain('click</button>')
+  })
+
+  it('should resolve css imports from outside with src folder presented', async () => {
+    const browser = await webdriver(next.url, '/button')
+    const fontSize = await browser
+      .elementByCss('button')
+      .getComputedCss('font-size')
+    expect(fontSize).toBe('50px')
   })
 })
diff --git a/test/e2e/app-dir/app-alias/ui/button.tsx b/test/e2e/app-dir/app-alias/ui/button.tsx
index 39aa4721d6af..4219fce04e2e 100644
--- a/test/e2e/app-dir/app-alias/ui/button.tsx
+++ b/test/e2e/app-dir/app-alias/ui/button.tsx
@@ -1,3 +1,5 @@
+import styles from './style.module.css'
+
 export default function Button(props: any) {
-  return <button {...props} />
+  return <button {...props} className={styles.button} />
 }
diff --git a/test/e2e/app-dir/app-alias/ui/style.module.css b/test/e2e/app-dir/app-alias/ui/style.module.css
new file mode 100644
index 000000000000..4a83fef4cc48
--- /dev/null
+++ b/test/e2e/app-dir/app-alias/ui/style.module.css
@@ -0,0 +1,3 @@
+.button {
+  font-size: 50px;
+}