refactor(@angular-devkit/build-angular): remove Sass module resolve workarounds

The recent version of the Sass compiler (`[email protected]`) now provides
additional information within an importer that allows more accurate resolution of node
modules packages without several existing workarounds. Previously, the Sass files needed
to be pre-processed to extract all `@import` and `@use` paths so that information regarding
the containing Sass file could be used to fully resolve the paths. The Sass compiler now
provides this information directly.

(cherry picked from commit 0862a38)

Author: clydin

packages/angular_devkit/build_angular/src/tools/esbuild/stylesheets/sass-language.ts

@@ -9,11 +9,8 @@
 import type { OnLoadResult, PartialMessage, ResolveResult } from 'esbuild';
 import { dirname, join, relative } from 'node:path';
 import { fileURLToPath, pathToFileURL } from 'node:url';
-import type { CompileResult, Exception, Syntax } from 'sass';
-import type {
-  FileImporterWithRequestContextOptions,
-  SassWorkerImplementation,
-} from '../../sass/sass-service';
+import type { CanonicalizeContext, CompileResult, Exception, Syntax } from 'sass';
+import type { SassWorkerImplementation } from '../../sass/sass-service';
 import { StylesheetLanguage, StylesheetPluginOptions } from './stylesheet-plugin-factory';
 
 let sassWorkerPool: SassWorkerImplementation | undefined;
