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

@@ -2094,6 +2094,7 @@ export default async function getBaseWebpackConfig(
               dev,
             })
           : new FlightClientEntryPlugin({
+              appDir,
               dev,
               isEdgeServer,
             })),

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] = []

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')
   })
 })

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} />
 }

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

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