fixup! perf(@angular/build): share sass directory and resolution caches across stylesheets

Author: alan-agius4

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

@@ -15,7 +15,10 @@ import {
   RebuildState,
 } from '../../tools/esbuild/bundler-execution-result';
 import { BuildOutputFile, BuildOutputFileType } from '../../tools/esbuild/bundler-files';
-import { shutdownSassWorkerPool } from '../../tools/esbuild/stylesheets/sass-language';
+import {
+  resetSassWorkerPoolCaches,
+  shutdownSassWorkerPool,
+} from '../../tools/esbuild/stylesheets/sass-language';
 import { logMessages, withNoProgress, withSpinner } from '../../tools/esbuild/utils';
 import { ChangedFiles } from '../../tools/esbuild/watcher';
 import { shouldWatchRoot } from '../../utils/environment-options';
@@ -210,6 +213,8 @@ export async function* runEsBuildBuildAction(
       // Clear removed files from current watch files
       changes.removed.forEach((removedPath) => currentWatchFiles.delete(removedPath));
 
+      resetSassWorkerPoolCaches();
+
       const rebuildState = result.createRebuildState(changes);
       result = await withProgress('Changes detected. Rebuilding...', () => action(rebuildState));
 

packages/angular/build/src/tools/esbuild/stylesheets/sass-language.ts

@@ -23,9 +23,18 @@ function isSassException(error: unknown): error is Exception {
   return !!error && typeof error === 'object' && 'sassMessage' in error;
 }
 
+export function resetSassWorkerPoolCaches(): void {
+  resolutionCache?.clear();
+  packageRootCache?.clear();
+  if (sassService) {
+    sassService.clearCache();
+  } else if (sassServicePromise) {
+    void sassServicePromise.then((service) => service.clearCache());
+  }
+}
+
 export function shutdownSassWorkerPool(): void {
-  resolutionCache = undefined;
-  packageRootCache = undefined;
+  resetSassWorkerPoolCaches();
   if (sassService) {
     void sassService.close();
     sassService = undefined;

packages/angular_devkit/build_angular/src/tools/webpack/configs/styles.ts

@@ -70,6 +70,9 @@ export async function getStylesConfig(wco: WebpackConfigOptions): Promise<Config
 
   extraPlugins.push({
     apply(compiler) {
+      compiler.hooks.thisCompilation.tap('sass-service', () => {
+        sassImplementation.clearCache();
+      });
       compiler.hooks.shutdown.tap('sass-service', () => {
         void sassImplementation.close();
       });