Fix ASL bundling for dynamic css

packages/next-swc/crates/next-api/src/app.rs

@@ -283,6 +283,10 @@ impl AppProject {
                 ))),
             ),
             ("next-ssr".to_string(), Vc::upcast(self.ssr_transition())),
+            (
+                "next-shared".to_string(),
+                Vc::upcast(self.shared_transition()),
+            ),
         ]
         .into_iter()
         .collect();
@@ -315,6 +319,10 @@ impl AppProject {
                 "next-ssr".to_string(),
                 Vc::upcast(self.edge_ssr_transition()),
             ),
+            (
+                "next-shared".to_string(),
+                Vc::upcast(self.edge_shared_transition()),
+            ),
         ]
         .into_iter()
         .collect();
@@ -344,6 +352,10 @@ impl AppProject {
                 ))),
             ),
             ("next-ssr".to_string(), Vc::upcast(self.ssr_transition())),
+            (
+                "next-shared".to_string(),
+                Vc::upcast(self.shared_transition()),
+            ),
         ]
         .into_iter()
         .collect();
@@ -359,8 +371,30 @@ impl AppProject {
 
     #[turbo_tasks::function]
     fn edge_route_module_context(self: Vc<Self>) -> Vc<ModuleAssetContext> {
+        let transitions = [
+            (
+                ECMASCRIPT_CLIENT_TRANSITION_NAME.to_string(),
+                Vc::upcast(NextEcmascriptClientReferenceTransition::new(
+                    Vc::upcast(self.client_transition()),
+                    self.edge_ssr_transition(),
+                )),
+            ),
+            (
+                "next-dynamic".to_string(),
+                Vc::upcast(NextDynamicTransition::new(Vc::upcast(
+                    self.client_transition(),
+                ))),
+            ),
+            ("next-ssr".to_string(), Vc::upcast(self.ssr_transition())),
+            (
+                "next-shared".to_string(),
+                Vc::upcast(self.edge_shared_transition()),
+            ),
+        ]
+        .into_iter()
+        .collect();
         ModuleAssetContext::new(
-            Default::default(),
+            Vc::cell(transitions),
             self.project().edge_compile_time_info(),
             self.edge_route_module_options_context(),
             self.edge_route_resolve_options_context(),
@@ -435,6 +469,16 @@ impl AppProject {
         )
     }
 
+    #[turbo_tasks::function]
+    fn shared_transition(self: Vc<Self>) -> Vc<ContextTransition> {
+        ContextTransition::new(
+            self.project().server_compile_time_info(),
+            self.ssr_module_options_context(),
+            self.ssr_resolve_options_context(),
+            Vc::cell("app-shared".to_string()),
+        )
+    }
+
     #[turbo_tasks::function]
     fn edge_ssr_transition(self: Vc<Self>) -> Vc<ContextTransition> {
         ContextTransition::new(
@@ -445,6 +489,16 @@ impl AppProject {
         )
     }
 
+    #[turbo_tasks::function]
+    fn edge_shared_transition(self: Vc<Self>) -> Vc<ContextTransition> {
+        ContextTransition::new(
+            self.project().edge_compile_time_info(),
+            self.edge_ssr_module_options_context(),
+            self.edge_ssr_resolve_options_context(),
+            Vc::cell("app-edge-shared".to_string()),
+        )
+    }
+
     #[turbo_tasks::function]
     async fn runtime_entries(self: Vc<Self>) -> Result<Vc<RuntimeEntries>> {
         Ok(get_server_runtime_entries(

packages/next/src/build/webpack-config.ts

@@ -1383,15 +1383,14 @@ export default async function getBaseWebpackConfig(
                 // Alias react for switching between default set and share subset.
                 oneOf: [
                   {
-                    exclude: asyncStoragesRegex,
                     issuerLayer: isWebpackServerOnlyLayer,
                     test: {
                       // Resolve it if it is a source code file, and it has NOT been
                       // opted out of bundling.
                       and: [
                         codeCondition.test,
                         {
-                          not: [optOutBundlingPackageRegex],
+                          not: [optOutBundlingPackageRegex, asyncStoragesRegex],
                         },
                       ],
                     },
@@ -1499,6 +1498,7 @@ export default async function getBaseWebpackConfig(
                   {
                     test: codeCondition.test,
                     issuerLayer: WEBPACK_LAYERS.serverSideRendering,
+                    exclude: asyncStoragesRegex,
                     use: appSSRLayerLoaders,
                     resolve: {
                       mainFields: getMainField(compilerType, true),

packages/next/src/client/components/action-async-storage-instance.ts

@@ -0,0 +1,4 @@
+import type { ActionAsyncStorage } from './action-async-storage.external'
+import { createAsyncLocalStorage } from './async-local-storage'
+
+export const actionAsyncStorage: ActionAsyncStorage = createAsyncLocalStorage()

packages/next/src/client/components/action-async-storage.external.ts

@@ -1,11 +1,14 @@
 import type { AsyncLocalStorage } from 'async_hooks'
-import { createAsyncLocalStorage } from './async-local-storage'
 
+// Share the instance module in the next-shared layer
+// eslint-disable-next-line @typescript-eslint/no-unused-expressions
+;('TURBOPACK { transition: next-shared }')
+import { actionAsyncStorage } from './action-async-storage-instance'
 export interface ActionStore {
   readonly isAction?: boolean
   readonly isAppRoute?: boolean
 }
 
 export type ActionAsyncStorage = AsyncLocalStorage<ActionStore>
 
-export const actionAsyncStorage: ActionAsyncStorage = createAsyncLocalStorage()
+export { actionAsyncStorage }

packages/next/src/client/components/request-async-storage-instance.ts

@@ -0,0 +1,5 @@
+import { createAsyncLocalStorage } from './async-local-storage'
+import type { RequestAsyncStorage } from './request-async-storage.external'
+
+export const requestAsyncStorage: RequestAsyncStorage =
+  createAsyncLocalStorage()

packages/next/src/client/components/request-async-storage.external.ts

@@ -4,7 +4,10 @@ import type { ResponseCookies } from '../../server/web/spec-extension/cookies'
 import type { ReadonlyHeaders } from '../../server/web/spec-extension/adapters/headers'
 import type { ReadonlyRequestCookies } from '../../server/web/spec-extension/adapters/request-cookies'
 
-import { createAsyncLocalStorage } from './async-local-storage'
+// Share the instance module in the next-shared layer
+// eslint-disable-next-line @typescript-eslint/no-unused-expressions
+;('TURBOPACK { transition: next-shared }')
+import { requestAsyncStorage } from './request-async-storage-instance'
 import type { DeepReadonly } from '../../shared/lib/deep-readonly'
 
 export interface RequestStore {
@@ -20,8 +23,7 @@ export interface RequestStore {
 
 export type RequestAsyncStorage = AsyncLocalStorage<RequestStore>
 
-export const requestAsyncStorage: RequestAsyncStorage =
-  createAsyncLocalStorage()
+export { requestAsyncStorage }
 
 export function getExpectedRequestStore(callingExpression: string) {
   const store = requestAsyncStorage.getStore()

packages/next/src/client/components/static-generation-async-storage-instance.ts

@@ -0,0 +1,5 @@
+import type { StaticGenerationAsyncStorage } from './static-generation-async-storage.external'
+import { createAsyncLocalStorage } from './async-local-storage'
+
+export const staticGenerationAsyncStorage: StaticGenerationAsyncStorage =
+  createAsyncLocalStorage()

packages/next/src/client/components/static-generation-async-storage.external.ts

@@ -5,7 +5,10 @@ import type { FetchMetrics } from '../../server/base-http'
 import type { Revalidate } from '../../server/lib/revalidate'
 import type { PrerenderState } from '../../server/app-render/dynamic-rendering'
 
-import { createAsyncLocalStorage } from './async-local-storage'
+// Share the instance module in the next-shared layer
+// eslint-disable-next-line @typescript-eslint/no-unused-expressions
+;('TURBOPACK { transition: next-shared }')
+import { staticGenerationAsyncStorage } from './static-generation-async-storage-instance'
 
 export interface StaticGenerationStore {
   readonly isStaticGeneration: boolean
@@ -53,5 +56,4 @@ export interface StaticGenerationStore {
 export type StaticGenerationAsyncStorage =
   AsyncLocalStorage<StaticGenerationStore>
 
-export const staticGenerationAsyncStorage: StaticGenerationAsyncStorage =
-  createAsyncLocalStorage()
+export { staticGenerationAsyncStorage }

packages/next/src/lib/constants.ts

@@ -170,7 +170,6 @@ const WEBPACK_LAYERS = {
     clientOnly: [
       WEBPACK_LAYERS_NAMES.serverSideRendering,
       WEBPACK_LAYERS_NAMES.appPagesBrowser,
-      WEBPACK_LAYERS_NAMES.shared,
     ],
     nonClientServerTarget: [
       // middleware and pages api

packages/next/src/shared/lib/lazy-dynamic/preload-css.tsx

@@ -1,15 +1,14 @@
 'use client'
 
+import { getExpectedRequestStore } from '../../../client/components/request-async-storage.external'
+
 export function PreloadCss({ moduleIds }: { moduleIds: string[] | undefined }) {
   // Early return in client compilation and only load requestStore on server side
   if (typeof window !== 'undefined') {
     return null
   }
-  const {
-    getExpectedRequestStore,
-  } = require('../../../client/components/request-async-storage.external')
-  const requestStore = getExpectedRequestStore()
 
+  const requestStore = getExpectedRequestStore('next/dynamic css')
   const allFiles = []
 
   // Search the current dynamic call unique key id in react loadable manifest,

test/e2e/app-dir/dynamic-css/app/ssr/edge/page.js

@@ -0,0 +1,3 @@
+export { default } from '../page'
+
+export const runtime = 'edge'

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

@@ -31,6 +31,23 @@ createNextDescribe(
       })
     })
 
+    it('should only apply corresponding css for page loaded in edge runtime', async () => {
+      const browser = await next.browser('/ssr/edge')
+      await retry(async () => {
+        expect(
+          await browser.eval(
+            `window.getComputedStyle(document.querySelector('.text')).color`
+          )
+        ).toBe('rgb(255, 0, 0)')
+        // Default border width, which is not effected by bar.css that is not loaded in /ssr
+        expect(
+          await browser.eval(
+            `window.getComputedStyle(document.querySelector('.text')).borderWidth`
+          )
+        ).toBe('0px')
+      })
+    })
+
     it('should only apply corresponding css for page loaded that /another', async () => {
       const browser = await next.browser('/another')
       await retry(async () => {
@@ -47,5 +64,10 @@ createNextDescribe(
         ).toBe('1px')
       })
     })
+
+    it('should not throw with accessing to ALS in preload css', async () => {
+      const output = next.cliOutput
+      expect(output).not.toContain('was called outside a request scope')
+    })
   }
 )