@angular-devkit/build-angular 15.1.0-next.1 → 15.1.0-next.3

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@angular-devkit/build-angular",
-  "version": "15.1.0-next.1",
+  "version": "15.1.0-next.3",
   "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.1501.0-next.1",
-    "@angular-devkit/build-webpack": "0.1501.0-next.1",
-    "@angular-devkit/core": "15.1.0-next.1",
+    "@angular-devkit/architect": "0.1501.0-next.3",
+    "@angular-devkit/build-webpack": "0.1501.0-next.3",
+    "@angular-devkit/core": "15.1.0-next.3",
     "@babel/core": "7.20.5",
     "@babel/generator": "7.20.5",
     "@babel/helper-annotate-as-pure": "7.18.6",
@@ -20,18 +20,18 @@
     "@babel/runtime": "7.20.6",
     "@babel/template": "7.18.10",
     "@discoveryjs/json-ext": "0.5.7",
-    "@ngtools/webpack": "15.1.0-next.1",
+    "@ngtools/webpack": "15.1.0-next.3",
     "ansi-colors": "4.1.3",
     "autoprefixer": "10.4.13",
     "babel-loader": "9.1.0",
     "babel-plugin-istanbul": "6.1.1",
     "browserslist": "4.21.4",
-    "cacache": "17.0.2",
+    "cacache": "17.0.3",
     "chokidar": "3.5.3",
     "copy-webpack-plugin": "11.0.0",
     "critters": "0.0.16",
-    "css-loader": "6.7.2",
-    "esbuild-wasm": "0.15.16",
+    "css-loader": "6.7.3",
+    "esbuild-wasm": "0.16.6",
     "glob": "8.0.3",
     "https-proxy-agent": "5.0.1",
     "inquirer": "8.2.4",
@@ -41,22 +41,22 @@
     "less-loader": "11.1.0",
     "license-webpack-plugin": "4.0.2",
     "loader-utils": "3.2.1",
-    "magic-string": "0.26.7",
-    "mini-css-extract-plugin": "2.7.1",
+    "magic-string": "0.27.0",
+    "mini-css-extract-plugin": "2.7.2",
     "open": "8.4.0",
     "ora": "5.4.1",
     "parse5-html-rewriting-stream": "6.0.1",
     "piscina": "3.2.0",
-    "postcss": "8.4.19",
+    "postcss": "8.4.20",
     "postcss-loader": "7.0.2",
     "resolve-url-loader": "5.0.0",
     "rxjs": "6.6.7",
-    "sass": "1.56.1",
+    "sass": "1.56.2",
     "sass-loader": "13.2.0",
     "semver": "7.3.8",
     "source-map-loader": "4.0.1",
     "source-map-support": "0.5.21",
-    "terser": "5.16.0",
+    "terser": "5.16.1",
     "text-table": "0.2.0",
     "tree-kill": "1.2.2",
     "tslib": "2.4.1",
@@ -67,7 +67,7 @@
     "webpack-subresource-integrity": "5.1.0"
   },
   "optionalDependencies": {
-    "esbuild": "0.15.16"
+    "esbuild": "0.16.6"
   },
   "peerDependencies": {
     "@angular/compiler-cli": "^15.0.0-next",

package/src/babel/presets/application.d.ts

@@ -31,7 +31,6 @@ export interface ApplicationPresetOptions {
         jitMode: boolean;
         linkerPluginCreator: typeof import('@angular/compiler-cli/linker/babel').createEs2015LinkerPlugin;
     };
-    forcePresetEnv?: boolean;
     forceAsyncTransformation?: boolean;
     instrumentCode?: {
         includedBasePath: string;

package/src/babel/presets/application.js

@@ -29,10 +29,27 @@ 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 });
 const assert_1 = require("assert");
+const browserslist_1 = __importDefault(require("browserslist"));
 const fs = __importStar(require("fs"));
 const path = __importStar(require("path"));
+/**
+ * List of browsers which are affected by a WebKit bug where class field
+ * initializers might have incorrect variable scopes.
+ *
+ * See: https://github.com/angular/angular-cli/issues/24355#issuecomment-1333477033
+ * See: https://github.com/WebKit/WebKit/commit/e8788a34b3d5f5b4edd7ff6450b80936bff396f2
+ */
+const safariClassFieldScopeBugBrowsers = new Set((0, browserslist_1.default)([
+    // Safari <15 is technically not supported via https://angular.io/guide/browser-support,
+    // but we apply the workaround if forcibly selected.
+    'Safari <=15',
+    'iOS <=15',
+]));
 function createI18nDiagnostics(reporter) {
     const diagnostics = new (class {
         constructor() {
@@ -113,13 +130,24 @@ function default_1(api, options) {
             },
         }));
     }
