From e7da9644c2f4214e8209255a4cdd277759dd55eb Mon Sep 17 00:00:00 2001 From: sagarpreet-xflowpay <96710876+sagarpreet-xflowpay@users.noreply.github.com> Date: Tue, 25 Apr 2023 00:32:59 +0530 Subject: [PATCH 1/3] Update get-css-inlined-link-tags.tsx --- .../next/src/server/app-render/get-css-inlined-link-tags.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/next/src/server/app-render/get-css-inlined-link-tags.tsx b/packages/next/src/server/app-render/get-css-inlined-link-tags.tsx index 00b119026b07..b82cc85766a8 100644 --- a/packages/next/src/server/app-render/get-css-inlined-link-tags.tsx +++ b/packages/next/src/server/app-render/get-css-inlined-link-tags.tsx @@ -17,7 +17,7 @@ export function getCssInlinedLinkTags( ): string[] { const layoutOrPageCssModules = serverCSSManifest.cssImports[filePath] - const filePathWithoutExt = filePath.replace(/\.[^.]+$/, '') + const filePathWithoutExt = filePath.replace(/(\.[^.\/]+)+$/, '') const cssFilesForEntry = new Set( clientReferenceManifest.cssFiles?.[filePathWithoutExt] || [] ) From c8bb1d7400f8a2055a474dc9544d23995e354ce3 Mon Sep 17 00:00:00 2001 From: Sagarpreet Chadha Date: Tue, 25 Apr 2023 23:27:58 +0530 Subject: [PATCH 2/3] test added --- .../app/css-pageextensions/page.page.js | 7 +++++ .../app-css-pageextensions/app/layout.page.js | 12 ++++++++ .../app-css-pageextensions/index.test.ts | 29 +++++++++++++++++++ .../app-css-pageextensions/next.config.js | 8 +++++ .../app-css-pageextensions/styles/global.css | 3 ++ 5 files changed, 59 insertions(+) create mode 100644 test/e2e/app-dir/app-css-pageextensions/app/css-pageextensions/page.page.js create mode 100644 test/e2e/app-dir/app-css-pageextensions/app/layout.page.js create mode 100644 test/e2e/app-dir/app-css-pageextensions/index.test.ts create mode 100644 test/e2e/app-dir/app-css-pageextensions/next.config.js create mode 100644 test/e2e/app-dir/app-css-pageextensions/styles/global.css diff --git a/test/e2e/app-dir/app-css-pageextensions/app/css-pageextensions/page.page.js b/test/e2e/app-dir/app-css-pageextensions/app/css-pageextensions/page.page.js new file mode 100644 index 000000000000..e30efa47fec8 --- /dev/null +++ b/test/e2e/app-dir/app-css-pageextensions/app/css-pageextensions/page.page.js @@ -0,0 +1,7 @@ +export default function Page() { + return ( + <> +

Page

+ + ) +} diff --git a/test/e2e/app-dir/app-css-pageextensions/app/layout.page.js b/test/e2e/app-dir/app-css-pageextensions/app/layout.page.js new file mode 100644 index 000000000000..dc1d57db9812 --- /dev/null +++ b/test/e2e/app-dir/app-css-pageextensions/app/layout.page.js @@ -0,0 +1,12 @@ +import '../styles/global.css' + +export default function Root({ children }) { + return ( + + + {`hello css`} + + {children} + + ) +} diff --git a/test/e2e/app-dir/app-css-pageextensions/index.test.ts b/test/e2e/app-dir/app-css-pageextensions/index.test.ts new file mode 100644 index 000000000000..81a13a361d05 --- /dev/null +++ b/test/e2e/app-dir/app-css-pageextensions/index.test.ts @@ -0,0 +1,29 @@ +import { createNextDescribe } from 'e2e-utils' + +createNextDescribe( + 'app dir css with pageextensions', + { + files: __dirname, + skipDeployment: true, + dependencies: { + '@picocss/pico': '1.5.7', + react: 'latest', + 'react-dom': 'latest', + sass: 'latest', + }, + }, + ({ next }) => { + describe('css support with pageextensions', () => { + describe('page in app directory with pageextention, css should work', () => { + it('should support global css inside layout', async () => { + const browser = await next.browser('/css-pageextensions') + expect( + await browser.eval( + `window.getComputedStyle(document.querySelector('h1')).color` + ) + ).toBe('rgb(255, 0, 0)') + }) + }) + }) + } +) diff --git a/test/e2e/app-dir/app-css-pageextensions/next.config.js b/test/e2e/app-dir/app-css-pageextensions/next.config.js new file mode 100644 index 000000000000..e71b0c96babe --- /dev/null +++ b/test/e2e/app-dir/app-css-pageextensions/next.config.js @@ -0,0 +1,8 @@ +const nextConfig = { + pageExtensions: ['page.jsx', 'page.js'], + experimental: { + appDir: true, + }, +} + +module.exports = nextConfig diff --git a/test/e2e/app-dir/app-css-pageextensions/styles/global.css b/test/e2e/app-dir/app-css-pageextensions/styles/global.css new file mode 100644 index 000000000000..adc68fa6a4df --- /dev/null +++ b/test/e2e/app-dir/app-css-pageextensions/styles/global.css @@ -0,0 +1,3 @@ +h1 { + color: red; +} From f8f9049012f2f8163572d8658272ee50067a861e Mon Sep 17 00:00:00 2001 From: Sagarpreet Chadha Date: Wed, 26 Apr 2023 21:46:29 +0530 Subject: [PATCH 3/3] regex works for stringified json as well --- .../next/src/server/app-render/get-css-inlined-link-tags.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/next/src/server/app-render/get-css-inlined-link-tags.tsx b/packages/next/src/server/app-render/get-css-inlined-link-tags.tsx index b82cc85766a8..df8e726d9be3 100644 --- a/packages/next/src/server/app-render/get-css-inlined-link-tags.tsx +++ b/packages/next/src/server/app-render/get-css-inlined-link-tags.tsx @@ -17,7 +17,7 @@ export function getCssInlinedLinkTags( ): string[] { const layoutOrPageCssModules = serverCSSManifest.cssImports[filePath] - const filePathWithoutExt = filePath.replace(/(\.[^.\/]+)+$/, '') + const filePathWithoutExt = filePath.replace(/(\.[A-Za-z0-9]+)+$/, '') const cssFilesForEntry = new Set( clientReferenceManifest.cssFiles?.[filePathWithoutExt] || [] )