fix(@angular/build): fix tailwind css update on template hmr change

When adding tailwind classes to a template, the builder notifies vite with a ComponentUpdate which reloads the template on the client with the new classes. However, if the global styles.css from the build output was changed due to a new class being added there. The client won't be served that new styles.css- until a Full Update or rebuild occurs.
This commit is primarily a workaround until better support can be added for this scenario.

Author: jmerro-c3d

packages/angular/build/src/builders/application/build-action.ts

@@ -223,14 +223,25 @@ async function emitOutputResult(
   }
 
   // Template updates only exist if no other changes have occurred
+  // To support Tailwind CSS the global styles.css build output is included in the update so it can be checked for changes
+  // as the file watcher is only capable of detecting changes to the raw styles.css file.
   if (templateUpdates?.size) {
+    const globalStyles = outputFiles.find((f) => f.path === 'styles.css');
     const updateResult: ComponentUpdateResult = {
       kind: ResultKind.ComponentUpdate,
       updates: Array.from(templateUpdates).map(([id, content]) => ({
         type: 'template',
         id,
         content,
       })),
+      globalStyles: globalStyles
+        ? {
+            origin: 'memory',
+            hash: globalStyles.hash,
+            type: globalStyles.type,
+            contents: globalStyles.contents,
+          }
+        : undefined,
     };
 
     return updateResult;

packages/angular/build/src/builders/application/results.ts

@@ -73,4 +73,5 @@ export interface ComponentUpdateResult extends BaseResult {
     type: 'style' | 'template';
     content: string;
   }[];
+  globalStyles?: MemoryFile;
 }

packages/angular/build/src/builders/dev-server/vite-server.ts

@@ -27,7 +27,7 @@ import { EsbuildLoaderOption, getDepOptimizationConfig } from '../../tools/vite/
 import { loadProxyConfiguration, normalizeSourceMaps } from '../../utils';
 import { useComponentStyleHmr, useComponentTemplateHmr } from '../../utils/environment-options';
 import { loadEsmModule } from '../../utils/load-esm';
-import { Result, ResultFile, ResultKind } from '../application/results';
+import { MemoryFile, Result, ResultFile, ResultKind } from '../application/results';
 import {
   type ApplicationBuilderInternalOptions,
   BuildOutputFileType,
@@ -265,6 +265,11 @@ export async function* serveWithVite(
             });
           }
         }
+
+        if (result.globalStyles) {
+          updateGlobalStyles(result.globalStyles, generatedFiles, server);
+        }
+
         context.logger.info('Component update sent to client(s).');
         continue;
       default:
@@ -611,6 +616,37 @@ function analyzeResultFiles(
   }
 }
 
+function updateGlobalStyles(
+  file: MemoryFile,
+  generatedFiles: Map<string, OutputFileRecord>,
+  server: ViteDevServer,
+) {
+  const stylesUrl = '/styles.css';
+  const styleHash = generatedFiles.get(stylesUrl);
+  if (file.hash !== styleHash?.hash) {
+    generatedFiles.set(stylesUrl, {
+      contents: file.contents,
+      size: file.contents.byteLength,
+      hash: file.hash,
+      updated: true,
+      type: file.type,
+      servable: true,
+    });
+    const timestamp = Date.now();
+    server.ws.send({
+      type: 'update',
+      updates: [
+        {
+          type: 'css-update' as const,
+          timestamp,
+          path: stylesUrl,
+          acceptedPath: stylesUrl,
+        },
+      ],
+    });
+  }
+}
+
 export async function setupServer(
   serverOptions: NormalizedDevServerOptions,
   outputFiles: Map<string, OutputFileRecord>,