Fix CSS imports not included in entries with a custom extension (#46571)

`entryName` will contain the extension if it's not a normal JS entry, this causes CSS being missing in pages with a custom extension in app dir (e.g. MDX). Here we add a `.replace(/\.[^\\/.]+$/, '')` to the entry name.

Fixes NEXT-709

## Bug

- [ ] Related issues linked using `fixes #number`
- [x] Integration tests added
- [ ] Errors have a helpful link attached, see [`contributing.md`](https://github.com/vercel/next.js/blob/canary/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`
- [ ] [e2e](https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs) 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`](https://github.com/vercel/next.js/blob/canary/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)

packages/next/src/build/webpack/plugins/flight-manifest-plugin.ts

@@ -374,7 +374,12 @@ export class FlightManifestPlugin {
         if (entryName?.startsWith('app/')) {
           // The `key` here should be the absolute file path but without extension.
           // We need to replace the separator in the entry name to match the system separator.
-          const key = this.appDir + entryName.slice(3).replace(/\//g, sep)
+          const key =
+            this.appDir +
+            entryName
+              .slice(3)
+              .replace(/\//g, sep)
+              .replace(/\.[^\\/.]+$/, '')
           entryCSSFiles[key] = files.concat(entryCSSFiles[key] || [])
         }
       }

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

test/e2e/app-dir/app-css/index.test.ts

@@ -12,6 +12,7 @@ createNextDescribe(
       react: 'latest',
       'react-dom': 'latest',
       sass: 'latest',
+      '@next/mdx': 'canary',
     },
   },
   ({ next, isNextDev: isDev }) => {
@@ -231,6 +232,17 @@ createNextDescribe(
         })
       })
 
+      describe('page extensions', () => {
+        it('should include css imported in MDX pages', async () => {
+          const browser = await next.browser('/mdx')
+          expect(
+            await browser.eval(
+              `window.getComputedStyle(document.querySelector('h1')).color`
+            )
+          ).toBe('rgb(255, 0, 0)')
+        })
+      })
+
       if (isDev) {
         describe('multiple entries', () => {
           it('should only inject the same style once if used by different layers', async () => {

test/e2e/app-dir/app-css/mdx-components.jsx

@@ -0,0 +1 @@
+export const useMDXComponents = (components) => components

test/e2e/app-dir/app-css/next.config.js

@@ -1,5 +1,13 @@
-module.exports = {
+const mdx = require('@next/mdx')
+
+const withMDX = mdx()
+
+const nextConfig = {
+  pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
   experimental: {
     appDir: true,
+    mdxRs: true,
   },
 }
+
+module.exports = withMDX(nextConfig)