refactor(@angular-devkit/build-angular): preprocess Sass resolve cache entries in esbuild Sass plugin

When performing Sass import resolution within the experimental esbuild-based browser application builder,
the directory cache entries will now be preprocessed during the first directory search operation. This
will allow a more streamlined search operation on later resolution attempts for the same directory.
The caching is still limited to sharing per render request but this change provides for cache entries
that can more easily be serialized and shared between workers in the future.

Author: clydin

packages/angular_devkit/build_angular/src/sass/rebasing-importer.ts

@@ -8,7 +8,7 @@
 
 import { RawSourceMap } from '@ampproject/remapping';
 import MagicString from 'magic-string';
-import { Dirent, readFileSync, readdirSync } from 'node:fs';
+import { readFileSync, readdirSync } from 'node:fs';
 import { basename, dirname, extname, join, relative } from 'node:path';
 import { fileURLToPath, pathToFileURL } from 'node:url';
 import type { FileImporter, Importer, ImporterResult, Syntax } from 'sass';
@@ -19,6 +19,15 @@ import type { FileImporter, Importer, ImporterResult, Syntax } from 'sass';
  */
 const URL_REGEXP = /url(?:\(\s*(['"]?))(.*?)(?:\1\s*\))/g;
 
+/**
+ * A preprocessed cache entry for the files and directories within a previously searched
+ * directory when performing Sass import resolution.
+ */
+export interface DirectoryEntry {
+  files: Set<string>;
+  directories: Set<string>;
+}
+
 /**
  * A Sass Importer base class that provides the load logic to rebase all `url()` functions
  * within a stylesheet. The rebasing will ensure that the URLs in the output of the Sass compiler
@@ -115,7 +124,7 @@ abstract class UrlRebasingImporter implements Importer<'sync'> {
 export class RelativeUrlRebasingImporter extends UrlRebasingImporter {
   constructor(
     entryDirectory: string,
-    private directoryCache = new Map<string, Dirent[]>(),
+    private directoryCache = new Map<string, DirectoryEntry>(),
     rebaseSourceMaps?: Map<string, RawSourceMap>,
   ) {
     super(entryDirectory, rebaseSourceMaps);
@@ -149,17 +158,6 @@ export class RelativeUrlRebasingImporter extends UrlRebasingImporter {
     // Remove the style extension if present to allow adding the `.import` suffix
     const filename = basename(stylesheetPath, hasStyleExtension ? extension : undefined);
 
-    let entries;
-    try {
-      entries = this.directoryCache.get(directory);
-      if (!entries) {
-        entries = readdirSync(directory, { withFileTypes: true });
-        this.directoryCache.set(directory, entries);
-      }
-    } catch {
-      return null;
-    }
-
     const importPotentials = new Set<string>();
     const defaultPotentials = new Set<string>();
 
@@ -187,47 +185,82 @@ export class RelativeUrlRebasingImporter extends UrlRebasingImporter {
       defaultPotentials.add('_' + filename + '.css');
     }
 
-    const foundDefaults: string[] = [];
-    const foundImports: string[] = [];
+    let foundDefaults;
+    let foundImports;
     let hasPotentialIndex = false;
-    for (const entry of entries) {
-      // Record if the name should be checked as a directory with an index file
-      if (checkDirectory && !hasStyleExtension && entry.name === filename && entry.isDirectory()) {
-        hasPotentialIndex = true;
-      }
 
-      if (!entry.isFile()) {
-        continue;
+    let cachedEntries = this.directoryCache.get(directory);
+    if (cachedEntries) {
+      // If there is a preprocessed cache of the directory, perform an intersection of the potentials
+      // and the directory files.
+      const { files, directories } = cachedEntries;
+      foundDefaults = [...defaultPotentials].filter((potential) => files.has(potential));
+      foundImports = [...importPotentials].filter((potential) => files.has(potential));
+      hasPotentialIndex = checkDirectory && !hasStyleExtension && directories.has(filename);
+    } else {
+      // If no preprocessed cache exists, get the entries from the file system and, while searching,
+      // generate the cache for later requests.
+      let entries;
+      try {
+        entries = readdirSync(directory, { withFileTypes: true });
+      } catch {
+        return null;
       }
 
-      if (importPotentials.has(entry.name)) {
-        foundImports.push(join(directory, entry.name));
-      }
+      foundDefaults = [];
+      foundImports = [];
+      cachedEntries = { files: new Set<string>(), directories: new Set<string>() };
+      for (const entry of entries) {
+        const isDirectory = entry.isDirectory();
+        if (isDirectory) {
+          cachedEntries.directories.add(entry.name);
+        }
+
+        // Record if the name should be checked as a directory with an index file
+        if (checkDirectory && !hasStyleExtension && entry.name === filename && isDirectory) {
+          hasPotentialIndex = true;
+        }
+
+        if (!entry.isFile()) {
+          continue;
+        }
 
-      if (defaultPotentials.has(entry.name)) {
-        foundDefaults.push(join(directory, entry.name));
+        cachedEntries.files.add(entry.name);
+
+        if (importPotentials.has(entry.name)) {
+          foundImports.push(entry.name);
+        }
+
+        if (defaultPotentials.has(entry.name)) {
+          foundDefaults.push(entry.name);
+        }
       }
+
+      this.directoryCache.set(directory, cachedEntries);
     }
 
     // `foundImports` will only contain elements if `options.fromImport` is true
     const result = this.checkFound(foundImports) ?? this.checkFound(foundDefaults);
+    if (result !== null) {
+      return pathToFileURL(join(directory, result));
+    }
 
-    if (result === null && hasPotentialIndex) {
+    if (hasPotentialIndex) {
       // Check for index files using filename as a directory
       return this.resolveImport(url + '/index', fromImport, false);
     }
 
-    return result;
+    return null;
   }
 
   /**
    * Checks an array of potential stylesheet files to determine if there is a valid
    * stylesheet file. More than one discovered file may indicate an error.
    * @param found An array of discovered stylesheet files.
-   * @returns A fully resolved URL for a stylesheet file or `null` if not found.
+   * @returns A fully resolved path for a stylesheet file or `null` if not found.
    * @throws If there are ambiguous files discovered.
    */
-  private checkFound(found: string[]): URL | null {
+  private checkFound(found: string[]): string | null {
     if (found.length === 0) {
       // Not found
       return null;
@@ -245,10 +278,10 @@ export class RelativeUrlRebasingImporter extends UrlRebasingImporter {
 
       // Return the non-CSS file (sass/scss files have priority)
       // https://github.com/sass/dart-sass/blob/44d6bb6ac72fe6b93f5bfec371a1fffb18e6b76d/lib/src/importer/utils.dart#L44-L47
-      return pathToFileURL(foundWithoutCss[0]);
+      return foundWithoutCss[0];
     }
 
-    return pathToFileURL(found[0]);
+    return found[0];
   }
 }
 
@@ -260,7 +293,7 @@ export class RelativeUrlRebasingImporter extends UrlRebasingImporter {
 export class ModuleUrlRebasingImporter extends RelativeUrlRebasingImporter {
   constructor(
     entryDirectory: string,
-    directoryCache: Map<string, Dirent[]>,
+    directoryCache: Map<string, DirectoryEntry>,
     rebaseSourceMaps: Map<string, RawSourceMap> | undefined,
     private finder: FileImporter<'sync'>['findFileUrl'],
   ) {
@@ -286,7 +319,7 @@ export class ModuleUrlRebasingImporter extends RelativeUrlRebasingImporter {
 export class LoadPathsUrlRebasingImporter extends RelativeUrlRebasingImporter {
   constructor(
     entryDirectory: string,
-    directoryCache: Map<string, Dirent[]>,
+    directoryCache: Map<string, DirectoryEntry>,
     rebaseSourceMaps: Map<string, RawSourceMap> | undefined,
     private loadPaths: Iterable<string>,
   ) {

packages/angular_devkit/build_angular/src/sass/worker.ts

@@ -7,7 +7,6 @@
  */
 
 import mergeSourceMaps, { RawSourceMap } from '@ampproject/remapping';
-import { Dirent } from 'node:fs';
 import { dirname } from 'node:path';
 import { fileURLToPath, pathToFileURL } from 'node:url';
 import { MessagePort, parentPort, receiveMessageOnPort, workerData } from 'node:worker_threads';
@@ -19,6 +18,7 @@ import {
   compileString,
 } from 'sass';
 import {
+  DirectoryEntry,
   LoadPathsUrlRebasingImporter,
   ModuleUrlRebasingImporter,
   RelativeUrlRebasingImporter,
@@ -82,7 +82,7 @@ parentPort.on('message', (message: RenderRequestMessage) => {
       }[]
     | undefined;
   try {
-    const directoryCache = new Map<string, Dirent[]>();
+    const directoryCache = new Map<string, DirectoryEntry>();
     const rebaseSourceMaps = options.sourceMap ? new Map<string, RawSourceMap>() : undefined;
     if (hasImporter) {
       // When a custom importer function is present, the importer request must be proxied