Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

CSS concatenation order matches the import order #39889

Merged
merged 4 commits into from
Jun 14, 2023
Merged

CSS concatenation order matches the import order #39889

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a015dc7
CSS concatenation order matches the import order
JohnAlbin Aug 24, 2022
8bcf077
Merge branch 'canary' into patch-1
ijjk Jun 14, 2023
591539b
lint fix
ijjk Jun 14, 2023
308095f
Merge branch 'canary' into patch-1
kodiakhq[bot] Jun 14, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
17 changes: 16 additions & 1 deletion docs/02-app/01-building-your-application/04-styling/01-css-modules.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -183,7 +183,22 @@ Due to the global nature of stylesheets, and to avoid conflicts, you may **only

In development, expressing stylesheets this way allows your styles to be hot reloaded as you edit them—meaning you can keep application state.

In production, all CSS files will be automatically concatenated into a single minified `.css` file.
In production, all CSS files will be automatically concatenated into a single minified `.css` file. The order that the CSS is concatenated will match the order the CSS is imported into the `_app.js` file. Pay special attention to imported JS modules that include their own CSS; the JS module's CSS will be concatenated following the same ordering rules as imported CSS files. For example:

```jsx
import '../styles.css'
// The CSS in ErrorBoundary depends on the global CSS in styles.css,
// so we import it after styles.css.
import ErrorBoundary from '../components/ErrorBoundary'

export default function MyApp({ Component, pageProps }) {
return (
<ErrorBoundary>
<Component {...pageProps} />
</ErrorBoundary>
)
}
```

</PagesOnly>

Expand Down