Document CSS concatenation order matches the import order (#39889)

Given the amount of CSS ordering problems mentioned in the issue queue
(see #16630), it's clear, for most people, that it is NOT obvious that
the order of CSS concatenation matches the order of importing CSS and
modules inside `_app.js`.

We should try to make this fact explicit in the docs. Right now, it's
only implied.


## Documentation checklist

- [x] Make sure the linting passes by running `pnpm lint`
- [x] The examples guidelines are followed from [our contributing
doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)

---------

Co-authored-by: JJ Kasper <jj@jjsweb.site>

docs/02-app/01-building-your-application/04-styling/01-css-modules.mdx

@@ -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>