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)
This commit is contained in:
parent
d49c700d0d
commit
9edf2d3d1f
7 changed files with 37 additions and 2 deletions
|
@ -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] || [])
|
||||
}
|
||||
}
|
||||
|
|
3
test/e2e/app-dir/app-css/app/mdx/content.js
Normal file
3
test/e2e/app-dir/app-css/app/mdx/content.js
Normal file
|
@ -0,0 +1,3 @@
|
|||
import styles from './content.module.css'
|
||||
|
||||
export const Content = () => <h1 className={styles.root}>Hello World!</h1>
|
3
test/e2e/app-dir/app-css/app/mdx/content.module.css
Normal file
3
test/e2e/app-dir/app-css/app/mdx/content.module.css
Normal file
|
@ -0,0 +1,3 @@
|
|||
.root {
|
||||
color: red;
|
||||
}
|
3
test/e2e/app-dir/app-css/app/mdx/page.mdx
Normal file
3
test/e2e/app-dir/app-css/app/mdx/page.mdx
Normal file
|
@ -0,0 +1,3 @@
|
|||
import { Content } from './content'
|
||||
|
||||
<Content />
|
|
@ -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 () => {
|
||||
|
|
1
test/e2e/app-dir/app-css/mdx-components.jsx
Normal file
1
test/e2e/app-dir/app-css/mdx-components.jsx
Normal file
|
@ -0,0 +1 @@
|
|||
export const useMDXComponents = (components) => components
|
|
@ -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)
|
||||
|
|
Loading…
Reference in a new issue