fix(vite-plugin-angular): improve stylesheet registry compatibility with Tailwind (#2326)

Author: benpsnyder

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

@@ -1223,6 +1223,17 @@ export function angular(options?: PluginOptions): Plugin[] {
         // Map angular external styleUrls to the source file
         if (isComponentStyleSheet(id)) {
           const filename = getFilenameFromPath(id);
+          const search = new URL(id, 'http://localhost').search;
+          const servedSourcePath =
+            stylesheetRegistry?.getServedSourcePath(filename);
+
+          if (servedSourcePath) {
+            debugStylesV('resolveId: mapped served stylesheet to source', {
+              filename,
+              resolvedPath: servedSourcePath,
+            });
+            return servedSourcePath + search;
+          }
 
           if (stylesheetRegistry?.hasServed(filename)) {
             debugStylesV('resolveId: kept preprocessed ID', { filename });
@@ -1286,13 +1297,21 @@ export function angular(options?: PluginOptions): Plugin[] {
                 stylesheetRegistry?.resolveExternalSource(filename) ??
                 stylesheetRegistry?.resolveExternalSource(
                   filename.replace(/^\//, ''),
+                ) ??
+                stylesheetRegistry?.getServedSourcePath(filename) ??
+                stylesheetRegistry?.getServedSourcePath(
+                  filename.replace(/^\//, ''),
                 ),
               trackedRequestIds:
                 stylesheetRegistry?.getRequestIdsForSource(
                   stylesheetRegistry?.resolveExternalSource(filename) ??
                     stylesheetRegistry?.resolveExternalSource(
                       filename.replace(/^\//, ''),
                     ) ??
+                    stylesheetRegistry?.getServedSourcePath(filename) ??
+                    stylesheetRegistry?.getServedSourcePath(
+                      filename.replace(/^\//, ''),
+                    ) ??
                     '',
                 ) ?? [],
             });
@@ -2053,7 +2072,9 @@ export function isModuleForChangedResource(
   const requestPath = getFilenameFromPath(mod.id);
   const sourcePath =
     stylesheetRegistry?.resolveExternalSource(requestPath) ??
-    stylesheetRegistry?.resolveExternalSource(requestPath.replace(/^\//, ''));
+    stylesheetRegistry?.resolveExternalSource(requestPath.replace(/^\//, '')) ??
+    stylesheetRegistry?.getServedSourcePath(requestPath) ??
+    stylesheetRegistry?.getServedSourcePath(requestPath.replace(/^\//, ''));
 
   return (
     normalizePath((sourcePath ?? '').split('?')[0]) === normalizedChangedFile
@@ -2102,6 +2123,10 @@ function diagnoseComponentStylesheetPipeline(
     ? (stylesheetRegistry?.resolveExternalSource(directRequestPath) ??
       stylesheetRegistry?.resolveExternalSource(
         directRequestPath.replace(/^\//, ''),
+      ) ??
+      stylesheetRegistry?.getServedSourcePath(directRequestPath) ??
+      stylesheetRegistry?.getServedSourcePath(
+        directRequestPath.replace(/^\//, ''),
       ))
     : normalizedFile;
   const registryCode = directRequestPath
@@ -2245,7 +2270,11 @@ export async function findComponentStylesheetWrapperModules(
     : undefined;
   const sourcePath = requestPath
     ? (stylesheetRegistry?.resolveExternalSource(requestPath) ??
-      stylesheetRegistry?.resolveExternalSource(requestPath.replace(/^\//, '')))
+      stylesheetRegistry?.resolveExternalSource(
+        requestPath.replace(/^\//, ''),
+      ) ??
+      stylesheetRegistry?.getServedSourcePath(requestPath) ??
+      stylesheetRegistry?.getServedSourcePath(requestPath.replace(/^\//, '')))
     : undefined;
 
   // HMR timing matters here. On a pure CSS edit, the browser often already has

packages/vite-plugin-angular/src/lib/compilation-api/compilation-api-plugin.spec.ts

@@ -203,6 +203,81 @@ describe('compilationAPIPlugin', () => {
     expect(emitAffectedFilesMock).toHaveBeenCalledOnce();
   });
 
+  it('resolves hashed component stylesheet ids to their source path', async () => {
+    const containingFile = join(tempRoot, 'src/demo.component.ts');
+    const resourceFile = join(tempRoot, 'src/demo.component.css');
+    let stylesheetId = '';
+
+    const initializeMock = vi
+      .fn()
+      .mockImplementation(async (_tsconfig, host) => {
+        stylesheetId = await host.transformStylesheet(
+          '.demo { @apply sa:flex; }',
+          containingFile,
+          resourceFile,
+          0,
+          'DemoComponent',
+        );
+
+        return {
+          externalStylesheets: new Map(),
+          templateUpdates: new Map(),
+        };
+      });
+    const emitAffectedFilesMock = vi.fn().mockResolvedValue([]);
+
+    createAngularCompilationMock.mockResolvedValue({
+      initialize: initializeMock,
+      update: vi.fn(),
+      diagnoseFiles: vi.fn().mockResolvedValue({ errors: [], warnings: [] }),
+      emitAffectedFiles: emitAffectedFilesMock,
+    });
+
+    const { compilationAPIPlugin } =
+      await import('./compilation-api-plugin.js');
+    const plugin = compilationAPIPlugin({
+      tsconfigGetter: () => join(tempRoot, 'tsconfig.json'),
+      workspaceRoot: tempRoot,
+      inlineStylesExtension: 'css',
+      jit: false,
+      liveReload: false,
+      disableTypeChecking: true,
+      supportedBrowsers: ['safari 15'],
+      fileReplacements: [],
+      hasTailwindCss: true,
+      isTest: false,
+      isAstroIntegration: false,
+      include: [],
+      additionalContentDirs: [],
+    });
+
+    await (plugin.config as any)(
+      { root: tempRoot, mode: 'development' },
+      { command: 'serve', mode: 'development' },
+    );
+    await (plugin.configResolved as any)({
+      cacheDir: join(tempRoot, '.vite'),
+      root: tempRoot,
+      mode: 'development',
+      build: {},
+      server: { hmr: true },
+      plugins: [],
+    });
+    await (plugin.buildStart as any).call({
+      addWatchFile: vi.fn(),
+      error: vi.fn(),
+      warn: vi.fn(),
+    });
+
+    expect(stylesheetId).toMatch(/^[a-f0-9]+\.css$/);
+    expect((plugin.resolveId as any)(`/${stylesheetId}?ngcomp=ng-c1&e=0`)).toBe(
+      `${resourceFile}?ngcomp=ng-c1&e=0`,
+    );
+    await expect(
+      (plugin.load as any)(`${resourceFile}?ngcomp=ng-c1&e=0`),
+    ).resolves.toBe('.demo { @apply sa:flex; }');
+  });
+
   it('maps templateUpdates to HMR metadata', async () => {
     const testFile = join(tempRoot, 'src/app.component.ts');
     const initializeMock = vi.fn().mockResolvedValue({

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

@@ -25,6 +25,7 @@ import {
   debugHmr,
   debugHmrV,
   debugStyles,
+  debugStylesV,
   type DebugOption,
 } from '../utils/debug.js';
 import {
@@ -737,6 +738,17 @@ export function compilationAPIPlugin(
       // Map angular component stylesheets
       if (isComponentStyleSheet(id)) {
         const filename = getFilenameFromPath(id);
+        const search = new URL(id, 'http://localhost').search;
+        const servedSourcePath =
+          stylesheetRegistry?.getServedSourcePath(filename);
+
+        if (servedSourcePath) {
+          debugStylesV('resolveId: mapped served stylesheet to source', {
+            filename,
+            resolvedPath: servedSourcePath,
+          });
+          return servedSourcePath + search;
+        }
 
         if (stylesheetRegistry?.hasServed(filename)) {
           return id;

packages/vite-plugin-angular/src/lib/stylesheet-registry.spec.ts

@@ -61,6 +61,9 @@ describe('stylesheet-registry', () => {
     });
 
     expect(stylesheetId).toMatch(/^[a-f0-9]+\.css$/);
+    expect(registry.getServedSourcePath(stylesheetId)).toBe(
+      '/project/src/app/demo.component.css',
+    );
     expect(registry.getServedContent(stylesheetId)).toBe(
       '.demo { color: red; }',
     );
@@ -73,6 +76,26 @@ describe('stylesheet-registry', () => {
     expect(registry.getServedContent('demo.component.css')).toBeUndefined();
   });
 
+  it('registers inline stylesheet content under a stable synthetic source path', () => {
+    const registry = new AnalogStylesheetRegistry();
+
+    const stylesheetId = registerStylesheetContent(registry, {
+      code: '.demo { color: red; }',
+      containingFile: '/project/src/app/demo.component.ts',
+      className: 'DemoComponent',
+      order: 0,
+      inlineStylesExtension: 'css',
+    });
+
+    expect(stylesheetId).toMatch(/^[a-f0-9]+\.css$/);
+    expect(registry.getServedSourcePath(stylesheetId)).toBe(
+      '/project/src/app/demo.component.css',
+    );
+    expect(
+      registry.getServedContent('/project/src/app/demo.component.css'),
+    ).toBe('.demo { color: red; }');
+  });
+
   it('keeps structured transform metadata on the source stylesheet', () => {
     const registry = new AnalogStylesheetRegistry();
 

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

@@ -95,6 +95,10 @@ export class AnalogStylesheetRegistry {
     return this.resolveServedRecord(requestId)?.normalizedCode;
   }
 
+  getServedSourcePath(requestId: string): string | undefined {
+    return this.resolveServedRecord(requestId)?.sourcePath;
+  }
+
   resolveExternalSource(requestId: string): string | undefined {
     const normalizedRequestId = this.normalizeRequestId(requestId);
     return this.externalRequestToSource.get(normalizedRequestId);
@@ -136,7 +140,9 @@ export class AnalogStylesheetRegistry {
     const requestPath = normalizedRequestId.split('?')[0];
     const sourcePath =
       this.resolveExternalSource(requestPath) ??
-      this.resolveExternalSource(requestPath.replace(/^\//, ''));
+      this.resolveExternalSource(requestPath.replace(/^\//, '')) ??
+      this.getServedSourcePath(requestPath) ??
+      this.getServedSourcePath(requestPath.replace(/^\//, ''));
     if (!sourcePath) {
       return;
     }
@@ -295,25 +301,23 @@ export function registerStylesheetContent(
     .update(code)
     .digest('hex');
   const stylesheetId = `${id}.${inlineStylesExtension}`;
-
-  const aliases: string[] = [];
-
-  if (resourceFile) {
-    const normalizedResourceFile = normalizePath(normalize(resourceFile));
-    // Avoid basename-only aliases here: shared filenames like `index.css`
-    // can collide across components and break HMR lookups.
-    aliases.push(
-      resourceFile,
-      normalizedResourceFile,
-      resourceFile.replace(/^\//, ''),
-      normalizedResourceFile.replace(/^\//, ''),
-    );
-  }
+  const sourcePath =
+    resourceFile ?? containingFile.replace('.ts', `.${inlineStylesExtension}`);
+  const normalizedSourcePath = normalizePath(normalize(sourcePath));
+
+  // Avoid basename-only aliases here: shared filenames like `index.css`
+  // can collide across components and break HMR lookups.
+  const aliases = [
+    sourcePath,
+    normalizedSourcePath,
+    sourcePath.replace(/^\//, ''),
+    normalizedSourcePath.replace(/^\//, ''),
+  ];
 
   registry.registerServedStylesheet(
     {
       publicId: stylesheetId,
-      sourcePath: resourceFile,
+      sourcePath: normalizedSourcePath,
       normalizedCode: code,
       dependencies,
       diagnostics,