build: refactor code to use types from sass and copy-webpack-plugin instead of @types

These packages now ship their own type decleration files.

Author: alan-agius4

package.json

@@ -58,7 +58,6 @@
     ]
   },
   "resolutions": {
-    "**/@types/copy-webpack-plugin/webpack": "5.65.0",
     "**/@types/webpack-dev-server/webpack": "5.65.0",
     "ajv-formats/ajv": "8.8.2"
   },
@@ -96,7 +95,6 @@
     "@types/babel__core": "7.1.17",
     "@types/babel__template": "7.4.1",
     "@types/cacache": "^15.0.0",
-    "@types/copy-webpack-plugin": "^8.0.0",
     "@types/debug": "^4.1.2",
     "@types/express": "^4.16.0",
     "@types/glob": "^7.1.1",
@@ -115,7 +113,6 @@
     "@types/postcss-preset-env": "^6.7.1",
     "@types/progress": "^2.0.3",
     "@types/resolve": "^1.17.1",
-    "@types/sass": "^1.43.0",
     "@types/semver": "^7.0.0",
     "@types/text-table": "^0.2.1",
     "@types/uuid": "^8.0.0",

packages/angular_devkit/build_angular/BUILD.bazel

@@ -114,7 +114,6 @@ ts_library(
         "@npm//@types/babel__template",
         "@npm//@types/browserslist",
         "@npm//@types/cacache",
-        "@npm//@types/copy-webpack-plugin",
         "@npm//@types/glob",
         "@npm//@types/inquirer",
         "@npm//@types/karma",
@@ -123,7 +122,6 @@ ts_library(
         "@npm//@types/node",
         "@npm//@types/parse5-html-rewriting-stream",
         "@npm//@types/postcss-preset-env",
-        "@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

@@ -6,7 +6,15 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import { Importer, ImporterReturnType, Options, Result, SassException } from 'sass';
+import {
+  LegacyAsyncImporter as AsyncImporter,
+  LegacyResult as CompileResult,
+  LegacyException as Exception,
+  LegacyImporterResult as ImporterResult,
+  LegacyImporterThis as ImporterThis,
+  LegacyOptions as Options,
+  LegacySyncImporter as SyncImporter,
+} from 'sass';
 import { MessageChannel, Worker } from 'worker_threads';
 import { maxWorkers } from '../utils/environment-options';
 
@@ -18,7 +26,7 @@ const MAX_RENDER_WORKERS = maxWorkers;
 /**
  * The callback type for the `dart-sass` asynchronous render function.
  */
-type RenderCallback = (error?: SassException, result?: Result) => void;
+type RenderCallback = (error?: Exception, result?: CompileResult) => void;
 
 /**
  * An object containing the contextual information for a specific render request.
@@ -27,16 +35,16 @@ interface RenderRequest {
   id: number;
   workerIndex: number;
   callback: RenderCallback;
-  importers?: Importer[];
+  importers?: (SyncImporter | AsyncImporter)[];
 }
 
 /**
  * A response from the Sass render Worker containing the result of the operation.
  */
 interface RenderResponseMessage {
   id: number;
-  error?: SassException;
-  result?: Result;
+  error?: Exception;
+  result?: CompileResult;
 }
 
 /**
@@ -73,7 +81,7 @@ export class SassWorkerImplementation {
    * @param options The `dart-sass` options to use when rendering the stylesheet.
    * @param callback The function to execute when the rendering is complete.
    */
-  render(options: Options, callback: RenderCallback): void {
+  render(options: Options<'async'>, callback: RenderCallback): void {
     // The `functions`, `logger` and `importer` options are JavaScript functions that cannot be transferred.
     // If any additional function options are added in the future, they must be excluded as well.
     const { functions, importer, logger, ...serializableOptions } = options;
@@ -142,7 +150,7 @@ export class SassWorkerImplementation {
         // The results are expected to be Node.js `Buffer` objects but will each be transferred as
         // a Uint8Array that does not have the expected `toString` behavior of a `Buffer`.
         const { css, map, stats } = response.result;
-        const result: Result = {
+        const result: CompileResult = {
           // This `Buffer.from` override will use the memory directly and avoid making a copy
           css: Buffer.from(css.buffer, css.byteOffset, css.byteLength),
           stats,
@@ -199,16 +207,21 @@ export class SassWorkerImplementation {
   }
 
   private async processImporters(
-    importers: Iterable<Importer>,
+    importers: Iterable<SyncImporter | AsyncImporter>,
     url: string,
     prev: string,
     fromImport: boolean,
-  ): Promise<ImporterReturnType> {
+  ): Promise<ImporterResult> {
     let result = null;
     for (const importer of importers) {
-      result = await new Promise<ImporterReturnType>((resolve) => {
+      result = await new Promise<ImporterResult>((resolve) => {
         // Importers can be both sync and async
-        const innerResult = importer.call({ fromImport }, url, prev, resolve);
+        const innerResult = (importer as AsyncImporter).call(
+          { fromImport } as ImporterThis,
+          url,
+          prev,
+          resolve,
+        );
         if (innerResult !== undefined) {
           resolve(innerResult);
         }
@@ -225,7 +238,7 @@ export class SassWorkerImplementation {
   private createRequest(
     workerIndex: number,
     callback: RenderCallback,
-    importer: Importer | Importer[] | undefined,
+    importer: SyncImporter | AsyncImporter | (SyncImporter | AsyncImporter)[] | undefined,
   ): RenderRequest {
     return {
       id: this.idCounter++,

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

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import { ImporterReturnType, Options, renderSync } from 'sass';
+import { ImporterResult, LegacyOptions as Options, renderSync } from 'sass';
 import { MessagePort, parentPort, receiveMessageOnPort, workerData } from 'worker_threads';
 
 /**
@@ -21,7 +21,7 @@ interface RenderRequestMessage {
   /**
    * The Sass options to provide to the `dart-sass` render function.
    */
-  options: Options;
+  options: Options<'sync'>;
   /**
    * Indicates the request has a custom importer function on the main thread.
    */
@@ -52,7 +52,7 @@ parentPort.on('message', ({ id, hasImporter, options }: RenderRequestMessage) =>
         workerImporterPort.postMessage({ id, url, prev, fromImport });
         Atomics.wait(importerSignal, 0, 0);
 
-        return receiveMessageOnPort(workerImporterPort)?.message as ImporterReturnType;
+        return receiveMessageOnPort(workerImporterPort)?.message as ImporterResult;
       };
     }
 

packages/angular_devkit/build_angular/src/webpack/utils/helpers.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import type { ObjectPattern } from 'copy-webpack-plugin';
+import type { ObjectPattern } from 'copy-webpack-plugin/types/index'; // Types are not exported properly. Hence the deep-import.
 import { createHash } from 'crypto';
 import { existsSync } from 'fs';
 import glob from 'glob';