From 15de087f32e96fd9aaaa48df9e6b8d3a6a4e7645 Mon Sep 17 00:00:00 2001 From: brijendravarma Date: Sun, 28 Jun 2020 19:42:31 +0530 Subject: [PATCH 1/6] Updated the Error message describing the alternative and added styles css sample code into the err sh link --- errors/css-global.md | 16 +++++++++++++++- .../build/webpack/config/blocks/css/messages.ts | 2 +- 2 files changed, 16 insertions(+), 2 deletions(-) diff --git a/errors/css-global.md b/errors/css-global.md index 22c4e87c5e78b..8c0ebaae6f296 100644 --- a/errors/css-global.md +++ b/errors/css-global.md @@ -8,10 +8,24 @@ Global CSS cannot be used in files other than your [Custom ``](https://next #### Possible Ways to Fix It -Relocate all Global CSS imports to your [`pages/_app.js` file](https://nextjs.org/docs/advanced-features/custom-app). +To avoid conflicts, relocate all Global CSS imports to your [`pages/_app.js` file](https://nextjs.org/docs/advanced-features/custom-app). #### Example +Consider the stylesheet named [`styles.css`](https://nextjs.org/docs/basic-features/built-in-css-support#adding-a-global-stylesheet) + +```jsx +//styles.css +body { + font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', 'Helvetica', + 'Arial', sans-serif; + padding: 20px 20px 60px; + max-width: 680px; + margin: 0 auto; +} +``` +Create a [`pages/_app.js` file](https://nextjs.org/docs/advanced-features/custom-app) if not already present. Then [`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) the [`styles.css` file](https://nextjs.org/docs/basic-features/built-in-css-support#adding-a-global-stylesheet). + ```jsx // pages/_app.js import '../styles.css' diff --git a/packages/next/build/webpack/config/blocks/css/messages.ts b/packages/next/build/webpack/config/blocks/css/messages.ts index a7e2ed9f0de4a..dff73230cf799 100644 --- a/packages/next/build/webpack/config/blocks/css/messages.ts +++ b/packages/next/build/webpack/config/blocks/css/messages.ts @@ -5,7 +5,7 @@ export function getGlobalImportError(file: string | null) { 'cannot' )} be imported from files other than your ${chalk.bold( 'Custom ' - )}. Please move all global CSS imports to ${chalk.cyan( + )}. Due to the Global nature of stylesheets, and to avoid conflicts, Please move all global CSS imports to ${chalk.cyan( file ? file : 'pages/_app.js' )}.\nRead more: https://err.sh/next.js/css-global` } From d03c2f633064c1fef932f7b2b39445e7be9b5271 Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Sat, 23 Jan 2021 14:37:08 +0100 Subject: [PATCH 2/6] Update packages/next/build/webpack/config/blocks/css/messages.ts --- packages/next/build/webpack/config/blocks/css/messages.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/next/build/webpack/config/blocks/css/messages.ts b/packages/next/build/webpack/config/blocks/css/messages.ts index dff73230cf799..721a25313cf08 100644 --- a/packages/next/build/webpack/config/blocks/css/messages.ts +++ b/packages/next/build/webpack/config/blocks/css/messages.ts @@ -5,7 +5,7 @@ export function getGlobalImportError(file: string | null) { 'cannot' )} be imported from files other than your ${chalk.bold( 'Custom ' - )}. Due to the Global nature of stylesheets, and to avoid conflicts, Please move all global CSS imports to ${chalk.cyan( + )}. Due to the Global nature of stylesheets, and to avoid conflicts, Please move all first-party global CSS imports to ${chalk.cyan( file ? file : 'pages/_app.js' )}.\nRead more: https://err.sh/next.js/css-global` } From 8c3cc4cc2795b3b784443f196116437c4365fc1a Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Sat, 23 Jan 2021 14:37:14 +0100 Subject: [PATCH 3/6] Update errors/css-global.md --- errors/css-global.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/errors/css-global.md b/errors/css-global.md index 8c0ebaae6f296..e79cfc70cf1c0 100644 --- a/errors/css-global.md +++ b/errors/css-global.md @@ -8,7 +8,7 @@ Global CSS cannot be used in files other than your [Custom ``](https://next #### Possible Ways to Fix It -To avoid conflicts, relocate all Global CSS imports to your [`pages/_app.js` file](https://nextjs.org/docs/advanced-features/custom-app). +To avoid conflicts, relocate all first-party Global CSS imports to your [`pages/_app.js` file](https://nextjs.org/docs/advanced-features/custom-app). #### Example From dfff30a6a709855dd03d959bef3960be921d7388 Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Sat, 23 Jan 2021 14:38:28 +0100 Subject: [PATCH 4/6] Run prettier --- errors/css-global.md | 1 + 1 file changed, 1 insertion(+) diff --git a/errors/css-global.md b/errors/css-global.md index e79cfc70cf1c0..ab97038078d6e 100644 --- a/errors/css-global.md +++ b/errors/css-global.md @@ -24,6 +24,7 @@ body { margin: 0 auto; } ``` + Create a [`pages/_app.js` file](https://nextjs.org/docs/advanced-features/custom-app) if not already present. Then [`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) the [`styles.css` file](https://nextjs.org/docs/basic-features/built-in-css-support#adding-a-global-stylesheet). ```jsx From d0fc0936be502dcf9fa3a3c89a4babdc013337af Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Sun, 24 Jan 2021 14:28:46 +0100 Subject: [PATCH 5/6] Update tests --- test/integration/css/test/index.test.js | 4 ++-- test/integration/scss/test/index.test.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/test/integration/css/test/index.test.js b/test/integration/css/test/index.test.js index b24d6190b423f..4281befd89afa 100644 --- a/test/integration/css/test/index.test.js +++ b/test/integration/css/test/index.test.js @@ -357,7 +357,7 @@ describe('CSS Support', () => { expect(stderr).toContain('Failed to compile') expect(stderr).toContain('styles/global.css') expect(stderr).toMatch( - /Please move all global CSS imports.*?pages(\/|\\)_app/ + /Please move all first-party global CSS imports.*?pages(\/|\\)_app/ ) expect(stderr).toMatch(/Location:.*pages[\\/]index\.js/) }) @@ -407,7 +407,7 @@ describe('CSS Support', () => { expect(stderr).toContain('Failed to compile') expect(stderr).toContain('styles/global.css') expect(stderr).toMatch( - /Please move all global CSS imports.*?pages(\/|\\)_app/ + /Please move all first-party global CSS imports.*?pages(\/|\\)_app/ ) expect(stderr).toMatch(/Location:.*pages[\\/]index\.js/) }) diff --git a/test/integration/scss/test/index.test.js b/test/integration/scss/test/index.test.js index 1bfb00abae253..aa0eb49f4ae71 100644 --- a/test/integration/scss/test/index.test.js +++ b/test/integration/scss/test/index.test.js @@ -355,7 +355,7 @@ describe('SCSS Support', () => { expect(stderr).toContain('Failed to compile') expect(stderr).toContain('styles/global.scss') expect(stderr).toMatch( - /Please move all global CSS imports.*?pages(\/|\\)_app/ + /Please move all first-party global CSS imports.*?pages(\/|\\)_app/ ) expect(stderr).toMatch(/Location:.*pages[\\/]index\.js/) }) @@ -376,7 +376,7 @@ describe('SCSS Support', () => { expect(stderr).toContain('Failed to compile') expect(stderr).toContain('styles/global.scss') expect(stderr).toMatch( - /Please move all global CSS imports.*?pages(\/|\\)_app/ + /Please move all first-party global CSS imports.*?pages(\/|\\)_app/ ) expect(stderr).toMatch(/Location:.*pages[\\/]index\.js/) }) From 7cbde57847d13d7ecd34f6210cb850023667dd8d Mon Sep 17 00:00:00 2001 From: JJ Kasper Date: Sat, 24 Jul 2021 22:31:48 -0500 Subject: [PATCH 6/6] update tests --- test/integration/css/test/index.test.js | 2 +- test/integration/scss/test/index.test.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/test/integration/css/test/index.test.js b/test/integration/css/test/index.test.js index eafeba11627db..305f94c5daef2 100644 --- a/test/integration/css/test/index.test.js +++ b/test/integration/css/test/index.test.js @@ -427,7 +427,7 @@ describe('CSS Support', () => { expect(code).not.toBe(0) expect(stderr).toContain('Failed to compile') expect(stderr).toContain('styles/global.css') - expect(stderr).toContain('Please move all global CSS imports') + expect(stderr).toContain('Please move all first-party global CSS imports') expect(stderr).toMatch(/Location:.*pages[\\/]index\.js/) }) }) diff --git a/test/integration/scss/test/index.test.js b/test/integration/scss/test/index.test.js index 5925d0c3d4079..f89ff0580644f 100644 --- a/test/integration/scss/test/index.test.js +++ b/test/integration/scss/test/index.test.js @@ -396,7 +396,7 @@ describe('SCSS Support', () => { expect(code).not.toBe(0) expect(stderr).toContain('Failed to compile') expect(stderr).toContain('styles/global.scss') - expect(stderr).toContain('Please move all global CSS imports') + expect(stderr).toContain('Please move all first-party global CSS imports') expect(stderr).toMatch(/Location:.*pages[\\/]index\.js/) }) })