Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 74b159c

Browse files
brijendravarmabrijendravarma
authored
Updated the Error message describing the alternative and added styles… (vercel#14652)
The error message indicates better alternatives and added styles.css sample snippet for good visibility. ![Global_error_msg](https://user-images.githubusercontent.com/38159218/85950309-ac3bc100-b979-11ea-9a8d-4a356cb8007c.JPG) ![CSS-Global](https://user-images.githubusercontent.com/38159218/85950319-b2ca3880-b979-11ea-829a-24335fcfc93d.JPG)
1 parent 7fe8a00 commit 74b159c

File tree

4 files changed

+23
-8
lines changed

4 files changed

+23
-8
lines changed

‎errors/css-global.md

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,27 @@ Global CSS cannot be used in files other than your [Custom `<App>`](https://next
88

99
#### Possible Ways to Fix It
1010

11-
Relocate all Global CSS imports to your [`pages/_app.js` file](https://nextjs.org/docs/advanced-features/custom-app).
11+
To avoid conflicts, relocate all first-party Global CSS imports to your [`pages/_app.js` file](https://nextjs.org/docs/advanced-features/custom-app).
1212

1313
Or, [update your component to use local CSS (Component-Level CSS) via CSS Modules](https://nextjs.org/docs/basic-features/built-in-css-support#adding-component-level-css). This is the preferred approach.
1414

1515
#### Example
1616

17+
Consider the stylesheet named [`styles.css`](https://nextjs.org/docs/basic-features/built-in-css-support#adding-a-global-stylesheet)
18+
19+
```jsx
20+
//styles.css
21+
body {
22+
font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', 'Helvetica',
23+
'Arial', sans-serif;
24+
padding: 20px 20px 60px;
25+
max-width: 680px;
26+
margin: 0 auto;
27+
}
28+
```
29+
30+
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).
31+
1732
```jsx
1833
// pages/_app.js
1934
import '../styles.css'

‎packages/next/build/webpack/config/blocks/css/messages.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ export function getGlobalImportError(file: string | null) {
55
'cannot'
66
)} be imported from files other than your ${chalk.bold(
77
'Custom <App>'
8-
)}. Please move all global CSS imports to ${chalk.cyan(
8+
)}. Due to the Global nature of stylesheets, and to avoid conflicts, Please move all first-party global CSS imports to ${chalk.cyan(
99
file ? file : 'pages/_app.js'
1010
)}. Or convert the import to Component-Level CSS (CSS Modules).\nRead more: https://nextjs.org/docs/messages/css-global`
1111
}

‎test/integration/css/test/index.test.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -357,7 +357,7 @@ describe('CSS Support', () => {
357357
expect(stderr).toContain('Failed to compile')
358358
expect(stderr).toContain('styles/global.css')
359359
expect(stderr).toMatch(
360-
/Please move all global CSS imports.*?pages(\/|\\)_app/
360+
/Please move all first-party global CSS imports.*?pages(\/|\\)_app/
361361
)
362362
expect(stderr).toMatch(/Location:.*pages[\\/]index\.js/)
363363
})
@@ -407,7 +407,7 @@ describe('CSS Support', () => {
407407
expect(stderr).toContain('Failed to compile')
408408
expect(stderr).toContain('styles/global.css')
409409
expect(stderr).toMatch(
410-
/Please move all global CSS imports.*?pages(\/|\\)_app/
410+
/Please move all first-party global CSS imports.*?pages(\/|\\)_app/
411411
)
412412
expect(stderr).toMatch(/Location:.*pages[\\/]index\.js/)
413413
})
@@ -427,7 +427,7 @@ describe('CSS Support', () => {
427427
expect(code).not.toBe(0)
428428
expect(stderr).toContain('Failed to compile')
429429
expect(stderr).toContain('styles/global.css')
430-
expect(stderr).toContain('Please move all global CSS imports')
430+
expect(stderr).toContain('Please move all first-party global CSS imports')
431431
expect(stderr).toMatch(/Location:.*pages[\\/]index\.js/)
432432
})
433433
})

‎test/integration/scss/test/index.test.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -355,7 +355,7 @@ describe('SCSS Support', () => {
355355
expect(stderr).toContain('Failed to compile')
356356
expect(stderr).toContain('styles/global.scss')
357357
expect(stderr).toMatch(
358-
/Please move all global CSS imports.*?pages(\/|\\)_app/
358+
/Please move all first-party global CSS imports.*?pages(\/|\\)_app/
359359
)
360360
expect(stderr).toMatch(/Location:.*pages[\\/]index\.js/)
361361
})
@@ -376,7 +376,7 @@ describe('SCSS Support', () => {
376376
expect(stderr).toContain('Failed to compile')
377377
expect(stderr).toContain('styles/global.scss')
378378
expect(stderr).toMatch(
379-
/Please move all global CSS imports.*?pages(\/|\\)_app/
379+
/Please move all first-party global CSS imports.*?pages(\/|\\)_app/
380380
)
381381
expect(stderr).toMatch(/Location:.*pages[\\/]index\.js/)
382382
})
@@ -396,7 +396,7 @@ describe('SCSS Support', () => {
396396
expect(code).not.toBe(0)
397397
expect(stderr).toContain('Failed to compile')
398398
expect(stderr).toContain('styles/global.scss')
399-
expect(stderr).toContain('Please move all global CSS imports')
399+
expect(stderr).toContain('Please move all first-party global CSS imports')
400400
expect(stderr).toMatch(/Location:.*pages[\\/]index\.js/)
401401
})
402402
})

0 commit comments

Comments
 (0)