From 9edf2d3d1f31ae180117416fb3c62219295b88a0 Mon Sep 17 00:00:00 2001 From: Shu Ding Date: Tue, 28 Feb 2023 19:53:48 +0100 Subject: [PATCH] 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) --- .../build/webpack/plugins/flight-manifest-plugin.ts | 7 ++++++- test/e2e/app-dir/app-css/app/mdx/content.js | 3 +++ test/e2e/app-dir/app-css/app/mdx/content.module.css | 3 +++ test/e2e/app-dir/app-css/app/mdx/page.mdx | 3 +++ test/e2e/app-dir/app-css/index.test.ts | 12 ++++++++++++ test/e2e/app-dir/app-css/mdx-components.jsx | 1 + test/e2e/app-dir/app-css/next.config.js | 10 +++++++++- 7 files changed, 37 insertions(+), 2 deletions(-) create mode 100644 test/e2e/app-dir/app-css/app/mdx/content.js create mode 100644 test/e2e/app-dir/app-css/app/mdx/content.module.css create mode 100644 test/e2e/app-dir/app-css/app/mdx/page.mdx create mode 100644 test/e2e/app-dir/app-css/mdx-components.jsx diff --git a/packages/next/src/build/webpack/plugins/flight-manifest-plugin.ts b/packages/next/src/build/webpack/plugins/flight-manifest-plugin.ts index 051312282bbe2..d43c18e8d7ed8 100644 --- a/packages/next/src/build/webpack/plugins/flight-manifest-plugin.ts +++ b/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] || []) } } diff --git a/test/e2e/app-dir/app-css/app/mdx/content.js b/test/e2e/app-dir/app-css/app/mdx/content.js new file mode 100644 index 0000000000000..79fb4de810214 --- /dev/null +++ b/test/e2e/app-dir/app-css/app/mdx/content.js @@ -0,0 +1,3 @@ +import styles from './content.module.css' + +export const Content = () =>

Hello World!

diff --git a/test/e2e/app-dir/app-css/app/mdx/content.module.css b/test/e2e/app-dir/app-css/app/mdx/content.module.css new file mode 100644 index 0000000000000..d810e45683b84 --- /dev/null +++ b/test/e2e/app-dir/app-css/app/mdx/content.module.css @@ -0,0 +1,3 @@ +.root { + color: red; +} diff --git a/test/e2e/app-dir/app-css/app/mdx/page.mdx b/test/e2e/app-dir/app-css/app/mdx/page.mdx new file mode 100644 index 0000000000000..5f9e32625c7f9 --- /dev/null +++ b/test/e2e/app-dir/app-css/app/mdx/page.mdx @@ -0,0 +1,3 @@ +import { Content } from './content' + + diff --git a/test/e2e/app-dir/app-css/index.test.ts b/test/e2e/app-dir/app-css/index.test.ts index fe77931dc2c69..987c5f9e6a14a 100644 --- a/test/e2e/app-dir/app-css/index.test.ts +++ b/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 () => { diff --git a/test/e2e/app-dir/app-css/mdx-components.jsx b/test/e2e/app-dir/app-css/mdx-components.jsx new file mode 100644 index 0000000000000..e112b100b6818 --- /dev/null +++ b/test/e2e/app-dir/app-css/mdx-components.jsx @@ -0,0 +1 @@ +export const useMDXComponents = (components) => components diff --git a/test/e2e/app-dir/app-css/next.config.js b/test/e2e/app-dir/app-css/next.config.js index cfa3ac3d7aa94..c179cd48adb94 100644 --- a/test/e2e/app-dir/app-css/next.config.js +++ b/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)