Fix global CSS file imports (#38339)

Follow up of #38310 and #38329, this PR adjusts the loader rules to allow importing global CSS files from the app dir.

## Bug

- [ ] Related issues linked using `fixes #number`
- [x] Integration tests added
- [ ] Errors have 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 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.md#adding-examples)

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

@@ -347,6 +347,27 @@ export const css = curry(async function css(
         })
       )
     }
+
+    if (ctx.experimental.appDir) {
+      fns.push(
+        loader({
+          oneOf: [
+            markRemovable({
+              // A global CSS import always has side effects. Webpack will tree
+              // shake the CSS without this option if the issuer claims to have
+              // no side-effects.
+              // See https://github.com/webpack/webpack/issues/6571
+              sideEffects: true,
+              test: regexCssGlobal,
+              issuer: {
+                and: [ctx.rootDirectory, /\.(js|mjs|jsx|ts|tsx)$/],
+              },
+              use: getGlobalCssLoader(ctx, lazyPostCSSInitializer),
+            }),
+          ],
+        })
+      )
+    }
   }
 
   // Throw an error for Global CSS used inside of `node_modules`
@@ -375,6 +396,18 @@ export const css = curry(async function css(
       oneOf: [
         markRemovable({
           test: [regexCssGlobal, regexSassGlobal],
+          issuer: ctx.experimental.appDir
+            ? {
+                // If it's inside the app dir, but not importing from a layout file,
+                // throw an error.
+                or: [
+                  {
+                    and: [ctx.rootDirectory],
+                    not: [/layout(\.client|\.server)?\.(js|mjs|jsx|ts|tsx)$/],
+                  },
+                ],
+              }
+            : undefined,
           use: {
             loader: 'error-loader',
             options: {

test/e2e/app-dir/app/app/client-nested/layout.client.js

@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react'
 
 import styles from './style.module.css'
+import './style.css'
 
 export default function ClientNestedLayout({ children }) {
   const [count, setCount] = useState(0)

test/e2e/app-dir/app/app/client-nested/style.css

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

test/e2e/app-dir/index.test.ts

@@ -297,5 +297,16 @@ describe('views dir', () => {
         )
       ).toBe('rgb(255, 0, 0)')
     })
+
+    it('should support global css inside client layouts', async () => {
+      const browser = await webdriver(next.url, '/client-nested')
+
+      // Should render button in red
+      expect(
+        await browser.eval(
+          `window.getComputedStyle(document.querySelector('button')).color`
+        )
+      ).toBe('rgb(255, 0, 0)')
+    })
   })
 })