fix(vite-plugin-angular): correctly implement HMR of component styles

packages/vite-plugin-angular/src/lib/angular-vite-plugin.ts

@@ -14,6 +14,7 @@ import {
   ResolvedConfig,
   Connect,
 } from 'vite';
+import { encapsulateStyle } from '@angular/compiler';
 
 import { createCompilerPlugin } from './compiler-plugin.js';
 import {
@@ -350,15 +351,7 @@ export function angular(options?: PluginOptions): Plugin[] {
 
             return ctx.modules.map((mod) => {
               if (mod.id === ctx.file) {
-                // support Vite 6
-                if ('_clientModule' in mod) {
-                  (mod as any)['_clientModule'].isSelfAccepting = true;
-                }
-
-                return {
-                  ...mod,
-                  isSelfAccepting: true,
-                } as ModuleNode;
+                return markModuleSelfAccepting(mod);
               }
 
               return mod;
@@ -374,7 +367,42 @@ export function angular(options?: PluginOptions): Plugin[] {
           const isDirect = ctx.modules.find(
             (mod) => ctx.file === mod.file && mod.id?.includes('?direct')
           );
-          if (isDirect) {
+          if (pluginOptions.liveReload && isDirect?.id && isDirect.file) {
+            const isComponentStyle =
+              isDirect.type === 'css' && isComponentStyleSheet(isDirect.id);
+            if (isComponentStyle) {
+              const { encapsulation } = getComponentStyleSheetMeta(isDirect.id);
+
+              // Track if the component uses ShadowDOM encapsulation
+              // Shadow DOM components currently require a full reload.
+              // Vite's CSS hot replacement does not support shadow root searching.
+              if (encapsulation !== 'shadow') {
+                ctx.server.ws.send({
+                  type: 'update',
+                  updates: [
+                    {
+                      type: 'css-update',
+                      timestamp: Date.now(),
+                      path: isDirect.id,
+                      acceptedPath: isDirect.file,
+                    },
+                  ],
+                });
+
+                return ctx.modules
+                  .filter((mod) => {
+                    // Component stylesheets will have 2 modules (*.component.scss and *.component.scss?direct&ngcomp=xyz&e=x)
+                    // We remove the module with the query params to prevent vite double logging the stylesheet name "hmr update *.component.scss, *.component.scss?direct&ngcomp=xyz&e=x"
+                    return mod.file !== ctx.file || mod.id !== isDirect.id;
+                  })
+                  .map((mod) => {
+                    if (mod.file === ctx.file) {
+                      return markModuleSelfAccepting(mod);
+                    }
+                    return mod;
+                  }) as ModuleNode[];
+              }
+            }
             return ctx.modules;
           }
 
@@ -407,15 +435,7 @@ export function angular(options?: PluginOptions): Plugin[] {
 
             return ctx.modules.map((mod) => {
               if (mod.id === ctx.file) {
-                // support Vite 6
-                if ('_clientModule' in mod) {
-                  (mod as any)['_clientModule'].isSelfAccepting = true;
-                }
-
-                return {
-                  ...mod,
-                  isSelfAccepting: true,
-                } as ModuleNode;
+                return markModuleSelfAccepting(mod);
               }
 
               return mod;
@@ -497,6 +517,20 @@ export function angular(options?: PluginOptions): Plugin[] {
           return;
         }
 
+        /**
+         * Encapsulate component stylesheets that use emulated encapsulation
+         */
+        if (pluginOptions.liveReload && isComponentStyleSheet(id)) {
+          const { encapsulation, componentId } = getComponentStyleSheetMeta(id);
+          if (encapsulation === 'emulated' && componentId) {
+            const encapsulated = encapsulateStyle(code, componentId);
+            return {
+              code: encapsulated,
+              map: null,
+            };
+          }
+        }
+
         if (TS_EXT_REGEX.test(id)) {
           if (id.includes('.ts?')) {
             // Strip the query string off the ID
@@ -921,3 +955,37 @@ function getDiagnosticsForSourceFile(
     ...angularDiagnostics,
   ];
 }
+
+function markModuleSelfAccepting(mod: ModuleNode): ModuleNode {
+  // support Vite 6
+  if ('_clientModule' in mod) {
+    (mod as any)['_clientModule'].isSelfAccepting = true;
+  }
+
+  return {
+    ...mod,
+    isSelfAccepting: true,
+  } as ModuleNode;
+}
+
+function isComponentStyleSheet(id: string): boolean {
+  return id.includes('ngcomp=');
+}
+
+function getComponentStyleSheetMeta(id: string): {
+  componentId: string;
+  encapsulation: 'emulated' | 'shadow' | 'none';
+} {
+  const params = new URL(id, 'http://localhost').searchParams;
+  const encapsulationMapping = {
+    '0': 'emulated',
+    '2': 'none',
+    '3': 'shadow',
+  };
+  return {
+    componentId: params.get('ngcomp')!,
+    encapsulation: encapsulationMapping[
+      params.get('e') as keyof typeof encapsulationMapping
+    ] as 'emulated' | 'shadow' | 'none',
+  };
+}