perf(@angular-devkit/build-angular): execute dart-sass in a worker

The dart-sass Sass implementation will now be executed in a separate worker thread. The wrapper worker implementation provides an interface that can be directly used by Webpack's `sass-loader`.
The worker implementation allows dart-sass to be executed in its synchronous mode which can be up to two times faster than its asynchronous mode. The worker thread also allows Webpack to continue other bundling tasks while the Sass stylesheets are being processed.

Author: clydin

package.json

@@ -119,6 +119,7 @@
     "@types/progress": "^2.0.3",
     "@types/resolve": "^1.17.1",
     "@types/rimraf": "^3.0.0",
+    "@types/sass": "^1.16.0",
     "@types/semver": "^7.0.0",
     "@types/text-table": "^0.2.1",
     "@types/uuid": "^8.0.0",

packages/angular_devkit/build_angular/BUILD.bazel

@@ -132,6 +132,7 @@ ts_library(
         "@npm//@types/parse5-html-rewriting-stream",
         "@npm//@types/postcss-preset-env",
         "@npm//@types/rimraf",
+        "@npm//@types/sass",
         "@npm//@types/semver",
         "@npm//@types/text-table",
         "@npm//@types/webpack-dev-server",

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

@@ -0,0 +1,161 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import { Importer, ImporterReturnType, Options, Result, SassException } from 'sass';
+import { MessageChannel, Worker } from 'worker_threads';
+
+type RenderCallback = (error?: SassException, result?: Result) => void;
+
+interface RenderRequest {
+  id: number;
+  callback: RenderCallback;
+  importers?: Importer[];
+}
+
+interface RenderResponse {
+  id: number;
+  error?: SassException;
+  result?: Result;
+}
+
+export class SassWorkerImplementation {
+  #worker?: Worker;
+  readonly #requests = new Map<number, RenderRequest>();
+  #idCounter = 1;
+
+  get info(): string {
+    return 'dart-sass\tworker';
+  }
+
+  renderSync(): never {
+    throw new Error('Sass renderSync is not supported.');
+  }
+
+  render(options: Options, callback: RenderCallback): void {
+    const { functions, importer, ...serializableOptions } = options;
+
+    if (functions && Object.keys(functions).length > 0) {
+      throw new Error('Sass custom functions are not supported.');
+    }
+
+    if (!this.#worker) {
+      this.#worker = this.createWorker();
+    }
+
+    const request = this.createRequest(callback, importer);
+    this.#requests.set(request.id, request);
+
+    this.#worker.postMessage({
+      id: request.id,
+      hasImporter: !!importer,
+      options: serializableOptions,
+    });
+  }
+
+  close(): void {
+    this.#worker?.terminate();
+  }
+
+  private createWorker(): Worker {
+    const { port1: mainImporterPort, port2: workerImporterPort } = new MessageChannel();
+    const importerSignal = new Int32Array(new SharedArrayBuffer(4));
+    const workerPath = require.resolve('./worker');
+    const worker = new Worker(workerPath, {
+      workerData: { workerImporterPort, importerSignal },
+      transferList: [workerImporterPort],
+    });
+
+    worker.on('message', (response: RenderResponse) => {
+      const request = this.#requests.get(response.id);
+      if (!request) {
+        return;
+      }
+
+      this.#requests.delete(response.id);
+
+      if (response.result) {
+        const { css, map, stats } = response.result;
+        const result: Result = {
+          css: Buffer.from(css.buffer, css.byteOffset, css.byteLength),
+          stats,
+        };
+        if (map) {
+          result.map = Buffer.from(map.buffer, map.byteOffset, map.byteLength);
+        }
+        request.callback(undefined, result);
+      } else {
+        request.callback(response.error);
+      }
+    });
+
+    mainImporterPort.on(
+      'message',
+      ({ id, url, prev }: { id: number; url: string; prev: string }) => {
+        const request = this.#requests.get(id);
+        if (!request?.importers) {
+          mainImporterPort.postMessage(null);
+          Atomics.store(importerSignal, 0, 1);
+          Atomics.notify(importerSignal, 0);
+
+          return;
+        }
+
+        this.processImporters(request.importers, url, prev)
+          .then((result) => {
+            mainImporterPort.postMessage(result);
+          })
+          .catch((error) => {
+            mainImporterPort.postMessage(error);
+          })
+          .finally(() => {
+            Atomics.store(importerSignal, 0, 1);
+            Atomics.notify(importerSignal, 0);
+          });
+      },
+    );
+
+    worker.unref();
+    mainImporterPort.unref();
+
+    return worker;
+  }
+
+  private async processImporters(
+    importers: Iterable<Importer>,
+    url: string,
+    prev: string,
+  ): 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);
+        if (innerResult !== undefined) {
+          resolve(innerResult);
+        }
+      });
+
+      if (result) {
+        break;
+      }
+    }
+
+    return result;
+  }
+
+  private createRequest(
+    callback: RenderCallback,
+    importer: Importer | Importer[] | undefined,
+  ): RenderRequest {
+    return {
+      id: this.#idCounter++,
+      callback,
+      importers: !importer || Array.isArray(importer) ? importer : [importer],
+    };
+  }
+}

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