-    if (options.forcePresetEnv) {
+    // Applications code ES version can be controlled using TypeScript's `target` option.
+    // However, this doesn't effect libraries and hence we use preset-env to downlevel ES features
+    // based on the supported browsers in browserslist.
+    if (options.supportedBrowsers) {
+        const includePlugins = [];
+        // If a Safari browser affected by the class field scope bug is selected, we
+        // downlevel class properties by ensuring the class properties Babel plugin
+        // is always included- regardless of the preset-env targets.
+        if (options.supportedBrowsers.some((b) => safariClassFieldScopeBugBrowsers.has(b))) {
+            includePlugins.push('@babel/plugin-proposal-class-properties', '@babel/plugin-proposal-private-methods');
+        }
         presets.push([
             require('@babel/preset-env').default,
             {
                 bugfixes: true,
                 modules: false,
                 targets: options.supportedBrowsers,
+                include: includePlugins,
                 exclude: ['transform-typeof-symbol'],
             },
         ]);

package/src/babel/webpack-loader.js

@@ -51,13 +51,12 @@ exports.default = (0, babel_loader_1.custom)(() => {
     });
     return {
         async customOptions(options, { source, map }) {
-            var _a, _b, _c;
+            var _a, _b;
             const { i18n, aot, optimize, instrumentCode, supportedBrowsers, ...rawOptions } = options;
             // Must process file if plugins are added
             let shouldProcess = Array.isArray(rawOptions.plugins) && rawOptions.plugins.length > 0;
             const customOptions = {
                 forceAsyncTransformation: false,
-                forcePresetEnv: false,
                 angularLinker: undefined,
                 i18n: undefined,
                 instrumentCode: undefined,
@@ -76,20 +75,15 @@ exports.default = (0, babel_loader_1.custom)(() => {
                 };
                 shouldProcess = true;
             }
-            // Analyze for ES target processing
-            if ((_a = customOptions.supportedBrowsers) === null || _a === void 0 ? void 0 : _a.length) {
-                // Applications code ES version can be controlled using TypeScript's `target` option.
-                // However, this doesn't effect libraries and hence we use preset-env to downlevel ES fetaures
-                // based on the supported browsers in browserlist.
-                customOptions.forcePresetEnv = true;
-            }
             // Application code (TS files) will only contain native async if target is ES2017+.
             // However, third-party libraries can regardless of the target option.
             // APF packages with code in [f]esm2015 directories is downlevelled to ES2015 and
             // will not have native async.
             customOptions.forceAsyncTransformation =
                 !/[\\/][_f]?esm2015[\\/]/.test(this.resourcePath) && source.includes('async');
-            shouldProcess || (shouldProcess = customOptions.forceAsyncTransformation || customOptions.forcePresetEnv || false);
+            shouldProcess || (shouldProcess = customOptions.forceAsyncTransformation ||
+                customOptions.supportedBrowsers !== undefined ||
+                false);
             // Analyze for i18n inlining
             if (i18n &&
                 !/[\\/]@angular[\\/](?:compiler|localize)/.test(this.resourcePath) &&
@@ -128,7 +122,7 @@ exports.default = (0, babel_loader_1.custom)(() => {
                     pureTopLevel: angularPackage,
                     // JavaScript modules that are marked as side effect free are considered to have
                     // no decorators that contain non-local effects.
-                    wrapDecorators: !!((_c = (_b = this._module) === null || _b === void 0 ? void 0 : _b.factoryMeta) === null || _c === void 0 ? void 0 : _c.sideEffectFree),
+                    wrapDecorators: !!((_b = (_a = this._module) === null || _a === void 0 ? void 0 : _a.factoryMeta) === null || _b === void 0 ? void 0 : _b.sideEffectFree),
                 };
                 shouldProcess = true;
             }

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

@@ -22,4 +22,6 @@ export interface CompilerPluginOptions {
     fileReplacements?: Record<string, string>;
     sourceFileCache?: SourceFileCache;
 }
-export declare function createCompilerPlugin(pluginOptions: CompilerPluginOptions, styleOptions: BundleStylesheetOptions): Plugin;
+export declare function createCompilerPlugin(pluginOptions: CompilerPluginOptions, styleOptions: BundleStylesheetOptions & {
+    inlineStyleLanguage: string;
+}): Plugin;

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

@@ -44,6 +44,10 @@ const angular_compilation_1 = require("./angular-compilation");
 const javascript_transformer_1 = require("./javascript-transformer");
 const profiling_1 = require("./profiling");
 const stylesheets_1 = require("./stylesheets");
+/**
+ * A counter for component styles used to generate unique build-time identifiers for each stylesheet.
+ */
+let componentStyleCounter = 0;
 /**
  * Converts TypeScript Diagnostic related information into an esbuild compatible note object.
  * Related information is a subset of a full TypeScript Diagnostic and also used for diagnostic
@@ -149,6 +153,10 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
                     // Skip keys that have been manually provided
                     continue;
                 }
+                if (key === 'ngDevMode') {
+                    // ngDevMode is already set based on the builder's script optimization option
+                    continue;
+                }
                 // esbuild requires values to be a string (actual strings need to be quoted).
                 // In this case, all provided values are booleans.
                 build.initialOptions.define[key] = value.toString();
@@ -213,18 +221,9 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
                         var _a, _b;
                         // Stylesheet file only exists for external stylesheets
                         const filename = stylesheetFile !== null && stylesheetFile !== void 0 ? stylesheetFile : containingFile;
-                        // Temporary workaround for lack of virtual file support in the Sass plugin.
-                        // External Sass stylesheets are transformed using the file instead of the already read content.
-                        let stylesheetResult;
-                        if (filename.endsWith('.scss') || filename.endsWith('.sass')) {
-                            stylesheetResult = await (0, stylesheets_1.bundleStylesheetFile)(filename, styleOptions);
-                        }
-                        else {
-                            stylesheetResult = await (0, stylesheets_1.bundleStylesheetText)(data, {
-                                resolvePath: path.dirname(filename),
-                                virtualName: filename,
-                            }, styleOptions);
-                        }
+                        const stylesheetResult = await (0, stylesheets_1.bundleComponentStylesheet)(
+                        // TODO: Evaluate usage of a fast hash instead
+                        `${++componentStyleCounter}`, styleOptions.inlineStyleLanguage, data, filename, !stylesheetFile, styleOptions);
                         const { contents, resourceFiles, errors, warnings } = stylesheetResult;
                         ((_a = result.errors) !== null && _a !== void 0 ? _a : (result.errors = [])).push(...errors);
                         ((_b = result.warnings) !== null && _b !== void 0 ? _b : (result.warnings = [])).push(...warnings);

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

@@ -20,10 +20,6 @@ const UNSUPPORTED_OPTIONS = [
     // The following two have no effect when localize is not enabled
     // 'i18nDuplicateTranslation',
     // 'i18nMissingTranslation',
-    // * Stylesheet preprocessor support
-    'inlineStyleLanguage',
-    // The following option has no effect until preprocessors are supported
-    // 'stylePreprocessorOptions',
     // * Deprecated
     'deployUrl',
     // * Always enabled with esbuild
@@ -49,10 +45,10 @@ function logExperimentalWarnings(options, context) {
         if (typeof value === 'object' && Object.keys(value).length === 0) {
             continue;
         }
-        if (unsupportedOption === 'inlineStyleLanguage' && value === 'css') {
-            continue;
-        }
         context.logger.warn(`The '${unsupportedOption}' option is currently unsupported by this experimental builder and will be ignored.`);
     }
+    if (options.inlineStyleLanguage === 'less') {
+        context.logger.warn('The less stylesheet preprocessor is not currently supported.');
+    }
 }
 exports.logExperimentalWarnings = logExperimentalWarnings;

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

@@ -180,7 +180,7 @@ function createOutputFileFromText(path, text) {
     };
 }
 function createCodeBundleOptions(options, target, sourceFileCache) {
-    const { workspaceRoot, entryPoints, optimizationOptions, sourcemapOptions, tsconfig, outputNames, fileReplacements, externalDependencies, preserveSymlinks, stylePreprocessorOptions, advancedOptimizations, } = options;
+    const { workspaceRoot, entryPoints, optimizationOptions, sourcemapOptions, tsconfig, outputNames, fileReplacements, externalDependencies, preserveSymlinks, stylePreprocessorOptions, advancedOptimizations, inlineStyleLanguage, } = options;
     return {
         absWorkingDir: workspaceRoot,
         bundle: true,
@@ -190,19 +190,7 @@ function createCodeBundleOptions(options, target, sourceFileCache) {
         entryNames: outputNames.bundles,
         assetNames: outputNames.media,
         target,
-        supported: {
-            // Native async/await is not supported with Zone.js. Disabling support here will cause
-            // esbuild to downlevel async/await and for await...of to a Zone.js supported form. However, esbuild
-            // does not currently support downleveling async generators. Instead babel is used within the JS/TS
-            // loader to perform the downlevel transformation.
-            // NOTE: If esbuild adds support in the future, the babel support for async generators can be disabled.
-            'async-await': false,
-            // V8 currently has a performance defect involving object spread operations that can cause signficant
-            // degradation in runtime performance. By not supporting the language feature here, a downlevel form
-            // will be used instead which provides a workaround for the performance issue.
-            // For more details: https://bugs.chromium.org/p/v8/issues/detail?id=11536
-            'object-rest-spread': false,
-        },
+        supported: getFeatureSupport(target),
         mainFields: ['es2020', 'browser', 'module', 'main'],
         conditions: ['es2020', 'es2015', 'module'],
         resolveExtensions: ['.ts', '.tsx', '.mjs', '.js'],
@@ -241,14 +229,69 @@ function createCodeBundleOptions(options, target, sourceFileCache) {
                 includePaths: stylePreprocessorOptions === null || stylePreprocessorOptions === void 0 ? void 0 : stylePreprocessorOptions.includePaths,
                 externalDependencies,
                 target,
+                inlineStyleLanguage,
             }),
         ],
         define: {
+            // Only set to false when script optimizations are enabled. It should not be set to true because
+            // Angular turns `ngDevMode` into an object for development debugging purposes when not defined
+            // which a constant true value would break.
             ...(optimizationOptions.scripts ? { 'ngDevMode': 'false' } : undefined),
+            // Only AOT mode is supported currently
             'ngJitMode': 'false',
         },
     };
 }
+/**
+ * Generates a syntax feature object map for Angular applications based on a list of targets.
+ * A full set of feature names can be found here: https://esbuild.github.io/api/#supported
+ * @param target An array of browser/engine targets in the format accepted by the esbuild `target` option.
+ * @returns An object that can be used with the esbuild build `supported` option.
+ */
+function getFeatureSupport(target) {
+    const supported = {
+        // Native async/await is not supported with Zone.js. Disabling support here will cause
+        // esbuild to downlevel async/await and for await...of to a Zone.js supported form. However, esbuild
+        // does not currently support downleveling async generators. Instead babel is used within the JS/TS
+        // loader to perform the downlevel transformation.
+        // NOTE: If esbuild adds support in the future, the babel support for async generators can be disabled.
+        'async-await': false,
+        // V8 currently has a performance defect involving object spread operations that can cause signficant
+        // degradation in runtime performance. By not supporting the language feature here, a downlevel form
+        // will be used instead which provides a workaround for the performance issue.
+        // For more details: https://bugs.chromium.org/p/v8/issues/detail?id=11536
+        'object-rest-spread': false,
+    };
+    // Detect Safari browser versions that have a class field behavior bug
+    // See: https://github.com/angular/angular-cli/issues/24355#issuecomment-1333477033
+    // See: https://github.com/WebKit/WebKit/commit/e8788a34b3d5f5b4edd7ff6450b80936bff396f2
+    let safariClassFieldScopeBug = false;
+    for (const browser of target) {
+        let majorVersion;
+        if (browser.startsWith('ios')) {
+            majorVersion = Number(browser.slice(3, 5));
+        }
+        else if (browser.startsWith('safari')) {
+            majorVersion = Number(browser.slice(6, 8));
+        }
+        else {
+            continue;
+        }
+        // Technically, 14.0 is not broken but rather does not have support. However, the behavior
+        // is identical since it would be set to false by esbuild if present as a target.
+        if (majorVersion === 14 || majorVersion === 15) {
+            safariClassFieldScopeBug = true;
+            break;
+        }
+    }
+    // If class field support cannot be used set to false; otherwise leave undefined to allow
+    // esbuild to use `target` to determine support.
+    if (safariClassFieldScopeBug) {
+        supported['class-field'] = false;
+        supported['class-static-field'] = false;
+    }
+    return supported;
+}
 function createGlobalStylesBundleOptions(options, target) {
     const { workspaceRoot, optimizationOptions, sourcemapOptions, outputNames, globalStyles, preserveSymlinks, externalDependencies, stylePreprocessorOptions, watch, } = options;
     const buildOptions = (0, stylesheets_1.createStylesheetBundleOptions)({

package/src/builders/browser-esbuild/javascript-transformer-worker.js

@@ -25,7 +25,7 @@ exports.default = transformJavaScript;
 let linkerPluginCreator;
 async function transformWithBabel({ filename, data, ...options }) {
     var _a, _b;
-    const forceAsyncTransformation = (_a = options.forceAsyncTransformation) !== null && _a !== void 0 ? _a : (!/[\\/][_f]?esm2015[\\/]/.test(filename) && /async\s+function\s*\*/.test(data));
+    const forceAsyncTransformation = (_a = options.forceAsyncTransformation) !== null && _a !== void 0 ? _a : (!/[\\/][_f]?esm2015[\\/]/.test(filename) && /async(?:\s+function)?\s*\*/.test(data));
     const shouldLink = !options.skipLinker && (await (0, webpack_loader_1.requiresLinking)(filename, data));
     const useInputSourcemap = options.sourcemap &&
         (!!options.thirdPartySourcemaps || !/[\\/]node_modules[\\/]/.test(filename));

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

@@ -22,7 +22,6 @@ export interface JavaScriptTransformerOptions {
  */
 export declare class JavaScriptTransformer {
     #private;
-    private options;
     constructor(options: JavaScriptTransformerOptions, maxThreads?: number);
     /**
      * Performs JavaScript transformations on a file from the filesystem.

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

@@ -20,7 +20,7 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
-var _JavaScriptTransformer_workerPool;
+var _JavaScriptTransformer_workerPool, _JavaScriptTransformer_commonOptions;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.JavaScriptTransformer = void 0;
 const piscina_1 = __importDefault(require("piscina"));
@@ -33,12 +33,19 @@ const piscina_1 = __importDefault(require("piscina"));
  */
 class JavaScriptTransformer {
     constructor(options, maxThreads) {
-        this.options = options;
         _JavaScriptTransformer_workerPool.set(this, void 0);
+        _JavaScriptTransformer_commonOptions.set(this, void 0);
         __classPrivateFieldSet(this, _JavaScriptTransformer_workerPool, new piscina_1.default({
             filename: require.resolve('./javascript-transformer-worker'),
             maxThreads,
         }), "f");
+        // Extract options to ensure only the named options are serialized and sent to the worker
+        const { sourcemap, thirdPartySourcemaps = false, advancedOptimizations = false } = options;
+        __classPrivateFieldSet(this, _JavaScriptTransformer_commonOptions, {
+            sourcemap,
+            thirdPartySourcemaps,
+            advancedOptimizations,
+        }, "f");
     }
     /**
      * Performs JavaScript transformations on a file from the filesystem.
@@ -51,7 +58,7 @@ class JavaScriptTransformer {
         // they may need linking. The data is also not yet available to perform most transformation checks.
         return __classPrivateFieldGet(this, _JavaScriptTransformer_workerPool, "f").run({
             filename,
-            ...this.options,
+            ...__classPrivateFieldGet(this, _JavaScriptTransformer_commonOptions, "f"),
         });
     }
     /**
@@ -66,10 +73,10 @@ class JavaScriptTransformer {
         // Perform a quick test to determine if the data needs any transformations.
         // This allows directly returning the data without the worker communication overhead.
         let forceAsyncTransformation;
-        if (skipLinker && !this.options.advancedOptimizations) {
+        if (skipLinker && !__classPrivateFieldGet(this, _JavaScriptTransformer_commonOptions, "f").advancedOptimizations) {
             // If the linker is being skipped and no optimizations are needed, only async transformation is left.
-            // This checks for async generator functions. All other async transformation is handled by esbuild.
-            forceAsyncTransformation = data.includes('async') && /async\s+function\s*\*/.test(data);
+            // This checks for async generator functions and class methods. All other async transformation is handled by esbuild.
+            forceAsyncTransformation = data.includes('async') && /async(?:\s+function)?\s*\*/.test(data);
             if (!forceAsyncTransformation) {
                 return Buffer.from(data, 'utf-8');
             }
@@ -80,7 +87,7 @@ class JavaScriptTransformer {
             // Send the async check result if present to avoid rechecking in the worker
             forceAsyncTransformation,
             skipLinker,
-            ...this.options,
+            ...__classPrivateFieldGet(this, _JavaScriptTransformer_commonOptions, "f"),
         });
     }
     /**
@@ -92,4 +99,4 @@ class JavaScriptTransformer {
     }
 }
 exports.JavaScriptTransformer = JavaScriptTransformer;
-_JavaScriptTransformer_workerPool = new WeakMap();
+_JavaScriptTransformer_workerPool = new WeakMap(), _JavaScriptTransformer_commonOptions = new WeakMap();

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

@@ -24,8 +24,9 @@ export declare function normalizeOptions(context: BuilderContext, projectName: s
     cacheOptions: import("../../utils/normalize-cache").NormalizedCachedOptions;
     crossOrigin: import("./schema").CrossOrigin | undefined;
     externalDependencies: string[] | undefined;
+    inlineStyleLanguage: string;
     poll: number | undefined;
-    preserveSymlinks: boolean | undefined;
+    preserveSymlinks: boolean;
     stylePreprocessorOptions: import("./schema").StylePreprocessorOptions | undefined;
     subresourceIntegrity: boolean | undefined;
     verbose: boolean | undefined;

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

@@ -122,7 +122,7 @@ async function normalizeOptions(context, projectName, options) {
         };
     }
     // Initial options to keep
-    const { baseHref, buildOptimizer, crossOrigin, externalDependencies, poll, preserveSymlinks, stylePreprocessorOptions, subresourceIntegrity, verbose, watch, } = options;
+    const { baseHref, buildOptimizer, crossOrigin, externalDependencies, inlineStyleLanguage = 'css', poll, preserveSymlinks, stylePreprocessorOptions, subresourceIntegrity, verbose, watch, } = options;
     // Return all the normalized options
     return {
         advancedOptimizations: buildOptimizer,
@@ -130,8 +130,10 @@ async function normalizeOptions(context, projectName, options) {
         cacheOptions,
         crossOrigin,
         externalDependencies,
+        inlineStyleLanguage,
         poll,
-        preserveSymlinks,
+        // If not explicitly set, default to the Node.js process argument
+        preserveSymlinks: preserveSymlinks !== null && preserveSymlinks !== void 0 ? preserveSymlinks : process.execArgv.includes('--preserve-symlinks'),
         stylePreprocessorOptions,
         subresourceIntegrity,
         verbose,

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

@@ -6,8 +6,10 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import type { Plugin } from 'esbuild';
-export declare function shutdownSassWorkerPool(): void;
-export declare function createSassPlugin(options: {
+export interface SassPluginOptions {
     sourcemap: boolean;
     loadPaths?: string[];
-}): Plugin;
+    inlineComponentData?: Record<string, string>;
+}
+export declare function shutdownSassWorkerPool(): void;
+export declare function createSassPlugin(options: SassPluginOptions): Plugin;

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

@@ -6,8 +6,12 @@
  * 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
  */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createSassPlugin = exports.shutdownSassWorkerPool = void 0;
+const node_assert_1 = __importDefault(require("node:assert"));
 const promises_1 = require("node:fs/promises");
 const node_path_1 = require("node:path");
 const node_url_1 = require("node:url");
@@ -46,86 +50,95 @@ function createSassPlugin(options) {
                 }
                 return result;
             };
+            build.onLoad({ filter: /^angular:styles\/component;s[ac]ss;/, namespace: 'angular:styles/component' }, async (args) => {
+                var _a;
+                const data = (_a = options.inlineComponentData) === null || _a === void 0 ? void 0 : _a[args.path];
+                (0, node_assert_1.default)(data, `component style name should always be found [${args.path}]`);
+                const [, language, , filePath] = args.path.split(';', 4);
+                const syntax = language === 'sass' ? 'indented' : 'scss';
+                return compileString(data, filePath, syntax, options, resolveUrl);
+            });
             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(true));
-                const warnings = [];
-                try {
-                    const data = await (0, promises_1.readFile)(args.path, 'utf-8');
-                    const { css, sourceMap, loadedUrls } = await sassWorkerPool.compileStringAsync(data, {
-                        url: (0, node_url_1.pathToFileURL)(args.path),
-                        style: 'expanded',
-                        loadPaths: options.loadPaths,
-                        sourceMap: options.sourcemap,
-                        sourceMapIncludeSources: options.sourcemap,
-                        quietDeps: true,
-                        importers: [
-                            {
-                                findFileUrl: async (url, { previousResolvedModules }) => {
-                                    const result = await resolveUrl(url, previousResolvedModules);
-                                    // Check for package deep imports
-                                    if (!result.path) {
-                                        const parts = url.split('/');
-                                        const hasScope = parts.length >= 2 && parts[0].startsWith('@');
-                                        const [nameOrScope, nameOrFirstPath, ...pathPart] = parts;
-                                        const packageName = hasScope
-                                            ? `${nameOrScope}/${nameOrFirstPath}`
-                                            : nameOrScope;
-                                        const packageResult = await resolveUrl(packageName + '/package.json', previousResolvedModules);
-                                        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({
-                                    text: deprecation ? 'Deprecation' : text,
-                                    location: span && {
-                                        file: span.url && (0, node_url_1.fileURLToPath)(span.url),
-                                        lineText: span.context,
-                                        // Sass line numbers are 0-based while esbuild's are 1-based
-                                        line: span.start.line + 1,
-                                        column: span.start.column,
-                                    },
-                                    notes: deprecation ? [{ text }] : undefined,
-                                });
-                            },
-                        },
-                    });
-                    return {
-                        loader: 'css',
-                        contents: sourceMap
-                            ? `${css}\n${sourceMapToUrlComment(sourceMap, (0, node_path_1.dirname)(args.path))}`
-                            : css,
-                        watchFiles: loadedUrls.map((url) => (0, node_url_1.fileURLToPath)(url)),
-                        warnings,
-                    };
-                }
-                catch (error) {
-                    if (isSassException(error)) {
-                        const file = error.span.url ? (0, node_url_1.fileURLToPath)(error.span.url) : undefined;
-                        return {
-                            loader: 'css',
-                            errors: [
-                                {
-                                    text: error.message,
-                                },
-                            ],
-                            warnings,
-                            watchFiles: file ? [file] : undefined,
-                        };
-                    }
-                    throw error;
-                }
+                const data = await (0, promises_1.readFile)(args.path, 'utf-8');
+                const syntax = (0, node_path_1.extname)(args.path).toLowerCase() === '.sass' ? 'indented' : 'scss';
+                return compileString(data, args.path, syntax, options, resolveUrl);
             });
         },
     };
 }
 exports.createSassPlugin = createSassPlugin;
+async function compileString(data, filePath, syntax, options, resolveUrl) {
+    // Lazily load Sass when a Sass file is found
+    sassWorkerPool !== null && sassWorkerPool !== void 0 ? sassWorkerPool : (sassWorkerPool = new sass_service_1.SassWorkerImplementation(true));
+    const warnings = [];
+    try {
+        const { css, sourceMap, loadedUrls } = await sassWorkerPool.compileStringAsync(data, {
+            url: (0, node_url_1.pathToFileURL)(filePath),
+            style: 'expanded',
+            syntax,
+            loadPaths: options.loadPaths,
+            sourceMap: options.sourcemap,
+            sourceMapIncludeSources: options.sourcemap,
+            quietDeps: true,
+            importers: [
+                {
+                    findFileUrl: async (url, { previousResolvedModules }) => {
+                        const result = await resolveUrl(url, previousResolvedModules);
+                        // Check for package deep imports
+                        if (!result.path) {
+                            const parts = url.split('/');
+                            const hasScope = parts.length >= 2 && parts[0].startsWith('@');
+                            const [nameOrScope, nameOrFirstPath, ...pathPart] = parts;
+                            const packageName = hasScope ? `${nameOrScope}/${nameOrFirstPath}` : nameOrScope;
+                            const packageResult = await resolveUrl(packageName + '/package.json', previousResolvedModules);
+                            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({
+                        text: deprecation ? 'Deprecation' : text,
+                        location: span && {
+                            file: span.url && (0, node_url_1.fileURLToPath)(span.url),
+                            lineText: span.context,
+                            // Sass line numbers are 0-based while esbuild's are 1-based
+                            line: span.start.line + 1,
+                            column: span.start.column,
+                        },
+                        notes: deprecation ? [{ text }] : undefined,
+                    });
+                },
+            },
+        });
+        return {
+            loader: 'css',
+            contents: sourceMap ? `${css}\n${sourceMapToUrlComment(sourceMap, (0, node_path_1.dirname)(filePath))}` : css,
+            watchFiles: loadedUrls.map((url) => (0, node_url_1.fileURLToPath)(url)),
+            warnings,
+        };
+    }
+    catch (error) {
+        if (isSassException(error)) {
+            const file = error.span.url ? (0, node_url_1.fileURLToPath)(error.span.url) : undefined;
+            return {
+                loader: 'css',
+                errors: [
+                    {
+                        text: error.message,
+                    },
+                ],
+                warnings,
+                watchFiles: file ? [file] : undefined,
+            };
+        }
+        throw error;
+    }
+}
 function sourceMapToUrlComment(sourceMap, root) {
     // Remove `file` protocol from all sourcemap sources and adjust to be relative to the input file.
     // This allows esbuild to correctly process the paths.

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

@@ -19,36 +19,24 @@ export interface BundleStylesheetOptions {
     externalDependencies?: string[];
     target: string[];
 }
-export declare function createStylesheetBundleOptions(options: BundleStylesheetOptions): BuildOptions & {
+export declare function createStylesheetBundleOptions(options: BundleStylesheetOptions, inlineComponentData?: Record<string, string>): BuildOptions & {
     plugins: NonNullable<BuildOptions['plugins']>;
 };
 /**
- * Bundle a stylesheet that exists as a file on the filesystem.
+ * Bundles a component stylesheet. The stylesheet can be either an inline stylesheet that
+ * is contained within the Component's metadata definition or an external file referenced
+ * from the Component's metadata definition.
  *
- * @param filename The path to the file to bundle.
- * @param options The stylesheet bundling options to use.
- * @returns The bundle result object.
+ * @param identifier A unique string identifier for the component stylesheet.
+ * @param language The language of the stylesheet such as `css` or `scss`.
+ * @param data The string content of the stylesheet.
+ * @param filename The filename representing the source of the stylesheet content.
+ * @param inline If true, the stylesheet source is within the component metadata;
+ * if false, the source is a stylesheet file.
+ * @param options An object containing the stylesheet bundling options.
+ * @returns An object containing the output of the bundling operation.
  */
-export declare function bundleStylesheetFile(filename: string, options: BundleStylesheetOptions): Promise<{
-    errors: import("esbuild").Message[];
-    warnings: import("esbuild").Message[];
-    contents: string;
-    map: string | undefined;
-    path: string | undefined;
-    resourceFiles: OutputFile[];
-}>;
-/**
- * Bundle stylesheet text data from a string.
- *
- * @param data The string content of a stylesheet to bundle.
- * @param dataOptions The options to use to resolve references and name output of the stylesheet data.
- * @param bundleOptions  The stylesheet bundling options to use.
- * @returns The bundle result object.
- */
-export declare function bundleStylesheetText(data: string, dataOptions: {
-    resolvePath: string;
-    virtualName?: string;
-}, bundleOptions: BundleStylesheetOptions): Promise<{
+export declare function bundleComponentStylesheet(identifier: string, language: string, data: string, filename: string, inline: boolean, options: BundleStylesheetOptions): Promise<{
     errors: import("esbuild").Message[];
     warnings: import("esbuild").Message[];
     contents: string;

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

@@ -30,12 +30,12 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.bundleStylesheetText = exports.bundleStylesheetFile = exports.createStylesheetBundleOptions = void 0;
-const path = __importStar(require("path"));
+exports.bundleComponentStylesheet = exports.createStylesheetBundleOptions = void 0;
+const path = __importStar(require("node:path"));
 const css_resource_plugin_1 = require("./css-resource-plugin");
 const esbuild_1 = require("./esbuild");
 const sass_plugin_1 = require("./sass-plugin");
-function createStylesheetBundleOptions(options) {
+function createStylesheetBundleOptions(options, inlineComponentData) {
     var _a, _b;
     return {
         absWorkingDir: options.workspaceRoot,
@@ -54,18 +54,65 @@ function createStylesheetBundleOptions(options) {
         conditions: ['style', 'sass'],
         mainFields: ['style', 'sass'],
         plugins: [
-            (0, sass_plugin_1.createSassPlugin)({ sourcemap: !!options.sourcemap, loadPaths: options.includePaths }),
+            (0, sass_plugin_1.createSassPlugin)({
+                sourcemap: !!options.sourcemap,
+                loadPaths: options.includePaths,
+                inlineComponentData,
+            }),
             (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,
+/**
+ * Bundles a component stylesheet. The stylesheet can be either an inline stylesheet that
+ * is contained within the Component's metadata definition or an external file referenced
+ * from the Component's metadata definition.
+ *
+ * @param identifier A unique string identifier for the component stylesheet.
+ * @param language The language of the stylesheet such as `css` or `scss`.
+ * @param data The string content of the stylesheet.
+ * @param filename The filename representing the source of the stylesheet content.
+ * @param inline If true, the stylesheet source is within the component metadata;
+ * if false, the source is a stylesheet file.
+ * @param options An object containing the stylesheet bundling options.
+ * @returns An object containing the output of the bundling operation.
+ */
+async function bundleComponentStylesheet(identifier, language, data, filename, inline, options) {
+    const namespace = 'angular:styles/component';
+    const entry = [namespace, language, identifier, filename].join(';');
+    const buildOptions = createStylesheetBundleOptions(options, { [entry]: data });
+    buildOptions.entryPoints = [entry];
+    buildOptions.plugins.push({
+        name: 'angular-component-styles',
+        setup(build) {
+            build.onResolve({ filter: /^angular:styles\/component;/ }, (args) => {
+                if (args.kind !== 'entry-point') {
+                    return null;
+                }
+                if (inline) {
+                    return {
+                        path: args.path,
+                        namespace,
+                    };
+                }
+                else {
+                    return {
+                        path: filename,
+                    };
+                }
+            });
+            build.onLoad({ filter: /^angular:styles\/component;css;/, namespace }, async () => {
+                return {
+                    contents: data,
+                    loader: 'css',
+                    resolveDir: path.dirname(filename),
+                };
+            });
+        },
     });
+    // Execute esbuild
+    const result = await (0, esbuild_1.bundle)(options.workspaceRoot, buildOptions);
     // Extract the result of the bundling from the output files
     let contents = '';
     let map;
@@ -96,34 +143,4 @@ async function bundleStylesheet(entry, options) {
         resourceFiles,
     };
 }
-/**
- * Bundle a stylesheet that exists as a file on the filesystem.
- *
- * @param filename The path to the file to bundle.
- * @param options The stylesheet bundling options to use.
- * @returns The bundle result object.
- */
-async function bundleStylesheetFile(filename, options) {
-    return bundleStylesheet({ entryPoints: [filename] }, options);
-}
-exports.bundleStylesheetFile = bundleStylesheetFile;
-/**
- * Bundle stylesheet text data from a string.
- *
- * @param data The string content of a stylesheet to bundle.
- * @param dataOptions The options to use to resolve references and name output of the stylesheet data.
- * @param bundleOptions  The stylesheet bundling options to use.
- * @returns The bundle result object.
- */
-async function bundleStylesheetText(data, dataOptions, bundleOptions) {
-    const result = bundleStylesheet({
-        stdin: {
-            contents: data,
-            sourcefile: dataOptions.virtualName,
-            resolveDir: dataOptions.resolvePath,
-            loader: 'css',
-        },
-    }, bundleOptions);
-    return result;
-}
-exports.bundleStylesheetText = bundleStylesheetText;
+exports.bundleComponentStylesheet = bundleComponentStylesheet;

package/src/builders/browser-esbuild/worker-angular-compilation.js

@@ -0,0 +1,59 @@
+"use strict";
+// /**
+//  * @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 type ng from '@angular/compiler-cli';
+// import { Worker } from 'node:worker_threads';
+// import { AngularHostOptions } from './angular-host';
+// interface Message {
+//   id: number;
+// }
+// interface InitializeRequest extends Message {
+//   tsconfig: string;
+//   tsCallbackId: number;
+//   tcoCallbackId?: number;
+// }
+// // eslint-disable-next-line @typescript-eslint/no-explicit-any
+// type ResponseCallback = (...args: any[]) => void;
+// let callbackIds = 0;
+// export class WorkerAngularCompilation {
+//   #worker: Worker;
+//   #callbacks = new Map<number, ResponseCallback>();
+//   constructor() {
+//     this.#worker = new Worker(require.resolve('./compilation-worker'));
+//   }
+//   async initialize(
+//     tsconfig: string,
+//     hostOptions: AngularHostOptions,
+//     transformCompilerOptions?: (compilerOptions: ng.CompilerOptions) => ng.CompilerOptions,
+//   ): Promise<{ compilerOptions: ng.CompilerOptions }> {
+//     const request: InitializeRequest = {
+//       id: ++callbackIds,
+//       tsconfig,
+//       tsCallbackId: ++callbackIds,
+//     };
+//     this.#callbacks.set(request.tsCallbackId, () => {
+//       hostOptions.transformStylesheet();
+//     });
+//     if (transformCompilerOptions) {
+//       request.tcoCallbackId = ++callbackIds;
+//       this.#callbacks.set(request.tcoCallbackId, (id: number, compilerOptions) => {
+//         try {
+//             transformCompilerOptions(compilerOptions);
+//         } catch (e) {
+//         }
+//       });
+//     }
+//     const result = new Promise<{ compilerOptions: ng.CompilerOptions }>((resolve, reject) => {
+//         this.#callbacks.set(request.id, () => {
+//             resolve({});
+//         });
+//     });
+//     this.#worker.postMessage(request);
+//     return result;
+//   }
+// }

package/src/builders/karma/index.js

@@ -149,7 +149,9 @@ function execute(options, context, transforms = {}) {
         });
         const karmaStart = karmaServer.start();
         // Cleanup, signal Karma to exit.
-        return () => karmaStart.then(() => karmaServer.stop());
+        return () => {
+            void karmaStart.then(() => karmaServer.stop());
+        };
     })), (0, operators_1.defaultIfEmpty)({ success: false }));
 }
 exports.execute = execute;

package/src/utils/esbuild-targets.js

@@ -15,9 +15,18 @@ exports.transformSupportedBrowsersToTargets = void 0;
 function transformSupportedBrowsersToTargets(supportedBrowsers) {
     const transformed = [];
     // https://esbuild.github.io/api/#target
-    const esBuildSupportedBrowsers = new Set(['safari', 'firefox', 'edge', 'chrome', 'ios', 'node']);
+    const esBuildSupportedBrowsers = new Set([
+        'chrome',
+        'edge',
+        'firefox',
+        'ie',
+        'ios',
+        'node',
+        'opera',
+        'safari',
+    ]);
     for (const browser of supportedBrowsers) {
-        let [browserName, version] = browser.split(' ');
+        let [browserName, version] = browser.toLowerCase().split(' ');
         // browserslist uses the name `ios_saf` for iOS Safari whereas esbuild uses `ios`
         if (browserName === 'ios_saf') {
             browserName = 'ios';
@@ -31,6 +40,12 @@ function transformSupportedBrowsersToTargets(supportedBrowsers) {
                 // a Technology Preview (TP) of Safari is assumed to support all currently known features.
                 version = '999';
             }
+            else if (!version.includes('.')) {
+                // A lone major version is considered by esbuild to include all minor versions. However,
+                // browserslist does not and is also inconsistent in its `.0` version naming. For example,
+                // Safari 15.0 is named `safari 15` but Safari 16.0 is named `safari 16.0`.
+                version += '.0';
+            }
             transformed.push(browserName + version);
         }
     }

package/src/utils/i18n-inlining.js

@@ -52,7 +52,7 @@ function emittedFilesToInlineOptions(emittedFiles, scriptsEntryPointName, emitte
             code: fs.readFileSync(originalPath, 'utf8'),
             outputPath,
             missingTranslation,
-            setLocale: emittedFile.name === 'main' || emittedFile.name === 'vendor',
+            setLocale: emittedFile.name === 'main',
         };
         originalFiles.push(originalPath);
         try {

package/src/utils/index-file/augment-index-html.js

@@ -125,7 +125,7 @@ async function augmentIndexHtml(params) {
         }
         rewriter.emitEndTag(tag);
     });
-    const content = await transformedContent;
+    const content = await transformedContent();
     return {
         content: linkTags.length || scriptTags.length
             ? // In case no body/head tags are not present (dotnet partial templates)

package/src/utils/index-file/html-rewriting-stream.d.ts

@@ -7,5 +7,5 @@
  */
 export declare function htmlRewritingStream(content: string): Promise<{
     rewriter: import('parse5-html-rewriting-stream');
-    transformedContent: Promise<string>;
+    transformedContent: () => Promise<string>;
 }>;

package/src/utils/index-file/html-rewriting-stream.js

@@ -37,26 +37,30 @@ async function htmlRewritingStream(content) {
     const rewriter = new (await Promise.resolve().then(() => __importStar(require('parse5-html-rewriting-stream')))).default();
     return {
         rewriter,
-        transformedContent: new Promise((resolve) => {
-            new stream_1.Readable({
-                encoding: 'utf8',
-                read() {
-                    this.push(Buffer.from(content));
-                    this.push(null);
-                },
-            })
-                .pipe(rewriter)
-                .pipe(new stream_1.Writable({
-                write(chunk, encoding, callback) {
-                    chunks.push(typeof chunk === 'string' ? Buffer.from(chunk, encoding) : chunk);
-                    callback();
-                },
-                final(callback) {
-                    callback();
-                    resolve(Buffer.concat(chunks).toString());
-                },
-            }));
-        }),
+        transformedContent: () => {
+            return new Promise((resolve) => {
+                new stream_1.Readable({
+                    encoding: 'utf8',
+                    read() {
+                        this.push(Buffer.from(content));
+                        this.push(null);
+                    },
+                })
+                    .pipe(rewriter)
+                    .pipe(new stream_1.Writable({
+                    write(chunk, encoding, callback) {
+                        chunks.push(typeof chunk === 'string'
+                            ? Buffer.from(chunk, encoding)
+                            : chunk);
+                        callback();
+                    },
+                    final(callback) {
+                        callback();
+                        resolve(Buffer.concat(chunks).toString());
+                    },
+                }));
+            });
+        },
     };
 }
 exports.htmlRewritingStream = htmlRewritingStream;

package/src/utils/index-file/inline-fonts.js

@@ -63,7 +63,7 @@ class InlineFontsProcessor {
         const hrefList = [];
         const existingPreconnect = new Set();
         // Collector link tags with href
-        const { rewriter: collectorStream } = await (0, html_rewriting_stream_1.htmlRewritingStream)(content);
+        const { rewriter: collectorStream, transformedContent: initCollectorStream } = await (0, html_rewriting_stream_1.htmlRewritingStream)(content);
         collectorStream.on('startTag', (tag) => {
             const { tagName, attrs } = tag;
             if (tagName !== 'link') {
@@ -95,6 +95,10 @@ class InlineFontsProcessor {
                 }
             }
         });
+        initCollectorStream().catch(() => {
+            // We don't really care about any errors here because it just initializes
+            // the rewriting stream, as we are waiting for `finish` below.
+        });
         await new Promise((resolve) => collectorStream.on('finish', resolve));
         // Download stylesheets
         const hrefsContent = new Map();
@@ -146,7 +150,7 @@ class InlineFontsProcessor {
                     break;
             }
         });
-        return transformedContent;
+        return transformedContent();
     }
     async getResponse(url) {
         var _a;

package/src/utils/process-bundle.js

@@ -211,7 +211,7 @@ async function inlineLocalesDirect(ast, options) {
         }
         let outputSource = content;
         if (options.setLocale) {
-            const setLocaleText = `var $localize=Object.assign(void 0===$localize?{}:$localize,{locale:"${locale}"});\n`;
+            const setLocaleText = `globalThis.$localize=Object.assign(globalThis.$localize || {},{locale:"${locale}"});\n`;
             // If locale data is provided, load it and prepend to file
             let localeDataSource;
             const localeDataPath = i18n.locales[locale] && i18n.locales[locale].dataPath;

package/src/webpack/configs/styles.js

@@ -320,6 +320,7 @@ function getSassLoaderOptions(root, implementation, includePaths, indentedSyntax
                 quietDeps: !verbose,
                 verbose,
                 syntax: indentedSyntax ? 'indented' : 'scss',
+                sourceMapIncludeSources: true,
             }),
         }
         : {

package/src/webpack/plugins/javascript-optimizer-worker.js

@@ -90,8 +90,9 @@ async function optimizeWithTerser(name, code, sourcemaps, advanced) {
             passes: advanced ? 2 : 1,
             pure_getters: advanced,
         },
-        // terser only supports up to ES2020
-        ecma: 2020,
+        // Set to ES2015 to prevent higher level features from being introduced when browserslist
+        // contains older browsers. The build system requires browsers to support ES2015 at a minimum.
+        ecma: 2015,
         // esbuild in the first pass is used to minify identifiers instead of mangle here
         mangle: false,
         // esbuild in the first pass is used to minify function names

package/src/webpack/plugins/styles-webpack-plugin.js

@@ -24,8 +24,6 @@ class StylesWebpackPlugin {
     }
     apply(compiler) {
         const { entryPoints, preserveSymlinks, root } = this.options;
-        const webpackOptions = compiler.options;
-        const entry = typeof webpackOptions.entry === 'function' ? webpackOptions.entry() : webpackOptions.entry;
         const resolver = compiler.resolverFactory.get('global-styles', {
             conditionNames: ['sass', 'less', 'style'],
             mainFields: ['sass', 'less', 'style', 'main', '...'],
@@ -36,33 +34,37 @@ class StylesWebpackPlugin {
             symlinks: !preserveSymlinks,
             fileSystem: compiler.inputFileSystem,
         });
-        webpackOptions.entry = async () => {
-            var _a, _b;
-            var _c;
-            const entrypoints = await entry;
-            for (const [bundleName, paths] of Object.entries(entryPoints)) {
-                (_a = entrypoints[bundleName]) !== null && _a !== void 0 ? _a : (entrypoints[bundleName] = {});
-                const entryImport = ((_b = (_c = entrypoints[bundleName]).import) !== null && _b !== void 0 ? _b : (_c.import = []));
-                for (const path of paths) {
-                    try {
-                        const resolvedPath = resolver.resolveSync({}, root, path);
-                        if (resolvedPath) {
-                            entryImport.push(`${resolvedPath}?ngGlobalStyle`);
+        const webpackOptions = compiler.options;
+        compiler.hooks.environment.tap(PLUGIN_NAME, () => {
+            const entry = typeof webpackOptions.entry === 'function' ? webpackOptions.entry() : webpackOptions.entry;
+            webpackOptions.entry = async () => {
+                var _a, _b;
+                var _c;
+                const entrypoints = await entry;
+                for (const [bundleName, paths] of Object.entries(entryPoints)) {
+                    (_a = entrypoints[bundleName]) !== null && _a !== void 0 ? _a : (entrypoints[bundleName] = {});
+                    const entryImport = ((_b = (_c = entrypoints[bundleName]).import) !== null && _b !== void 0 ? _b : (_c.import = []));
+                    for (const path of paths) {
+                        try {
+                            const resolvedPath = resolver.resolveSync({}, root, path);
+                            if (resolvedPath) {
+                                entryImport.push(`${resolvedPath}?ngGlobalStyle`);
+                            }
+                            else {
+                                (0, assert_1.default)(this.compilation, 'Compilation cannot be undefined.');
+                                (0, webpack_diagnostics_1.addError)(this.compilation, `Cannot resolve '${path}'.`);
+                            }
                         }
-                        else {
+                        catch (error) {
                             (0, assert_1.default)(this.compilation, 'Compilation cannot be undefined.');
-                            (0, webpack_diagnostics_1.addError)(this.compilation, `Cannot resolve '${path}'.`);
+                            (0, error_1.assertIsError)(error);
+                            (0, webpack_diagnostics_1.addError)(this.compilation, error.message);
                         }
                     }
-                    catch (error) {
-                        (0, assert_1.default)(this.compilation, 'Compilation cannot be undefined.');
-                        (0, error_1.assertIsError)(error);
-                        (0, webpack_diagnostics_1.addError)(this.compilation, error.message);
-                    }
                 }
-            }
-            return entrypoints;
-        };
+                return entrypoints;
+            };
+        });
         compiler.hooks.thisCompilation.tap(PLUGIN_NAME, (compilation) => {
             this.compilation = compilation;
         });