use postcss transforms consistently also on server side (#57434)

### What?

Server side should also apply postcss transforms in node_modules

### Why?

### How?


Closes WEB-1863

packages/next-swc/crates/napi/src/next_api/endpoint.rs

@@ -114,6 +114,7 @@ pub async fn endpoint_write_to_disk(
 #[napi(ts_return_type = "{ __napiType: \"RootTask\" }")]
 pub fn endpoint_server_changed_subscribe(
     #[napi(ts_arg_type = "{ __napiType: \"Endpoint\" }")] endpoint: External<ExternalEndpoint>,
+    issues: bool,
     func: JsFunction,
 ) -> napi::Result<External<RootTask>> {
     let turbo_tasks = endpoint.turbo_tasks().clone();
@@ -124,9 +125,13 @@ pub fn endpoint_server_changed_subscribe(
         move || async move {
             let changed = endpoint.server_changed();
             changed.strongly_consistent().await?;
-            let issues = get_issues(changed).await?;
-            let diags = get_diagnostics(changed).await?;
-            Ok((issues, diags))
+            if issues {
+                let issues = get_issues(changed).await?;
+                let diags = get_diagnostics(changed).await?;
+                Ok((issues, diags))
+            } else {
+                Ok((vec![], vec![]))
+            }
         },
         |ctx| {
             let (issues, diags) = ctx.value;

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

@@ -812,22 +812,23 @@ impl Project {
     #[turbo_tasks::function]
     pub fn server_changed(self: Vc<Self>, roots: Vc<OutputAssets>) -> Vc<Completion> {
         let path = self.node_root();
-        any_output_changed(roots, path)
+        any_output_changed(roots, path, true)
     }
 
     /// Completion when client side changes are detected in output assets
     /// referenced from the roots
     #[turbo_tasks::function]
     pub fn client_changed(self: Vc<Self>, roots: Vc<OutputAssets>) -> Vc<Completion> {
         let path = self.client_root();
-        any_output_changed(roots, path)
+        any_output_changed(roots, path, false)
     }
 }
 
 #[turbo_tasks::function]
 async fn any_output_changed(
     roots: Vc<OutputAssets>,
     path: Vc<FileSystemPath>,
+    server: bool,
 ) -> Result<Vc<Completion>> {
     let path = &path.await?;
     let completions = AdjacencyMap::new()
@@ -839,7 +840,10 @@ async fn any_output_changed(
         .into_reverse_topological()
         .map(|m| async move {
             let asset_path = m.ident().path().await?;
-            if !asset_path.path.ends_with(".map") && asset_path.is_inside_ref(path) {
+            if !asset_path.path.ends_with(".map")
+                && (!server || !asset_path.path.ends_with(".css"))
+                && asset_path.is_inside_ref(path)
+            {
                 Ok(Some(content_changed(Vc::upcast(m))))
             } else {
                 Ok(None)

packages/next-swc/crates/next-core/src/next_client/context.rs

@@ -279,8 +279,8 @@ pub async fn get_client_module_options_context(
         // we try resolve it once at the root and pass down a context to all
         // the modules.
         enable_jsx: Some(jsx_runtime_options),
-        enable_postcss_transform: postcss_transform_options,
         enable_webpack_loaders,
+        enable_postcss_transform: postcss_transform_options,
         enable_typescript_transform: Some(tsconfig),
         enable_mdx_rs,
         decorators: Some(decorators_options),

packages/next-swc/crates/next-core/src/next_server/context.rs

@@ -248,7 +248,7 @@ pub async fn get_server_module_options_context(
 
     let foreign_code_context_condition =
         foreign_code_context_condition(next_config, project_path).await?;
-    let enable_postcss_transform = Some(PostCssTransformOptions {
+    let postcss_transform_options = Some(PostCssTransformOptions {
         postcss_package: Some(get_postcss_package_mapping(project_path)),
         ..Default::default()
     });
@@ -351,6 +351,8 @@ pub async fn get_server_module_options_context(
             let foreign_code_module_options_context = ModuleOptionsContext {
                 custom_rules: internal_custom_rules.clone(),
                 enable_webpack_loaders: foreign_webpack_loaders,
+                // NOTE(WEB-1016) PostCSS transforms should also apply to foreign code.
+                enable_postcss_transform: postcss_transform_options.clone(),
                 ..module_options_context.clone()
             };
 
@@ -363,8 +365,8 @@ pub async fn get_server_module_options_context(
 
             ModuleOptionsContext {
                 enable_jsx: Some(jsx_runtime_options),
-                enable_postcss_transform,
                 enable_webpack_loaders,
+                enable_postcss_transform: postcss_transform_options,
                 enable_typescript_transform: Some(tsconfig),
                 enable_mdx_rs,
                 decorators: Some(decorators_options),
@@ -416,6 +418,8 @@ pub async fn get_server_module_options_context(
             let foreign_code_module_options_context = ModuleOptionsContext {
                 custom_rules: internal_custom_rules.clone(),
                 enable_webpack_loaders: foreign_webpack_loaders,
+                // NOTE(WEB-1016) PostCSS transforms should also apply to foreign code.
+                enable_postcss_transform: postcss_transform_options.clone(),
                 ..module_options_context.clone()
             };
             let internal_module_options_context = ModuleOptionsContext {
@@ -436,8 +440,8 @@ pub async fn get_server_module_options_context(
 
             ModuleOptionsContext {
                 enable_jsx: Some(jsx_runtime_options),
-                enable_postcss_transform,
                 enable_webpack_loaders,
+                enable_postcss_transform: postcss_transform_options,
                 enable_typescript_transform: Some(tsconfig),
                 enable_mdx_rs,
                 decorators: Some(decorators_options),
@@ -498,6 +502,8 @@ pub async fn get_server_module_options_context(
             let foreign_code_module_options_context = ModuleOptionsContext {
                 custom_rules: internal_custom_rules.clone(),
                 enable_webpack_loaders: foreign_webpack_loaders,
+                // NOTE(WEB-1016) PostCSS transforms should also apply to foreign code.
+                enable_postcss_transform: postcss_transform_options.clone(),
                 ..module_options_context.clone()
             };
             let internal_module_options_context = ModuleOptionsContext {
@@ -507,8 +513,8 @@ pub async fn get_server_module_options_context(
             };
             ModuleOptionsContext {
                 enable_jsx: Some(jsx_runtime_options),
-                enable_postcss_transform,
                 enable_webpack_loaders,
+                enable_postcss_transform: postcss_transform_options,
                 enable_typescript_transform: Some(tsconfig),
                 enable_mdx_rs,
                 decorators: Some(decorators_options),
@@ -538,8 +544,8 @@ pub async fn get_server_module_options_context(
                 ..module_options_context.clone()
             };
             ModuleOptionsContext {
-                enable_postcss_transform,
                 enable_webpack_loaders,
+                enable_postcss_transform: postcss_transform_options,
                 enable_typescript_transform: Some(tsconfig),
                 enable_mdx_rs,
                 decorators: Some(decorators_options),
@@ -587,8 +593,8 @@ pub async fn get_server_module_options_context(
             };
             ModuleOptionsContext {
                 enable_jsx: Some(jsx_runtime_options),
-                enable_postcss_transform,
                 enable_webpack_loaders,
+                enable_postcss_transform: postcss_transform_options,
                 enable_typescript_transform: Some(tsconfig),
                 enable_mdx_rs,
                 decorators: Some(decorators_options),

packages/next/src/build/swc/index.ts

@@ -585,7 +585,9 @@ export interface Endpoint {
    * After serverChanged() has been awaited it will listen to changes.
    * The async iterator will yield for each change.
    */
-  serverChanged(): Promise<AsyncIterableIterator<TurbopackResult>>
+  serverChanged(
+    includeIssues: boolean
+  ): Promise<AsyncIterableIterator<TurbopackResult>>
 }
 
 interface EndpointConfig {
@@ -947,12 +949,15 @@ function bindingToApi(binding: any, _wasm: boolean) {
       return clientSubscription
     }
 
-    async serverChanged(): Promise<AsyncIterableIterator<TurbopackResult<{}>>> {
+    async serverChanged(
+      includeIssues: boolean
+    ): Promise<AsyncIterableIterator<TurbopackResult<{}>>> {
       const serverSubscription = subscribe<TurbopackResult>(
         false,
         async (callback) =>
           binding.endpointServerChangedSubscribe(
             await this._nativeEndpoint,
+            includeIssues,
             callback
           )
       )

packages/next/src/server/lib/router-utils/setup-dev-bundler.ts

@@ -634,6 +634,7 @@ async function startWatcher(opts: SetupOpts) {
     async function changeSubscription(
       page: string,
       type: 'client' | 'server',
+      includeIssues: boolean,
       endpoint: Endpoint | undefined,
       makePayload: (
         page: string,
@@ -643,7 +644,7 @@ async function startWatcher(opts: SetupOpts) {
       const key = `${page} (${type})`
       if (!endpoint || changeSubscriptions.has(key)) return
 
-      const changedPromise = endpoint[`${type}Changed`]()
+      const changedPromise = endpoint[`${type}Changed`](includeIssues)
       changeSubscriptions.set(key, changedPromise)
       const changed = await changedPromise
 
@@ -1105,6 +1106,7 @@ async function startWatcher(opts: SetupOpts) {
             changeSubscription(
               'middleware',
               'server',
+              false,
               middleware.endpoint,
               async () => {
                 const finishBuilding = startBuilding('middleware', true)
@@ -1327,6 +1329,7 @@ async function startWatcher(opts: SetupOpts) {
               changeSubscription(
                 '_document',
                 'server',
+                false,
                 globalEntries.document,
                 () => {
                   return { action: HMR_ACTIONS_SENT_TO_BROWSER.RELOAD_PAGE }
@@ -1425,6 +1428,7 @@ async function startWatcher(opts: SetupOpts) {
                   changeSubscription(
                     '_document',
                     'server',
+                    false,
                     globalEntries.document,
                     () => {
                       return { action: HMR_ACTIONS_SENT_TO_BROWSER.RELOAD_PAGE }
@@ -1461,19 +1465,27 @@ async function startWatcher(opts: SetupOpts) {
                 changeSubscription(
                   page,
                   'server',
+                  false,
                   route.dataEndpoint,
                   (pageName) => {
+                    console.log('server change', pageName)
                     return {
                       event: HMR_ACTIONS_SENT_TO_BROWSER.SERVER_ONLY_CHANGES,
                       pages: [pageName],
                     }
                   }
                 )
-                changeSubscription(page, 'client', route.htmlEndpoint, () => {
-                  return {
-                    event: HMR_ACTIONS_SENT_TO_BROWSER.CLIENT_CHANGES,
+                changeSubscription(
+                  page,
+                  'client',
+                  false,
+                  route.htmlEndpoint,
+                  () => {
+                    return {
+                      event: HMR_ACTIONS_SENT_TO_BROWSER.CLIENT_CHANGES,
+                    }
                   }
-                })
+                )
               }
 
               break
@@ -1517,6 +1529,7 @@ async function startWatcher(opts: SetupOpts) {
               changeSubscription(
                 page,
                 'server',
+                true,
                 route.rscEndpoint,
                 (_page, change) => {
                   if (

test/development/basic/next-rs-api.test.ts

@@ -439,12 +439,16 @@ describe('next.rs api', () => {
         switch (route.type) {
           case 'page': {
             await route.htmlEndpoint.writeToDisk()
-            serverSideSubscription = await route.dataEndpoint.serverChanged()
+            serverSideSubscription = await route.dataEndpoint.serverChanged(
+              false
+            )
             break
           }
           case 'app-page': {
             await route.htmlEndpoint.writeToDisk()
-            serverSideSubscription = await route.rscEndpoint.serverChanged()
+            serverSideSubscription = await route.rscEndpoint.serverChanged(
+              false
+            )
             break
           }
           default: {