refactor(@angular-devkit/build-angular): update SASS worker to provide fromImport.

Since sass 1.33.0, an importer can determine whether it’s being called from an `@import` rule by checking `this.fromImport`. This API, is now being used by `sass-loader` version 12.

Author: alan-agius4

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

@@ -173,7 +173,17 @@ export class SassWorkerImplementation {
 
     mainImporterPort.on(
       'message',
-      ({ id, url, prev }: { id: number; url: string; prev: string }) => {
+      ({
+        id,
+        url,
+        prev,
+        fromImport,
+      }: {
+        id: number;
+        url: string;
+        prev: string;
+        fromImport: boolean;
+      }) => {
         const request = this.requests.get(id);
         if (!request?.importers) {
           mainImporterPort.postMessage(null);
@@ -183,7 +193,7 @@ export class SassWorkerImplementation {
           return;
         }
 
-        this.processImporters(request.importers, url, prev)
+        this.processImporters(request.importers, url, prev, fromImport)
           .then((result) => {
             mainImporterPort.postMessage(result);
           })
@@ -207,12 +217,13 @@ export class SassWorkerImplementation {
     importers: Iterable<Importer>,
     url: string,
     prev: string,
+    fromImport: boolean,
   ): Promise<ImporterReturnType> {
     let result = null;
     for (const importer of importers) {
       result = await new Promise<ImporterReturnType>((resolve) => {
         // Importers can be both sync and async
-        const innerResult = importer(url, prev, resolve);
+        const innerResult = importer.call({ fromImport }, url, prev, resolve);
         if (innerResult !== undefined) {
           resolve(innerResult);
         }

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

@@ -65,9 +65,11 @@ parentPort.on('message', (message: RenderRequestMessage | InitMessage) => {
       // This process must be synchronous from the perspective of dart-sass. The `Atomics`
       // functions combined with the shared memory `importSignal` and the Node.js
       // `receiveMessageOnPort` function are used to ensure synchronous behavior.
-      options.importer = (url, prev) => {
+      options.importer = function (url, prev) {
         Atomics.store(importerSignal, 0, 0);
-        workerImporterPort.postMessage({ id, url, prev });
+        // `this.fromImport` was added in dart-sass in 1.33.0, `@types/sass` doesn't include it yet.
+        const { fromImport } = this as { fromImport: boolean };
+        workerImporterPort.postMessage({ id, url, prev, fromImport });
         Atomics.wait(importerSignal, 0, 0);
 
         return receiveMessageOnPort(workerImporterPort)?.message as ImporterReturnType;