Fix global css being marked as side effect free

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;
+}