From c422ca783c98a05bc1059c93fd3b00fca4793f46 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hannes=20Born=C3=B6?= Date: Wed, 12 Oct 2022 01:00:14 +0200 Subject: [PATCH] Test for unused css modules with layout (#41018) Similar to #40996. This PR only adds a failing test that should pass. Also updates wrong url of previous test. ## Bug - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Errors have a helpful link attached, see `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` - [ ] Integration 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` ## Documentation / Examples - [ ] Make sure the linting passes by running `pnpm lint` - [ ] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md) --- .../app/css/css-page/unused-nested/inner/page.js | 3 +++ .../app/app/css/css-page/unused-nested/layout.js | 10 ++++++++++ .../only-used-in-first-page.module.css | 3 +++ .../unused-nested/only-used-in-layout.module.css | 3 +++ .../app/app/css/css-page/unused-nested/page.js | 5 +++++ .../app/app/css/css-page/unused-nested/styles.js | 4 ++++ test/e2e/app-dir/index.test.ts | 15 ++++++++++++++- 7 files changed, 42 insertions(+), 1 deletion(-) create mode 100644 test/e2e/app-dir/app/app/css/css-page/unused-nested/inner/page.js create mode 100644 test/e2e/app-dir/app/app/css/css-page/unused-nested/layout.js create mode 100644 test/e2e/app-dir/app/app/css/css-page/unused-nested/only-used-in-first-page.module.css create mode 100644 test/e2e/app-dir/app/app/css/css-page/unused-nested/only-used-in-layout.module.css create mode 100644 test/e2e/app-dir/app/app/css/css-page/unused-nested/page.js create mode 100644 test/e2e/app-dir/app/app/css/css-page/unused-nested/styles.js diff --git a/test/e2e/app-dir/app/app/css/css-page/unused-nested/inner/page.js b/test/e2e/app-dir/app/app/css/css-page/unused-nested/inner/page.js new file mode 100644 index 0000000000000..6878a343aa179 --- /dev/null +++ b/test/e2e/app-dir/app/app/css/css-page/unused-nested/inner/page.js @@ -0,0 +1,3 @@ +export default function Inner() { + return

Inner Page

+} diff --git a/test/e2e/app-dir/app/app/css/css-page/unused-nested/layout.js b/test/e2e/app-dir/app/app/css/css-page/unused-nested/layout.js new file mode 100644 index 0000000000000..38e985058500c --- /dev/null +++ b/test/e2e/app-dir/app/app/css/css-page/unused-nested/layout.js @@ -0,0 +1,10 @@ +import { layout } from './styles' + +export default function ServerLayout({ children }) { + return ( + <> +

Layout

+ {children} + + ) +} diff --git a/test/e2e/app-dir/app/app/css/css-page/unused-nested/only-used-in-first-page.module.css b/test/e2e/app-dir/app/app/css/css-page/unused-nested/only-used-in-first-page.module.css new file mode 100644 index 0000000000000..c71dcc347dbe0 --- /dev/null +++ b/test/e2e/app-dir/app/app/css/css-page/unused-nested/only-used-in-first-page.module.css @@ -0,0 +1,3 @@ +.this_should_not_be_included_in_inner_path { + color: wheat; +} diff --git a/test/e2e/app-dir/app/app/css/css-page/unused-nested/only-used-in-layout.module.css b/test/e2e/app-dir/app/app/css/css-page/unused-nested/only-used-in-layout.module.css new file mode 100644 index 0000000000000..43b5b99d39ebc --- /dev/null +++ b/test/e2e/app-dir/app/app/css/css-page/unused-nested/only-used-in-layout.module.css @@ -0,0 +1,3 @@ +.mod { + color: tomato; +} diff --git a/test/e2e/app-dir/app/app/css/css-page/unused-nested/page.js b/test/e2e/app-dir/app/app/css/css-page/unused-nested/page.js new file mode 100644 index 0000000000000..531ae6e120a5f --- /dev/null +++ b/test/e2e/app-dir/app/app/css/css-page/unused-nested/page.js @@ -0,0 +1,5 @@ +import { page } from './styles' + +export default function Page() { + return

Page

+} diff --git a/test/e2e/app-dir/app/app/css/css-page/unused-nested/styles.js b/test/e2e/app-dir/app/app/css/css-page/unused-nested/styles.js new file mode 100644 index 0000000000000..f649cef70ea2e --- /dev/null +++ b/test/e2e/app-dir/app/app/css/css-page/unused-nested/styles.js @@ -0,0 +1,4 @@ +import layout from './only-used-in-layout.module.css' +import page from './only-used-in-first-page.module.css' + +export { layout, page } diff --git a/test/e2e/app-dir/index.test.ts b/test/e2e/app-dir/index.test.ts index 38270f263db1f..18c1c6b8282fe 100644 --- a/test/e2e/app-dir/index.test.ts +++ b/test/e2e/app-dir/index.test.ts @@ -1261,13 +1261,26 @@ describe('app dir', () => { if (!isDev) { it('should not include unused css modules in the page in prod', async () => { - const browser = await webdriver(next.url, '/css/css-page') + const browser = await webdriver(next.url, '/css/css-page/unused') expect( await browser.eval( `[...document.styleSheets].some(({ rules }) => [...rules].some(rule => rule.selectorText.includes('this_should_not_be_included')))` ) ).toBe(false) }) + + // TODO-APP: Should not include unused css modules in pages + it.skip('should not include unused css modules in nested pages in prod', async () => { + const browser = await webdriver( + next.url, + '/css/css-page/unused-nested/inner' + ) + expect( + await browser.eval( + `[...document.styleSheets].some(({ rules }) => [...rules].some(rule => rule.selectorText.includes('this_should_not_be_included_in_inner_path')))` + ) + ).toBe(false) + }) } })