@@ -0,0 +1,44 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import { ImporterReturnType, Options, renderSync } from 'sass';
+import { MessagePort, parentPort, receiveMessageOnPort, workerData } from 'worker_threads';
+
+interface RenderRequestMessage {
+  id: number;
+  options: Options;
+  hasImporter: boolean;
+}
+
+if (!parentPort || !workerData) {
+  throw new Error('Sass worker must be executed as a Worker.');
+}
+
+const { workerImporterPort, importerSignal } = workerData as {
+  workerImporterPort: MessagePort;
+  importerSignal: Int32Array;
+};
+
+parentPort.on('message', ({ id, hasImporter, options }: RenderRequestMessage) => {
+  try {
+    if (hasImporter) {
+      options.importer = (url, prev) => {
+        Atomics.store(importerSignal, 0, 0);
+        workerImporterPort.postMessage({ id, url, prev });
+        Atomics.wait(importerSignal, 0, 0);
+
+        return receiveMessageOnPort(workerImporterPort)?.message as ImporterReturnType;
+      };
+    }
+
+    const result = renderSync(options);
+    parentPort?.postMessage({ id, result });
+  } catch (error) {
+    parentPort?.postMessage({ id, error });
+  }
+});

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

@@ -10,6 +10,7 @@ import * as fs from 'fs';
 import * as path from 'path';
 import * as webpack from 'webpack';
 import { ExtraEntryPoint } from '../../browser/schema';
+import { SassWorkerImplementation } from '../../sass/sass-service';
 import { BuildBrowserFeatures } from '../../utils/build-browser-features';
 import { WebpackConfigOptions } from '../../utils/build-options';
 import {
@@ -114,7 +115,7 @@ export function getStylesConfig(wco: WebpackConfigOptions): webpack.Configuratio
         `To opt-out of the deprecated behaviour and start using 'sass' uninstall 'node-sass'.`,
     );
   } catch {
-    sassImplementation = require('sass');
+    sassImplementation = new SassWorkerImplementation();
   }
 
   const assetNameTemplate = assetNameTemplateFactory(hashFormat);
@@ -288,6 +289,8 @@ export function getStylesConfig(wco: WebpackConfigOptions): webpack.Configuratio
             implementation: sassImplementation,
             sourceMap: true,
             sassOptions: {
+              // Prevent use of `fibers` package as it no longer works in newer Node.js versions
+              fiber: false,
               // bootstrap-sass requires a minimum precision of 8
               precision: 8,
               includePaths,

yarn.lock

@@ -1859,6 +1859,13 @@
     "@types/glob" "*"
     "@types/node" "*"
 
+"@types/sass@^1.16.0":
+  version "1.16.0"
+  resolved "https://registry.yarnpkg.com/@types/sass/-/sass-1.16.0.tgz#b41ac1c17fa68ffb57d43e2360486ef526b3d57d"
+  integrity sha512-2XZovu4NwcqmtZtsBR5XYLw18T8cBCnU2USFHTnYLLHz9fkhnoEMoDsqShJIOFsFhn5aJHjweiUUdTrDGujegA==
+  dependencies:
+    "@types/node" "*"
+
 "@types/selenium-webdriver@^3.0.0":
   version "3.0.17"
   resolved "https://registry.yarnpkg.com/@types/selenium-webdriver/-/selenium-webdriver-3.0.17.tgz#50bea0c3c2acc31c959c5b1e747798b3b3d06d4b"