@@ -39,30 +36,16 @@ export const SassStylesheetLanguage = Object.freeze<StylesheetLanguage>({
   fileFilter: /\.s[ac]ss$/,
   process(data, file, format, options, build) {
     const syntax = format === 'sass' ? 'indented' : 'scss';
-    const resolveUrl = async (url: string, options: FileImporterWithRequestContextOptions) => {
-      let result = await build.resolve(url, {
-        kind: 'import-rule',
-        // Use the provided resolve directory from the custom Sass service if available
-        resolveDir: options.resolveDir ?? build.initialOptions.absWorkingDir,
-      });
-
-      // If a resolve directory is provided, no additional speculative resolutions are required
-      if (options.resolveDir) {
-        return result;
+    const resolveUrl = async (url: string, options: CanonicalizeContext) => {
+      let resolveDir = build.initialOptions.absWorkingDir;
+      if (options.containingUrl) {
+        resolveDir = dirname(fileURLToPath(options.containingUrl));
       }
 
-      // Workaround to support Yarn PnP and pnpm without access to the importer file from Sass
-      if (!result.path && options.previousResolvedModules?.size) {
-        for (const previous of options.previousResolvedModules) {
-          result = await build.resolve(url, {
-            kind: 'import-rule',
-            resolveDir: previous,
-          });
-          if (result.path) {
-            break;
-          }
-        }
-      }
+      const result = await build.resolve(url, {
+        kind: 'import-rule',
+        resolveDir,
+      });
 
       return result;
     };
@@ -103,10 +86,7 @@ async function compileString(
   filePath: string,
   syntax: Syntax,
   options: StylesheetPluginOptions,
-  resolveUrl: (
-    url: string,
-    options: FileImporterWithRequestContextOptions,
-  ) => Promise<ResolveResult>,
+  resolveUrl: (url: string, options: CanonicalizeContext) => Promise<ResolveResult>,
 ): Promise<OnLoadResult> {
   // Lazily load Sass when a Sass file is found
   if (sassWorkerPool === undefined) {
@@ -139,7 +119,7 @@ async function compileString(
       quietDeps: true,
       importers: [
         {
-          findFileUrl: (url, options: FileImporterWithRequestContextOptions) =>
+          findFileUrl: (url, options) =>
             resolutionCache.getOrCreate(url, async () => {
               const result = await resolveUrl(url, options);
               if (result.path) {

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

@@ -12,7 +12,7 @@ import { readFileSync, readdirSync } from 'node:fs';
 import { basename, dirname, extname, join, relative } from 'node:path';
 import { fileURLToPath, pathToFileURL } from 'node:url';
 import type { CanonicalizeContext, Importer, ImporterResult, Syntax } from 'sass';
-import { findImports, findUrls } from './lexer';
+import { findUrls } from './lexer';
 
 /**
  * A preprocessed cache entry for the files and directories within a previously searched
@@ -23,45 +23,6 @@ export interface DirectoryEntry {
   directories: Set<string>;
 }
 
-/**
- * A prefix that is added to import and use directive specifiers that should be resolved
- * as modules and that will contain added resolve directory information.
- *
- * This functionality is used to workaround the Sass limitation that it does not provide the
- * importer file to custom resolution plugins.
- */
-const MODULE_RESOLUTION_PREFIX = '__NG_PACKAGE__';
-
-function packModuleSpecifier(specifier: string, resolveDir: string): string {
-  const packed =
-    MODULE_RESOLUTION_PREFIX +
-    ';' +
-    // Encode the resolve directory to prevent unsupported characters from being present when
-    // Sass processes the URL. This is important on Windows which can contain drive letters
-    // and colons which would otherwise be interpreted as a URL scheme.
-    encodeURIComponent(resolveDir) +
-    ';' +
-    // Escape characters instead of encoding to provide more friendly not found error messages.
-    // Unescaping is automatically handled by Sass.
-    // https://developer.mozilla.org/en-US/docs/Web/CSS/url#syntax
-    specifier.replace(/[()\s'"]/g, '\\$&');
-
-  return packed;
-}
-
-function unpackModuleSpecifier(specifier: string): { specifier: string; resolveDir?: string } {
-  if (!specifier.startsWith(`${MODULE_RESOLUTION_PREFIX};`)) {
-    return { specifier };
-  }
-
-  const values = specifier.split(';', 3);
-
-  return {
-    specifier: values[2],
-    resolveDir: decodeURIComponent(values[1]),
-  };
-}
-
 /**
  * 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
@@ -114,27 +75,6 @@ abstract class UrlRebasingImporter implements Importer<'sync'> {
       updatedContents.update(start, end, rebasedUrl);
     }
 
-    // Add resolution directory information to module specifiers to facilitate resolution
-    for (const { start, end, specifier } of findImports(contents)) {
-      // Currently only provide directory information for known/common packages:
-      // * `@material/`
-      // * `@angular/`
-      //
-      // Comprehensive pre-resolution support may be added in the future. This is complicated by CSS/Sass not
-      // requiring a `./` or `../` prefix to signify relative paths. A bare specifier could be either relative
-      // or a module specifier. To differentiate, a relative resolution would need to be attempted first.
-      if (!specifier.startsWith('@angular/') && !specifier.startsWith('@material/')) {
-        continue;
-      }
-
-      updatedContents ??= new MagicString(contents);
-      updatedContents.update(
-        start,
-        end,
-        `"${packModuleSpecifier(specifier, stylesheetDirectory)}"`,
-      );
-    }
-
     if (updatedContents) {
       contents = updatedContents.toString();
       if (this.rebaseSourceMaps) {
@@ -348,10 +288,7 @@ export class ModuleUrlRebasingImporter extends RelativeUrlRebasingImporter {
     entryDirectory: string,
     directoryCache: Map<string, DirectoryEntry>,
     rebaseSourceMaps: Map<string, RawSourceMap> | undefined,
-    private finder: (
-      specifier: string,
-      options: CanonicalizeContext & { resolveDir?: string },
-    ) => URL | null,
+    private finder: (specifier: string, options: CanonicalizeContext) => URL | null,
   ) {
     super(entryDirectory, directoryCache, rebaseSourceMaps);
   }
@@ -361,9 +298,7 @@ export class ModuleUrlRebasingImporter extends RelativeUrlRebasingImporter {
       return super.canonicalize(url, options);
     }
 
-    const { specifier, resolveDir } = unpackModuleSpecifier(url);
-
-    let result = this.finder(specifier, { ...options, resolveDir });
+    let result = this.finder(url, options);
     result &&= super.canonicalize(result.href, options);
 
     return result;

packages/angular_devkit/build_angular/src/tools/sass/sass-service.ts

@@ -6,10 +6,11 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import { dirname, join } from 'node:path';
+import { join } from 'node:path';
 import { fileURLToPath, pathToFileURL } from 'node:url';
 import { MessageChannel, Worker } from 'node:worker_threads';
 import {
+  CanonicalizeContext,
   CompileResult,
   Exception,
   FileImporter,
@@ -31,24 +32,6 @@ const MAX_RENDER_WORKERS = maxWorkers;
  */
 type RenderCallback = (error?: Exception, result?: CompileResult) => void;
 
-type FileImporterOptions = Parameters<FileImporter['findFileUrl']>[1];
-
-export interface FileImporterWithRequestContextOptions extends FileImporterOptions {
-  /**
-   * This is a custom option and is required as SASS does not provide context from which the file is being resolved.
-   * This breaks Yarn PNP as transitive deps cannot be resolved from the workspace root.
-   *
-   * Workaround until https://github.com/sass/sass/issues/3247 is addressed.
-   */
-  previousResolvedModules?: Set<string>;
-
-  /**
-   * The base directory to use when resolving the request.
-   * This value is only set if using the rebasing importers.
-   */
-  resolveDir?: string;
-}
-
 /**
  * An object containing the contextual information for a specific render request.
  */
@@ -58,7 +41,6 @@ interface RenderRequest {
   callback: RenderCallback;
   logger?: Logger;
   importers?: Importers[];
-  previousResolvedModules?: Set<string>;
 }
 
 /**
@@ -244,7 +226,7 @@ export class SassWorkerImplementation {
 
     mainImporterPort.on(
       'message',
-      ({ id, url, options }: { id: number; url: string; options: FileImporterOptions }) => {
+      ({ id, url, options }: { id: number; url: string; options: CanonicalizeContext }) => {
         const request = this.requests.get(id);
         if (!request?.importers) {
           mainImporterPort.postMessage(null);
@@ -256,14 +238,12 @@ export class SassWorkerImplementation {
 
         this.processImporters(request.importers, url, {
           ...options,
-          previousResolvedModules: request.previousResolvedModules,
+          // URL is not serializable so in the worker we convert to string and here back to URL.
+          containingUrl: options.containingUrl
+            ? pathToFileURL(options.containingUrl as unknown as string)
+            : null,
         })
           .then((result) => {
-            if (result) {
-              request.previousResolvedModules ??= new Set();
-              request.previousResolvedModules.add(dirname(result));
-            }
-
             mainImporterPort.postMessage(result);
           })
           .catch((error) => {
@@ -284,7 +264,7 @@ export class SassWorkerImplementation {
   private async processImporters(
     importers: Iterable<Importers>,
     url: string,
-    options: FileImporterWithRequestContextOptions,
+    options: CanonicalizeContext,
   ): Promise<string | null> {
     for (const importer of importers) {
       if (this.isImporter(importer)) {

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

@@ -93,7 +93,14 @@ parentPort.on('message', (message: RenderRequestMessage) => {
       const proxyImporter: FileImporter<'sync'> = {
         findFileUrl: (url, options) => {
           Atomics.store(importerSignal, 0, 0);
-          workerImporterPort.postMessage({ id, url, options });
+          workerImporterPort.postMessage({
+            id,
+            url,
+            options: {
+              ...options,
+              containingUrl: options.containingUrl ? fileURLToPath(options.containingUrl) : null,
+            },
+          });
           Atomics.wait(importerSignal, 0, 0);
 
           const result = receiveMessageOnPort(workerImporterPort)?.message as string | null;

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

@@ -8,16 +8,13 @@
 
 import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 import * as path from 'node:path';
-import { pathToFileURL } from 'node:url';
+import { fileURLToPath, pathToFileURL } from 'node:url';
 import type { FileImporter } from 'sass';
 import type { Configuration, LoaderContext, RuleSetUseItem } from 'webpack';
 import { WebpackConfigOptions } from '../../../utils/build-options';
 import { useLegacySass } from '../../../utils/environment-options';
 import { findTailwindConfigurationFile } from '../../../utils/tailwind';
-import {
-  FileImporterWithRequestContextOptions,
-  SassWorkerImplementation,
-} from '../../sass/sass-service';
+import { SassWorkerImplementation } from '../../sass/sass-service';
 import { SassLegacyWorkerImplementation } from '../../sass/sass-service-legacy';
 import {
   AnyComponentStyleBudgetChecker,
@@ -405,28 +402,20 @@ function getSassResolutionImporter(
   });
 
   return {
-    findFileUrl: async (
-      url,
-      { fromImport, previousResolvedModules }: FileImporterWithRequestContextOptions,
-    ): Promise<URL | null> => {
+    findFileUrl: async (url, { fromImport, containingUrl }): Promise<URL | null> => {
       if (url.charAt(0) === '.') {
         // Let Sass handle relative imports.
         return null;
       }
 
+      let resolveDir = root;
+      if (containingUrl) {
+        resolveDir = path.dirname(fileURLToPath(containingUrl));
+      }
+
       const resolve = fromImport ? resolveImport : resolveModule;
       // Try to resolve from root of workspace
-      let result = await tryResolve(resolve, root, url);
-
-      // Try to resolve from previously resolved modules.
-      if (!result && previousResolvedModules) {
-        for (const path of previousResolvedModules) {
-          result = await tryResolve(resolve, path, url);
-          if (result) {
-            break;
-          }
-        }
-      }
+      const result = await tryResolve(resolve, resolveDir, url);
 
       return result ? pathToFileURL(result) : null;
     },