Fix global css being marked as side effect free (vercel#41481)

It’s possible that global CSS imports, that come from node_modules, are
marked as side effect free because of possible `sideEffects: false` in
the external package's package.json. In that case, we still need to
handle global CSS imports as side effects on the server because we need
to collect them and avoid tree-shaking for these modules.

You can take a look at the test case to see what exactly happened.

## Bug

- [ ] Related issues linked using `fixes #number`
- [x] 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)

packages/next/build/webpack/config/blocks/css/index.ts

@@ -427,6 +427,8 @@ export const css = curry(async function css(
         loader({
           oneOf: [
             markRemovable({
+              // CSS imports have side effects, even on the server side.
+              sideEffects: true,
               test: [regexCssGlobal, regexSassGlobal],
               use: require.resolve('next/dist/compiled/ignore-loader'),
             }),

test/e2e/app-dir/rsc-external.test.ts

@@ -110,4 +110,13 @@ describe('app dir - rsc external dependency', () => {
       }
     )
   })
+
+  it('should correctly collect global css imports and mark them as side effects', async () => {
+    await fetchViaHTTP(next.url, '/css/a').then(async (response) => {
+      const result = await resolveStreamResponse(response)
+
+      // It should include the global CSS import
+      expect(result).toMatch(/\.css/)
+    })
+  })
 })

test/e2e/app-dir/rsc-external/app/css/[...slug]/page.js

@@ -0,0 +1,5 @@
+import 'global-css/style.css'
+
+export default function Page() {
+  return <div>hello</div>
+}

test/e2e/app-dir/rsc-external/node_modules_bak/global-css/index.js

@@ -0,0 +1 @@
+import './style.css'

test/e2e/app-dir/rsc-external/node_modules_bak/global-css/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "global-css",
+  "type": "module",
+  "sideEffects": false,
+  "exports": {
+    ".": "./index.js",
+    "./style.css": "./style.css",
+    "./package.json": "./package.json"
+  }
+}

test/e2e/app-dir/rsc-external/node_modules_bak/global-css/style.css

@@ -0,0 +1,3 @@
+body {
+  color: red;
+}