Custom page extensions (e.g. page.page.tsx) do not import CSS in AppDir

[Winwardo]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Introduced in 13.2.2-canary.4
Specifically this change: https://github.com/vercel/next.js/pull/46571 "Fix CSS imports not included in entries with a custom extension"
This change should account for custom page extensions.

Still present in 13.2.4-canary.0

Which area(s) of Next.js are affected? (leave empty if unsure)

App directory (appDir: true)

Link to the code that reproduces this issue

https://stackblitz.com/edit/vercel-next-js-bxppz3

To Reproduce

In next.config.js, add a custom extension that looks like this:

pageExtensions: ['customextension.tsx', 'customextension.ts'],
This works with any extension of this format, but the version recommended in the stable NextJS docs recommend page.tsx: https://nextjs.org/docs/api-reference/next.config.js/custom-page-extensions#including-non-page-files-in-the-pages-directory

Create a page in /app. Import any .css file. See how it does not get imported into the page.

In the reproduction I have given, /app/page.tsx works when there is no custom extension, and /app/page.customextension.tsx does not import the CSS.

Describe the Bug

When not using custom page extensions, pages correctly import CSS:

When using a custom page extension, the CSS appears to be dropped completely:

I have a legacy NextJS application that relies on a custom extension of page.tsx to allow me to colocate components and other files in the /pages directory, as recommended in the docs.

Due to the size of the project, it is not feasible to migrate to /app or move all the components out of /pages quickly (though it is a long-term goal)

(Side note, the NextJS Typescript plugin also does not understanding custom page extensions - I intend to open a separate issue for that.)

Expected Behavior

CSS should import on files with custom page extensions, like mypage.page.tsx.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

[Winwardo]

I can confirm this still happens in 13.2.4 and is blocking my ability to upgrade past 13.2.1.
FYI @shuding who has recently worked in this area with your change on CSS imports #46571

Thanks for your time :)

[jinwookie]

i am encountering the same issue. any updates on this?

[karl-run]

Also seeing this. I'd like to migrate parts of the pages over to the app dir, disabling the pageExtensions would require moving a bunch of tests and stuff around. 😄

[amannn]

Can confirm this is still the case in [email protected]! I have a similar situation as mentioned above where the page extension would be necessary to migrate an older app.

[karl-run]

Seems like this is fixed in either 13.4.3 or 13.4.4. Did a quick test now on 13.4.4. 😅

[karl-run]

Correction, seems like tailwind and global CSS works, but not css-modules.