@angular-devkit/build-angular 15.0.0-rc.2 → 15.0.0-rc.4

package/package.json

@@ -1,37 +1,37 @@
 {
   "name": "@angular-devkit/build-angular",
-  "version": "15.0.0-rc.2",
+  "version": "15.0.0-rc.4",
   "description": "Angular Webpack Build Facade",
   "main": "src/index.js",
   "typings": "src/index.d.ts",
   "builders": "builders.json",
   "dependencies": {
     "@ampproject/remapping": "2.2.0",
-    "@angular-devkit/architect": "0.1500.0-rc.2",
-    "@angular-devkit/build-webpack": "0.1500.0-rc.2",
-    "@angular-devkit/core": "15.0.0-rc.2",
-    "@babel/core": "7.19.6",
-    "@babel/generator": "7.20.1",
+    "@angular-devkit/architect": "0.1500.0-rc.4",
+    "@angular-devkit/build-webpack": "0.1500.0-rc.4",
+    "@angular-devkit/core": "15.0.0-rc.4",
+    "@babel/core": "7.20.2",
+    "@babel/generator": "7.20.4",
     "@babel/helper-annotate-as-pure": "7.18.6",
     "@babel/plugin-proposal-async-generator-functions": "7.20.1",
     "@babel/plugin-transform-async-to-generator": "7.18.6",
     "@babel/plugin-transform-runtime": "7.19.6",
-    "@babel/preset-env": "7.19.4",
+    "@babel/preset-env": "7.20.2",
     "@babel/runtime": "7.20.1",
     "@babel/template": "7.18.10",
     "@discoveryjs/json-ext": "0.5.7",
-    "@ngtools/webpack": "15.0.0-rc.2",
+    "@ngtools/webpack": "15.0.0-rc.4",
     "ansi-colors": "4.1.3",
     "autoprefixer": "10.4.13",
-    "babel-loader": "9.0.1",
+    "babel-loader": "9.1.0",
     "babel-plugin-istanbul": "6.1.1",
-    "browserslist": "^4.9.1",
-    "cacache": "17.0.1",
+    "browserslist": "4.21.4",
+    "cacache": "17.0.2",
     "chokidar": "3.5.3",
     "copy-webpack-plugin": "11.0.0",
     "critters": "0.0.16",
     "css-loader": "6.7.1",
-    "esbuild-wasm": "0.15.12",
+    "esbuild-wasm": "0.15.13",
     "glob": "8.0.3",
     "https-proxy-agent": "5.0.1",
     "inquirer": "8.2.4",
@@ -40,20 +40,20 @@
     "less": "4.1.3",
     "less-loader": "11.1.0",
     "license-webpack-plugin": "4.0.2",
-    "loader-utils": "3.2.0",
+    "loader-utils": "3.2.1",
+    "magic-string": "0.26.7",
     "mini-css-extract-plugin": "2.6.1",
-    "minimatch": "5.1.0",
     "open": "8.4.0",
     "ora": "5.4.1",
     "parse5-html-rewriting-stream": "6.0.1",
     "piscina": "3.2.0",
-    "postcss": "8.4.18",
+    "postcss": "8.4.19",
     "postcss-loader": "7.0.1",
     "regenerator-runtime": "0.13.10",
     "resolve-url-loader": "5.0.0",
     "rxjs": "6.6.7",
-    "sass": "1.55.0",
-    "sass-loader": "13.1.0",
+    "sass": "1.56.1",
+    "sass-loader": "13.2.0",
     "semver": "7.3.8",
     "source-map-loader": "4.0.1",
     "source-map-support": "0.5.21",
@@ -61,14 +61,14 @@
     "text-table": "0.2.0",
     "tree-kill": "1.2.2",
     "tslib": "2.4.1",
-    "webpack": "5.74.0",
+    "webpack": "5.75.0",
     "webpack-dev-middleware": "5.3.3",
     "webpack-dev-server": "4.11.1",
     "webpack-merge": "5.8.0",
     "webpack-subresource-integrity": "5.1.0"
   },
   "optionalDependencies": {
-    "esbuild": "0.15.12"
+    "esbuild": "0.15.13"
   },
   "peerDependencies": {
     "@angular/compiler-cli": "^15.0.0-next",

package/src/builders/browser-esbuild/compiler-plugin.js

@@ -331,47 +331,41 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
                 return result;
             });
             build.onLoad({ filter: compilerOptions.allowJs ? /\.[cm]?[jt]sx?$/ : /\.[cm]?tsx?$/ }, (args) => (0, profiling_1.profileAsync)('NG_EMIT_TS*', async () => {
-                var _a, _b, _c, _d, _e;
+                var _a, _b, _c, _d, _e, _f;
                 assert.ok(fileEmitter, 'Invalid plugin execution order');
+                const request = (_b = (_a = pluginOptions.fileReplacements) === null || _a === void 0 ? void 0 : _a[args.path]) !== null && _b !== void 0 ? _b : args.path;
                 // The filename is currently used as a cache key. Since the cache is memory only,
                 // the options cannot change and do not need to be represented in the key. If the
                 // cache is later stored to disk, then the options that affect transform output
                 // would need to be added to the key as well as a check for any change of content.
-                let contents = (_a = pluginOptions.sourceFileCache) === null || _a === void 0 ? void 0 : _a.typeScriptFileCache.get((0, node_url_1.pathToFileURL)(args.path).href);
+                let contents = (_c = pluginOptions.sourceFileCache) === null || _c === void 0 ? void 0 : _c.typeScriptFileCache.get((0, node_url_1.pathToFileURL)(request).href);
                 if (contents === undefined) {
-                    const typescriptResult = await fileEmitter((_c = (_b = pluginOptions.fileReplacements) === null || _b === void 0 ? void 0 : _b[args.path]) !== null && _c !== void 0 ? _c : args.path);
+                    const typescriptResult = await fileEmitter(request);
                     if (!typescriptResult) {
                         // No TS result indicates the file is not part of the TypeScript program.
                         // If allowJs is enabled and the file is JS then defer to the next load hook.
-                        if (compilerOptions.allowJs && /\.[cm]?js$/.test(args.path)) {
+                        if (compilerOptions.allowJs && /\.[cm]?js$/.test(request)) {
                             return undefined;
                         }
                         // Otherwise return an error
                         return {
                             errors: [
-                                {
-                                    text: `File '${args.path}' is missing from the TypeScript compilation.`,
-                                    notes: [
-                                        {
-                                            text: `Ensure the file is part of the TypeScript program via the 'files' or 'include' property.`,
-                                        },
-                                    ],
-                                },
+                                createMissingFileError(request, args.path, (_d = build.initialOptions.absWorkingDir) !== null && _d !== void 0 ? _d : ''),
                             ],
                         };
                     }
-                    const data = (_d = typescriptResult.content) !== null && _d !== void 0 ? _d : '';
+                    const data = (_e = typescriptResult.content) !== null && _e !== void 0 ? _e : '';
                     // The pre-transformed data is used as a cache key. Since the cache is memory only,
                     // the options cannot change and do not need to be represented in the key. If the
                     // cache is later stored to disk, then the options that affect transform output
                     // would need to be added to the key as well.
                     contents = babelDataCache.get(data);
                     if (contents === undefined) {
-                        const transformedData = await transformWithBabel(args.path, data, pluginOptions);
+                        const transformedData = await transformWithBabel(request, data, pluginOptions);
                         contents = Buffer.from(transformedData, 'utf-8');
                         babelDataCache.set(data, contents);
                     }
-                    (_e = pluginOptions.sourceFileCache) === null || _e === void 0 ? void 0 : _e.typeScriptFileCache.set((0, node_url_1.pathToFileURL)(args.path).href, contents);
+                    (_f = pluginOptions.sourceFileCache) === null || _f === void 0 ? void 0 : _f.typeScriptFileCache.set((0, node_url_1.pathToFileURL)(request).href, contents);
                 }
                 return {
                     contents,
@@ -504,3 +498,19 @@ function findAffectedFiles(builder, { ignoreForDiagnostics, ignoreForEmit, incre
     }
     return affectedFiles;
 }
+function createMissingFileError(request, original, root) {
+    const error = {
+        text: `File '${path.relative(root, request)}' is missing from the TypeScript compilation.`,
+        notes: [
+            {
+                text: `Ensure the file is part of the TypeScript program via the 'files' or 'include' property.`,
+            },
+        ],
+    };
+    if (request !== original) {
+        error.notes.push({
+            text: `File is requested from a file replacement of '${path.relative(root, original)}'.`,
+        });
+    }
+    return error;
+}

package/src/builders/browser-esbuild/css-resource-plugin.js

@@ -33,6 +33,14 @@ function createCssResourcePlugin() {
                 if (args.kind !== 'url-token' || ((_a = args.pluginData) === null || _a === void 0 ? void 0 : _a[CSS_RESOURCE_RESOLUTION])) {
                     return null;
                 }
+                // If root-relative, absolute or protocol relative url, mark as external to leave the
+                // path/URL in place.
+                if (/^((?:\w+:)?\/\/|data:|chrome:|#|\/)/.test(args.path)) {
+                    return {
+                        path: args.path,
+                        external: true,
+                    };
+                }
                 const { importer, kind, resolveDir, namespace, pluginData = {} } = args;
                 pluginData[CSS_RESOURCE_RESOLUTION] = true;
                 const result = await build.resolve(args.path, {

package/src/builders/browser-esbuild/esbuild.d.ts

@@ -7,6 +7,7 @@
  */
 import { BuilderContext } from '@angular-devkit/architect';
 import { BuildFailure, BuildInvalidate, BuildOptions, BuildResult, Message, OutputFile } from 'esbuild';
+import { FileInfo } from '../../utils/index-file/augment-index-html';
 /**
  * Determines if an unknown value is an esbuild BuildFailure error object thrown by esbuild.
  * @param value A potential esbuild BuildFailure error object.
@@ -24,8 +25,9 @@ export declare function isEsBuildFailure(value: unknown): value is BuildFailure;
  * @returns If output files are generated, the full esbuild BuildResult; if not, the
  * warnings and errors for the attempted build.
  */
-export declare function bundle(optionsOrInvalidate: BuildOptions | BuildInvalidate): Promise<(BuildResult & {
+export declare function bundle(workspaceRoot: string, optionsOrInvalidate: BuildOptions | BuildInvalidate): Promise<(BuildResult & {
     outputFiles: OutputFile[];
+    initialFiles: FileInfo[];
 }) | (BuildFailure & {
     outputFiles?: never;
 })>;

package/src/builders/browser-esbuild/esbuild.js

@@ -9,6 +9,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.logMessages = exports.bundle = exports.isEsBuildFailure = void 0;
 const esbuild_1 = require("esbuild");
+const node_path_1 = require("node:path");
 /**
  * Determines if an unknown value is an esbuild BuildFailure error object thrown by esbuild.
  * @param value A potential esbuild BuildFailure error object.
@@ -29,14 +30,17 @@ exports.isEsBuildFailure = isEsBuildFailure;
  * @returns If output files are generated, the full esbuild BuildResult; if not, the
  * warnings and errors for the attempted build.
  */
-async function bundle(optionsOrInvalidate) {
+async function bundle(workspaceRoot, optionsOrInvalidate) {
+    var _a, _b;
+    let result;
     try {
         if (typeof optionsOrInvalidate === 'function') {
-            return (await optionsOrInvalidate());
+            result = (await optionsOrInvalidate());
         }
         else {
-            return await (0, esbuild_1.build)({
+            result = await (0, esbuild_1.build)({
                 ...optionsOrInvalidate,
+                metafile: true,
                 write: false,
             });
         }
@@ -50,6 +54,23 @@ async function bundle(optionsOrInvalidate) {
             throw failure;
         }
     }
+    const initialFiles = [];
+    for (const outputFile of result.outputFiles) {
+        // Entries in the metafile are relative to the `absWorkingDir` option which is set to the workspaceRoot
+        const relativeFilePath = (0, node_path_1.relative)(workspaceRoot, outputFile.path);
+        const entryPoint = (_b = (_a = result.metafile) === null || _a === void 0 ? void 0 : _a.outputs[relativeFilePath]) === null || _b === void 0 ? void 0 : _b.entryPoint;
+        outputFile.path = relativeFilePath;
+        if (entryPoint) {
+            // An entryPoint value indicates an initial file
+            initialFiles.push({
+                file: outputFile.path,
+                // The first part of the filename is the name of file (e.g., "polyfills" for "polyfills.7S5G3MDY.js")
+                name: (0, node_path_1.basename)(outputFile.path).split('.')[0],
+                extension: (0, node_path_1.extname)(outputFile.path),
+            });
+        }
+    }
+    return { ...result, initialFiles };
 }
 exports.bundle = bundle;
 async function logMessages(context, { errors, warnings }) {

package/src/builders/browser-esbuild/index.js

@@ -29,12 +29,15 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.buildEsbuildBrowser = void 0;
 const architect_1 = require("@angular-devkit/architect");
-const assert = __importStar(require("assert"));
-const fs = __importStar(require("fs/promises"));
-const path = __importStar(require("path"));
+const node_assert_1 = __importDefault(require("node:assert"));
+const fs = __importStar(require("node:fs/promises"));
+const path = __importStar(require("node:path"));
 const utils_1 = require("../../utils");
 const copy_assets_1 = require("../../utils/copy-assets");
 const error_1 = require("../../utils/error");
@@ -53,9 +56,10 @@ const watcher_1 = require("./watcher");
  * Represents the result of a single builder execute call.
  */
 class ExecutionResult {
-    constructor(success, codeRebuild, codeBundleCache) {
+    constructor(success, codeRebuild, globalStylesRebuild, codeBundleCache) {
         this.success = success;
         this.codeRebuild = codeRebuild;
+        this.globalStylesRebuild = globalStylesRebuild;
         this.codeBundleCache = codeBundleCache;
     }
     get output() {
@@ -68,6 +72,7 @@ class ExecutionResult {
         (_a = this.codeBundleCache) === null || _a === void 0 ? void 0 : _a.invalidate([...fileChanges.modified, ...fileChanges.removed]);
         return {
             codeRebuild: this.codeRebuild,
+            globalStylesRebuild: this.globalStylesRebuild,
             codeBundleCache: this.codeBundleCache,
             fileChanges,
         };
@@ -87,9 +92,9 @@ async function execute(options, context, rebuildState) {
         : undefined;
     const [codeResults, styleResults] = await Promise.all([
         // Execute esbuild to bundle the application code
-        (0, esbuild_1.bundle)((_b = rebuildState === null || rebuildState === void 0 ? void 0 : rebuildState.codeRebuild) !== null && _b !== void 0 ? _b : createCodeBundleOptions(options, target, codeBundleCache)),
+        (0, esbuild_1.bundle)(workspaceRoot, (_b = rebuildState === null || rebuildState === void 0 ? void 0 : rebuildState.codeRebuild) !== null && _b !== void 0 ? _b : createCodeBundleOptions(options, target, codeBundleCache)),
         // Execute esbuild to bundle the global stylesheets
-        bundleGlobalStylesheets(options, target),
+        (0, esbuild_1.bundle)(workspaceRoot, (_c = rebuildState === null || rebuildState === void 0 ? void 0 : rebuildState.globalStylesRebuild) !== null && _c !== void 0 ? _c : createGlobalStylesBundleOptions(options, target)),
     ]);
     // Log all warnings and errors generated during bundling
     await (0, esbuild_1.logMessages)(context, {
@@ -98,34 +103,17 @@ async function execute(options, context, rebuildState) {
     });
     // Return if the bundling failed to generate output files or there are errors
     if (!codeResults.outputFiles || codeResults.errors.length) {
-        return new ExecutionResult(false, rebuildState === null || rebuildState === void 0 ? void 0 : rebuildState.codeRebuild, codeBundleCache);
-    }
-    // Structure the code bundling output files
-    const initialFiles = [];
-    const outputFiles = [];
-    for (const outputFile of codeResults.outputFiles) {
-        // Entries in the metafile are relative to the `absWorkingDir` option which is set to the workspaceRoot
-        const relativeFilePath = path.relative(workspaceRoot, outputFile.path);
-        const entryPoint = (_d = (_c = codeResults.metafile) === null || _c === void 0 ? void 0 : _c.outputs[relativeFilePath]) === null || _d === void 0 ? void 0 : _d.entryPoint;
-        outputFile.path = relativeFilePath;
-        if (entryPoint) {
-            // An entryPoint value indicates an initial file
-            initialFiles.push({
-                file: outputFile.path,
-                // The first part of the filename is the name of file (e.g., "polyfills" for "polyfills.7S5G3MDY.js")
-                name: path.basename(outputFile.path).split('.')[0],
-                extension: path.extname(outputFile.path),
-            });
-        }
-        outputFiles.push(outputFile);
+        return new ExecutionResult(false, rebuildState === null || rebuildState === void 0 ? void 0 : rebuildState.codeRebuild, (_d = (styleResults.outputFiles && styleResults.rebuild)) !== null && _d !== void 0 ? _d : rebuildState === null || rebuildState === void 0 ? void 0 : rebuildState.globalStylesRebuild, codeBundleCache);
     }
-    // Add global stylesheets output files
-    outputFiles.push(...styleResults.outputFiles);
-    initialFiles.push(...styleResults.initialFiles);
     // Return if the global stylesheet bundling has errors
-    if (styleResults.errors.length) {
-        return new ExecutionResult(false, codeResults.rebuild, codeBundleCache);
+    if (!styleResults.outputFiles || styleResults.errors.length) {
+        return new ExecutionResult(false, codeResults.rebuild, rebuildState === null || rebuildState === void 0 ? void 0 : rebuildState.globalStylesRebuild, codeBundleCache);
     }
+    // Filter global stylesheet initial files
+    styleResults.initialFiles = styleResults.initialFiles.filter(({ name }) => { var _a; return (_a = options.globalStyles.find((style) => style.name === name)) === null || _a === void 0 ? void 0 : _a.initial; });
+    // Combine the bundling output files
+    const initialFiles = [...codeResults.initialFiles, ...styleResults.initialFiles];
+    const outputFiles = [...codeResults.outputFiles, ...styleResults.outputFiles];
     // Generate index HTML file
     if (indexHtmlOptions) {
         // Create an index HTML generator that reads from the in-memory output files
@@ -175,12 +163,12 @@ async function execute(options, context, rebuildState) {
         }
         catch (error) {
             context.logger.error(error instanceof Error ? error.message : `${error}`);
-            return new ExecutionResult(false, codeResults.rebuild, codeBundleCache);
+            return new ExecutionResult(false, codeResults.rebuild, styleResults.rebuild, codeBundleCache);
         }
     }
     const buildTime = Number(process.hrtime.bigint() - startTime) / 10 ** 9;
     context.logger.info(`Complete. [${buildTime.toFixed(3)} seconds]`);
-    return new ExecutionResult(true, codeResults.rebuild, codeBundleCache);
+    return new ExecutionResult(true, codeResults.rebuild, styleResults.rebuild, codeBundleCache);
 }
 function createOutputFileFromText(path, text) {
     return {
@@ -219,7 +207,6 @@ function createCodeBundleOptions(options, target, sourceFileCache) {
         conditions: ['es2020', 'es2015', 'module'],
         resolveExtensions: ['.ts', '.tsx', '.mjs', '.js'],
         logLevel: options.verbose ? 'debug' : 'silent',
-        metafile: true,
         minify: optimizationOptions.scripts,
         pure: ['forwardRef'],
         outdir: workspaceRoot,
@@ -262,53 +249,49 @@ function createCodeBundleOptions(options, target, sourceFileCache) {
         },
     };
 }
-async function bundleGlobalStylesheets(options, target) {
-    const { workspaceRoot, optimizationOptions, sourcemapOptions, outputNames, globalStyles, preserveSymlinks, externalDependencies, stylePreprocessorOptions, } = options;
-    const outputFiles = [];
-    const initialFiles = [];
-    const errors = [];
-    const warnings = [];
-    for (const { name, files, initial } of globalStyles) {
-        const virtualEntryData = files
-            .map((file) => `@import '${file.replace(/\\/g, '/')}';`)
-            .join('\n');
-        const sheetResult = await (0, stylesheets_1.bundleStylesheetText)(virtualEntryData, { virtualName: `angular:style/global;${name}`, resolvePath: workspaceRoot }, {
-            workspaceRoot,
-            optimization: !!optimizationOptions.styles.minify,
-            sourcemap: !!sourcemapOptions.styles && (sourcemapOptions.hidden ? 'external' : true),
-            outputNames: initial ? outputNames : { media: outputNames.media },
-            includePaths: stylePreprocessorOptions === null || stylePreprocessorOptions === void 0 ? void 0 : stylePreprocessorOptions.includePaths,
-            preserveSymlinks,
-            externalDependencies,
-            target,
-        });
-        errors.push(...sheetResult.errors);
-        warnings.push(...sheetResult.warnings);
-        if (!sheetResult.path) {
-            // Failed to process the stylesheet
-            assert.ok(sheetResult.errors.length, `Global stylesheet processing for '${name}' failed with no errors.`);
-            continue;
-        }
-        // The virtual stylesheets will be named `stdin` by esbuild. This must be replaced
-        // with the actual name of the global style and the leading directory separator must
-        // also be removed to make the path relative.
-        const sheetPath = sheetResult.path.replace('stdin', name);
-        let sheetContents = sheetResult.contents;
-        if (sheetResult.map) {
-            outputFiles.push(createOutputFileFromText(sheetPath + '.map', sheetResult.map));
-            sheetContents = sheetContents.replace('sourceMappingURL=stdin.css.map', `sourceMappingURL=${name}.css.map`);
-        }
-        outputFiles.push(createOutputFileFromText(sheetPath, sheetContents));
-        if (initial) {
-            initialFiles.push({
-                file: sheetPath,
-                name,
-                extension: '.css',
-            });
-        }
-        outputFiles.push(...sheetResult.resourceFiles);
+function createGlobalStylesBundleOptions(options, target) {
+    const { workspaceRoot, optimizationOptions, sourcemapOptions, outputNames, globalStyles, preserveSymlinks, externalDependencies, stylePreprocessorOptions, watch, } = options;
+    const buildOptions = (0, stylesheets_1.createStylesheetBundleOptions)({
+        workspaceRoot,
+        optimization: !!optimizationOptions.styles.minify,
+        sourcemap: !!sourcemapOptions.styles,
+        preserveSymlinks,
+        target,
+        externalDependencies,
+        outputNames,
+        includePaths: stylePreprocessorOptions === null || stylePreprocessorOptions === void 0 ? void 0 : stylePreprocessorOptions.includePaths,
+    });
+    buildOptions.incremental = watch;
+    const namespace = 'angular:styles/global';
+    buildOptions.entryPoints = {};
+    for (const { name } of globalStyles) {
+        buildOptions.entryPoints[name] = `${namespace};${name}`;
     }
-    return { outputFiles, initialFiles, errors, warnings };
+    buildOptions.plugins.unshift({
+        name: 'angular-global-styles',
+        setup(build) {
+            build.onResolve({ filter: /^angular:styles\/global;/ }, (args) => {
+                if (args.kind !== 'entry-point') {
+                    return null;
+                }
+                return {
+                    path: args.path.split(';', 2)[1],
+                    namespace,
+                };
+            });
+            build.onLoad({ filter: /./, namespace }, (args) => {
+                var _a;
+                const files = (_a = globalStyles.find(({ name }) => name === args.path)) === null || _a === void 0 ? void 0 : _a.files;
+                (0, node_assert_1.default)(files, `global style name should always be found [${args.path}]`);
+                return {
+                    contents: files.map((file) => `@import '${file.replace(/\\/g, '/')}';`).join('\n'),
+                    loader: 'css',
+                    resolveDir: workspaceRoot,
+                };
+            });
+        },
+    });
+    return buildOptions;
 }
 /**
  * Main execution function for the esbuild-based application builder.

package/src/builders/browser-esbuild/sass-plugin.js

@@ -18,6 +18,7 @@ function isSassException(error) {
 }
 function shutdownSassWorkerPool() {
     sassWorkerPool === null || sassWorkerPool === void 0 ? void 0 : sassWorkerPool.close();
+    sassWorkerPool = undefined;
 }
 exports.shutdownSassWorkerPool = shutdownSassWorkerPool;
 function createSassPlugin(options) {
@@ -26,7 +27,7 @@ function createSassPlugin(options) {
         setup(build) {
             build.onLoad({ filter: /\.s[ac]ss$/ }, async (args) => {
                 // Lazily load Sass when a Sass file is found
-                sassWorkerPool !== null && sassWorkerPool !== void 0 ? sassWorkerPool : (sassWorkerPool = new sass_service_1.SassWorkerImplementation());
+                sassWorkerPool !== null && sassWorkerPool !== void 0 ? sassWorkerPool : (sassWorkerPool = new sass_service_1.SassWorkerImplementation(true));
                 const warnings = [];
                 try {
                     const data = await (0, promises_1.readFile)(args.path, 'utf-8');
@@ -37,6 +38,48 @@ function createSassPlugin(options) {
                         sourceMap: options.sourcemap,
                         sourceMapIncludeSources: options.sourcemap,
                         quietDeps: true,
+                        importers: [
+                            {
+                                findFileUrl: async (url, { previousResolvedModules }) => {
+                                    let result = await build.resolve(url, {
+                                        kind: 'import-rule',
+                                        // This should ideally be the directory of the importer file from Sass
+                                        // but that is not currently available from the Sass importer API.
+                                        resolveDir: build.initialOptions.absWorkingDir,
+                                    });
+                                    // Workaround to support Yarn PnP without access to the importer file from Sass
+                                    if (!result.path && (previousResolvedModules === null || previousResolvedModules === void 0 ? void 0 : previousResolvedModules.size)) {
+                                        for (const previous of previousResolvedModules) {
+                                            result = await build.resolve(url, {
+                                                kind: 'import-rule',
+                                                resolveDir: previous,
+                                            });
+                                        }
+                                    }
+                                    // Check for package deep imports
+                                    if (!result.path) {
+                                        const parts = url.split('/');
+                                        const hasScope = parts.length > 2 && parts[0].startsWith('@');
+                                        if (hasScope || parts.length > 1) {
+                                            const [nameOrScope, nameOrFirstPath, ...pathPart] = parts;
+                                            const packageName = hasScope
+                                                ? `${nameOrScope}/${nameOrFirstPath}`
+                                                : nameOrScope;
+                                            const packageResult = await build.resolve(packageName + '/package.json', {
+                                                kind: 'import-rule',
+                                                // This should ideally be the directory of the importer file from Sass
+                                                // but that is not currently available from the Sass importer API.
+                                                resolveDir: build.initialOptions.absWorkingDir,
+                                            });
+                                            if (packageResult.path) {
+                                                return (0, node_url_1.pathToFileURL)((0, node_path_1.join)((0, node_path_1.dirname)(packageResult.path), !hasScope ? nameOrFirstPath : '', ...pathPart));
+                                            }
+                                        }
+                                    }
+                                    return result.path ? (0, node_url_1.pathToFileURL)(result.path) : null;
+                                },
+                            },
+                        ],
                         logger: {
                             warn: (text, { deprecation, span }) => {
                                 warnings.push({

package/src/builders/browser-esbuild/stylesheets.d.ts

@@ -5,7 +5,7 @@
  * 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 type { OutputFile } from 'esbuild';
+import type { BuildOptions, OutputFile } from 'esbuild';
 export interface BundleStylesheetOptions {
     workspaceRoot: string;
     optimization: boolean;
@@ -19,6 +19,9 @@ export interface BundleStylesheetOptions {
     externalDependencies?: string[];
     target: string[];
 }
+export declare function createStylesheetBundleOptions(options: BundleStylesheetOptions): BuildOptions & {
+    plugins: NonNullable<BuildOptions['plugins']>;
+};
 /**
  * Bundle a stylesheet that exists as a file on the filesystem.
  *

package/src/builders/browser-esbuild/stylesheets.js

@@ -30,23 +30,18 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.bundleStylesheetText = exports.bundleStylesheetFile = void 0;
+exports.bundleStylesheetText = exports.bundleStylesheetFile = exports.createStylesheetBundleOptions = void 0;
 const path = __importStar(require("path"));
 const css_resource_plugin_1 = require("./css-resource-plugin");
 const esbuild_1 = require("./esbuild");
 const sass_plugin_1 = require("./sass-plugin");
-async function bundleStylesheet(entry, options) {
-    var _a, _b, _c;
-    const loadPaths = (_a = options.includePaths) !== null && _a !== void 0 ? _a : [];
-    // Needed to resolve node packages.
-    loadPaths.push(path.join(options.workspaceRoot, 'node_modules'));
-    // Execute esbuild
-    const result = await (0, esbuild_1.bundle)({
-        ...entry,
+function createStylesheetBundleOptions(options) {
+    var _a, _b;
+    return {
         absWorkingDir: options.workspaceRoot,
         bundle: true,
-        entryNames: (_b = options.outputNames) === null || _b === void 0 ? void 0 : _b.bundles,
-        assetNames: (_c = options.outputNames) === null || _c === void 0 ? void 0 : _c.media,
+        entryNames: (_a = options.outputNames) === null || _a === void 0 ? void 0 : _a.bundles,
+        assetNames: (_b = options.outputNames) === null || _b === void 0 ? void 0 : _b.media,
         logLevel: 'silent',
         minify: options.optimization,
         sourcemap: options.sourcemap,
@@ -59,9 +54,17 @@ async function bundleStylesheet(entry, options) {
         conditions: ['style', 'sass'],
         mainFields: ['style', 'sass'],
         plugins: [
-            (0, sass_plugin_1.createSassPlugin)({ sourcemap: !!options.sourcemap, loadPaths }),
+            (0, sass_plugin_1.createSassPlugin)({ sourcemap: !!options.sourcemap, loadPaths: options.includePaths }),
             (0, css_resource_plugin_1.createCssResourcePlugin)(),
         ],
+    };
+}
+exports.createStylesheetBundleOptions = createStylesheetBundleOptions;
+async function bundleStylesheet(entry, options) {
+    // Execute esbuild
+    const result = await (0, esbuild_1.bundle)(options.workspaceRoot, {
+        ...createStylesheetBundleOptions(options),
+        ...entry,
     });
     // Extract the result of the bundling from the output files
     let contents = '';
@@ -70,7 +73,6 @@ async function bundleStylesheet(entry, options) {
     const resourceFiles = [];
     if (result.outputFiles) {
         for (const outputFile of result.outputFiles) {
-            outputFile.path = path.relative(options.workspaceRoot, outputFile.path);
             const filename = path.basename(outputFile.path);
             if (filename.endsWith('.css')) {
                 outputPath = outputFile.path;