@angular-devkit/build-angular 12.1.0 → 12.1.4

package/package.json

@@ -1,18 +1,19 @@
 {
   "name": "@angular-devkit/build-angular",
-  "version": "12.1.0",
+  "version": "12.1.4",
   "description": "Angular Webpack Build Facade",
   "main": "src/index.js",
   "typings": "src/index.d.ts",
   "builders": "builders.json",
   "dependencies": {
-    "@angular-devkit/architect": "0.1201.0",
-    "@angular-devkit/build-optimizer": "0.1201.0",
-    "@angular-devkit/build-webpack": "0.1201.0",
-    "@angular-devkit/core": "12.1.0",
+    "@angular-devkit/architect": "0.1201.4",
+    "@angular-devkit/build-optimizer": "0.1201.4",
+    "@angular-devkit/build-webpack": "0.1201.4",
+    "@angular-devkit/core": "12.1.4",
     "@babel/core": "7.14.6",
     "@babel/generator": "7.14.5",
     "@babel/helper-annotate-as-pure": "7.14.5",
+    "@babel/plugin-proposal-async-generator-functions": "7.14.7",
     "@babel/plugin-transform-async-to-generator": "7.14.5",
     "@babel/plugin-transform-runtime": "7.14.5",
     "@babel/preset-env": "7.14.7",
@@ -20,7 +21,7 @@
     "@babel/template": "7.14.5",
     "@discoveryjs/json-ext": "0.5.3",
     "@jsdevtools/coverage-istanbul-loader": "3.0.5",
-    "@ngtools/webpack": "12.1.0",
+    "@ngtools/webpack": "12.1.4",
     "ansi-colors": "4.1.1",
     "babel-loader": "8.2.2",
     "browserslist": "^4.9.1",
@@ -40,9 +41,9 @@
     "karma-source-map-support": "1.4.0",
     "less": "4.1.1",
     "less-loader": "10.0.0",
-    "license-webpack-plugin": "2.3.19",
+    "license-webpack-plugin": "2.3.20",
     "loader-utils": "2.0.0",
-    "mini-css-extract-plugin": "1.6.0",
+    "mini-css-extract-plugin": "1.6.2",
     "minimatch": "3.0.4",
     "open": "8.2.1",
     "ora": "5.4.1",
@@ -69,7 +70,7 @@
     "text-table": "0.2.0",
     "tree-kill": "1.2.2",
     "tslib": "2.3.0",
-    "webpack": "5.40.0",
+    "webpack": "5.44.0",
     "webpack-dev-middleware": "5.0.0",
     "webpack-dev-server": "3.11.2",
     "webpack-merge": "5.8.0",

package/src/app-shell/index.js

@@ -130,10 +130,9 @@ async function _appShellBuilder(options, context) {
     });
     let spinner;
     try {
-        // Using `.result` instead of `.output` causes Webpack FS cache not to be created.
         const [browserResult, serverResult] = await Promise.all([
-            browserTargetRun.output.toPromise(),
-            serverTargetRun.output.toPromise(),
+            browserTargetRun.result,
+            serverTargetRun.result,
         ]);
         if (browserResult.success === false || browserResult.baseOutputPath === undefined) {
             return browserResult;
@@ -152,8 +151,7 @@ async function _appShellBuilder(options, context) {
         return { success: false, error: err.message };
     }
     finally {
-        // workaround for [tsetse] All Promises in async functions must either be awaited or used in an expression.
-        const _ = Promise.all([browserTargetRun.stop(), serverTargetRun.stop()]);
+        await Promise.all([browserTargetRun.stop(), serverTargetRun.stop()]);
     }
 }
 exports.default = architect_1.createBuilder(_appShellBuilder);

package/src/babel/plugins/adjust-static-class-members.js

@@ -57,6 +57,27 @@ function getKeywords() {
     return ['class'];
 }
 exports.getKeywords = getKeywords;
+/**
+ * Determines whether a property and its initializer value can be safely wrapped in a pure
+ * annotated IIFE. Values that may cause side effects are not considered safe to wrap.
+ * Wrapping such values may cause runtime errors and/or incorrect runtime behavior.
+ *
+ * @param propertyName The name of the property to analyze.
+ * @param assignmentValue The initializer value that will be assigned to the property.
+ * @returns If the property can be safely wrapped, then true; otherwise, false.
+ */
+function canWrapProperty(propertyName, assignmentValue) {
+    if (angularStaticsToWrap.has(propertyName)) {
+        return true;
+    }
+    const { leadingComments } = assignmentValue.node;
+    if (leadingComments === null || leadingComments === void 0 ? void 0 : leadingComments.some(
+    // `@pureOrBreakMyCode` is used by closure and is present in Angular code
+    ({ value }) => value.includes('#__PURE__') || value.includes('@pureOrBreakMyCode'))) {
+        return true;
+    }
+    return assignmentValue.isPure();
+}
 /**
  * Analyze the sibling nodes of a class to determine if any downlevel elements should be
  * wrapped in a pure annotated IIFE. Also determines if any elements have potential side
@@ -130,7 +151,7 @@ function analyzeClassSiblings(origin, classIdentifier, allowWrappingDecorators)
             nextStatement.remove();
             --i;
         }
-        else if (angularStaticsToWrap.has(propertyName) || assignmentValue.isPure()) {
+        else if (canWrapProperty(propertyName, assignmentValue)) {
             wrapStatementPaths.push(nextStatement);
         }
         else {

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

@@ -15,7 +15,6 @@ export interface ApplicationPresetOptions {
     angularLinker?: {
         shouldLink: boolean;
         jitMode: boolean;
-        sourcemap: boolean;
     };
     forceES5?: boolean;
     forceAsyncTransformation?: boolean;

package/src/babel/presets/application.js

@@ -102,7 +102,8 @@ function default_1(api, options) {
         const { createEs2015LinkerPlugin } = require('@angular/compiler-cli/linker/babel');
         plugins.push(createEs2015LinkerPlugin({
             linkerJitMode: options.angularLinker.jitMode,
-            sourceMapping: options.angularLinker.sourcemap,
+            // This is a workaround until https://github.com/angular/angular/issues/42769 is fixed.
+            sourceMapping: false,
             logger: createNgtscLogger(options.diagnosticReporter),
             fileSystem: {
                 resolve: path.resolve,
@@ -135,7 +136,7 @@ function default_1(api, options) {
     }
     if (options.forceAsyncTransformation) {
         // Always transform async/await to support Zone.js
-        plugins.push(require('@babel/plugin-transform-async-to-generator').default);
+        plugins.push(require('@babel/plugin-transform-async-to-generator').default, require('@babel/plugin-proposal-async-generator-functions').default);
         needRuntimeTransform = true;
     }
     if (needRuntimeTransform) {

package/src/babel/webpack-loader.js

@@ -43,7 +43,6 @@ exports.default = babel_loader_1.custom(() => {
                 customOptions.angularLinker = {
                     shouldLink: true,
                     jitMode: aot !== true,
-                    sourcemap: false,
                 };
                 shouldProcess = true;
             }
@@ -113,14 +112,6 @@ exports.default = babel_loader_1.custom(() => {
                     { wrapDecorators: customOptions.optimize.wrapDecorators },
                 ]);
             }
-            // Only enable linker template sourcemapping if linker is enabled and Webpack provides
-            // a sourcemap. This logic allows the linker sourcemap behavior to be controlled by the
-            // Webpack sourcemap configuration. For example, if a vendor file is being processed
-            // and vendor sourcemaps are disabled, the `inputSourceMap` property will be `undefined`
-            // which will effectively disable linker sourcemapping for vendor files.
-            if (customOptions.angularLinker && configuration.options.inputSourceMap) {
-                customOptions.angularLinker.sourcemap = true;
-            }
             return {
                 ...configuration.options,
                 // Workaround for https://github.com/babel/babel-loader/pull/896 is available

package/src/browser/index.js

@@ -101,7 +101,7 @@ function buildWebpackBrowser(options, context, transforms = {}) {
     const baseOutputPath = path.resolve(context.workspaceRoot, options.outputPath);
     let outputPaths;
     // Check Angular version.
-    version_1.assertCompatibleAngularVersion(context.workspaceRoot, context.logger);
+    version_1.assertCompatibleAngularVersion(context.workspaceRoot);
     return rxjs_1.from(context.getProjectMetadata(projectName)).pipe(operators_1.switchMap(async (projectMetadata) => {
         var _a;
         const sysProjectRoot = core_1.getSystemPath(core_1.resolve(core_1.normalize(context.workspaceRoot), core_1.normalize((_a = projectMetadata.root) !== null && _a !== void 0 ? _a : '')));
@@ -462,6 +462,7 @@ function buildWebpackBrowser(options, context, transforms = {}) {
                             crossOrigin: options.crossOrigin,
                             postTransform: transforms.indexHtml,
                         });
+                        let hasErrors = false;
                         for (const [locale, outputPath] of outputPaths.entries()) {
                             try {
                                 const { content, warnings, errors } = await indexHtmlGenerator.process({
@@ -476,7 +477,10 @@ function buildWebpackBrowser(options, context, transforms = {}) {
                                 if (warnings.length || errors.length) {
                                     spinner.stop();
                                     warnings.forEach((m) => context.logger.warn(m));
-                                    errors.forEach((m) => context.logger.error(m));
+                                    errors.forEach((m) => {
+                                        context.logger.error(m);
+                                        hasErrors = true;
+                                    });
                                     spinner.start();
                                 }
                                 const indexOutput = path.join(outputPath, webpack_browser_config_1.getIndexOutputFile(options.index));
@@ -488,7 +492,13 @@ function buildWebpackBrowser(options, context, transforms = {}) {
                                 return { success: false, error: mapErrorToMessage(error) };
                             }
                         }
-                        spinner.succeed('Index html generation complete.');
+                        if (hasErrors) {
+                            spinner.fail('Index html generation failed.');
+                            return { success: false };
+                        }
+                        else {
+                            spinner.succeed('Index html generation complete.');
+                        }
                     }
                     if (options.serviceWorker) {
                         spinner.start('Generating service worker...');

package/src/dev-server/index.js

@@ -77,7 +77,7 @@ const devServerBuildOverriddenKeys = [
 function serveWebpackBrowser(options, context, transforms = {}) {
     // Check Angular version.
     const { logger, workspaceRoot } = context;
-    version_1.assertCompatibleAngularVersion(workspaceRoot, logger);
+    version_1.assertCompatibleAngularVersion(workspaceRoot);
     const browserTarget = architect_1.targetFromTargetString(options.browserTarget);
     async function setup() {
         var _a, _b;
@@ -119,7 +119,7 @@ function serveWebpackBrowser(options, context, transforms = {}) {
 
         Binding this server to an open connection can result in compromising your application or
         computer. Using a different host than the one passed to the "--host" flag might result in
-        websocket connection issues. You might need to use "--disableHostCheck" if that's the
+        websocket connection issues. You might need to use "--disable-host-check" if that's the
         case.
       `);
         }

package/src/extract-i18n/index.js

@@ -122,7 +122,7 @@ class NoEmitPlugin {
 async function execute(options, context, transforms) {
     var _a;
     // Check Angular version.
-    version_1.assertCompatibleAngularVersion(context.workspaceRoot, context.logger);
+    version_1.assertCompatibleAngularVersion(context.workspaceRoot);
     const browserTarget = architect_1.targetFromTargetString(options.browserTarget);
     const browserOptions = await context.validateOptions(await context.getTargetOptions(browserTarget), await context.getBuilderNameForTarget(browserTarget));
     const format = normalizeFormatOption(options);

package/src/karma/index.js

@@ -78,7 +78,7 @@ async function initialize(options, context, webpackConfigurationTransformer) {
  */
 function execute(options, context, transforms = {}) {
     // Check Angular version.
-    version_1.assertCompatibleAngularVersion(context.workspaceRoot, context.logger);
+    version_1.assertCompatibleAngularVersion(context.workspaceRoot);
     let singleRun;
     if (options.watch !== undefined) {
         singleRun = !options.watch;

package/src/server/index.js

@@ -48,7 +48,7 @@ const stats_1 = require("../webpack/utils/stats");
 function execute(options, context, transforms = {}) {
     const root = context.workspaceRoot;
     // Check Angular version.
-    version_1.assertCompatibleAngularVersion(root, context.logger);
+    version_1.assertCompatibleAngularVersion(root);
     const tsConfig = read_tsconfig_1.readTsconfig(options.tsConfig, root);
     const target = tsConfig.options.target || typescript_1.ScriptTarget.ES5;
     const baseOutputPath = path.resolve(root, options.outputPath);

package/src/server/tests/setup.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @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 { Schema } from '../schema';
+export { describeBuilder } from '../../testing';
+export declare const SERVER_BUILDER_INFO: Readonly<{
+    name: string;
+    schemaPath: string;
+}>;
+/**
+ * Contains all required Server builder fields.
+ * Also disables progress reporting to minimize logging output.
+ */
+export declare const BASE_OPTIONS: Readonly<Schema>;

package/src/server/tests/setup.js

@@ -0,0 +1,27 @@
+"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
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BASE_OPTIONS = exports.SERVER_BUILDER_INFO = exports.describeBuilder = void 0;
+var testing_1 = require("../../testing");
+Object.defineProperty(exports, "describeBuilder", { enumerable: true, get: function () { return testing_1.describeBuilder; } });
+exports.SERVER_BUILDER_INFO = Object.freeze({
+    name: '@angular-devkit/build-angular:server',
+    schemaPath: __dirname + '/../schema.json',
+});
+/**
+ * Contains all required Server builder fields.
+ * Also disables progress reporting to minimize logging output.
+ */
+exports.BASE_OPTIONS = Object.freeze({
+    main: 'src/main.server.ts',
+    tsConfig: 'src/tsconfig.server.json',
+    progress: false,
+    watch: false,
+    outputPath: 'dist',
+});

package/src/utils/delete-output-dir.js

@@ -6,9 +6,28 @@
  * 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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.deleteOutputDir = void 0;
-const fs_1 = require("fs");
+const fs = __importStar(require("fs"));
 const path_1 = require("path");
 /**
  * Delete an output directory, but error out if it's the root of the project.
@@ -18,6 +37,13 @@ function deleteOutputDir(root, outputPath) {
     if (resolvedOutputPath === root) {
         throw new Error('Output path MUST not be project root directory!');
     }
-    fs_1.rmdirSync(resolvedOutputPath, { recursive: true, maxRetries: 3 });
+    // The below should be removed and replace with just `rmSync` when support for Node.Js 12 is removed.
+    const { rmSync, rmdirSync } = fs;
+    if (rmSync) {
+        rmSync(resolvedOutputPath, { force: true, recursive: true, maxRetries: 3 });
+    }
+    else {
+        rmdirSync(resolvedOutputPath, { recursive: true, maxRetries: 3 });
+    }
 }
 exports.deleteOutputDir = deleteOutputDir;

package/src/utils/version.d.ts

@@ -5,5 +5,4 @@
  * 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 { logging } from '@angular-devkit/core';
-export declare function assertCompatibleAngularVersion(projectRoot: string, logger: logging.LoggerApi): void;
+export declare function assertCompatibleAngularVersion(projectRoot: string): void | never;

package/src/utils/version.js

@@ -8,9 +8,10 @@
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.assertCompatibleAngularVersion = void 0;
+/* eslint-disable no-console */
 const core_1 = require("@angular-devkit/core");
 const semver_1 = require("semver");
-function assertCompatibleAngularVersion(projectRoot, logger) {
+function assertCompatibleAngularVersion(projectRoot) {
     let angularCliPkgJson;
     let angularPkgJson;
     let rxjsPkgJson;
@@ -22,13 +23,13 @@ function assertCompatibleAngularVersion(projectRoot, logger) {
         rxjsPkgJson = require(rxjsPackagePath);
     }
     catch {
-        logger.error(core_1.tags.stripIndents `
+        console.error(core_1.tags.stripIndents `
       You seem to not be depending on "@angular/core" and/or "rxjs". This is an error.
     `);
         process.exit(2);
     }
     if (!(angularPkgJson && angularPkgJson['version'] && rxjsPkgJson && rxjsPkgJson['version'])) {
-        logger.error(core_1.tags.stripIndents `
+        console.error(core_1.tags.stripIndents `
       Cannot determine versions of "@angular/core" and/or "rxjs".
       This likely means your local installation is broken. Please reinstall your packages.
     `);
@@ -57,7 +58,7 @@ function assertCompatibleAngularVersion(projectRoot, logger) {
     // of both 8 and 9.
     const supportedAngularSemver = `^${cliMajor}.0.0-next || >=${cliMajor}.0.0 <${cliMajor + 1}.0.0`;
     if (!semver_1.satisfies(angularVersion, supportedAngularSemver, { includePrerelease: true })) {
-        logger.error(core_1.tags.stripIndents `
+        console.error(core_1.tags.stripIndents `
         This version of CLI is only compatible with Angular versions ${supportedAngularSemver},
         but Angular version ${angularVersion} was found instead.
 

package/src/webpack/configs/browser.js

@@ -8,7 +8,6 @@
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getBrowserConfig = void 0;
-const typescript_1 = require("typescript");
 const utils_1 = require("../../utils");
 const plugins_1 = require("../plugins");
 const helpers_1 = require("../utils/helpers");
@@ -23,18 +22,6 @@ function getBrowserConfig(wco) {
             hashFuncNames: ['sha384'],
         }));
     }
-    if (extractLicenses) {
-        const LicenseWebpackPlugin = require('license-webpack-plugin').LicenseWebpackPlugin;
-        extraPlugins.push(new LicenseWebpackPlugin({
-            stats: {
-                warnings: false,
-                errors: false,
-            },
-            perChunkOutput: false,
-            outputFilename: '3rdpartylicenses.txt',
-            skipChildCompilers: true,
-        }));
-    }
     if (scriptsSourceMap || stylesSourceMap) {
         extraPlugins.push(helpers_1.getSourceMapDevTool(scriptsSourceMap, stylesSourceMap, buildOptions.differentialLoadingNeeded && !buildOptions.watch ? true : hiddenSourceMap, false));
     }
@@ -51,9 +38,6 @@ function getBrowserConfig(wco) {
         resolve: {
             mainFields: ['es2015', 'browser', 'module', 'main'],
         },
-        target: wco.tsConfig.options.target === typescript_1.ScriptTarget.ES5 || buildBrowserFeatures.isEs5SupportNeeded()
-            ? ['web', 'es5']
-            : 'web',
         output: {
             crossOriginLoading,
             trustedTypes: 'angular#bundler',

package/src/webpack/configs/common.js

@@ -170,7 +170,7 @@ function getCommonConfig(wco) {
     }
     // process asset entries
     if (buildOptions.assets.length) {
-        const copyWebpackPluginPatterns = buildOptions.assets.map((asset) => {
+        const copyWebpackPluginPatterns = buildOptions.assets.map((asset, index) => {
             // Resolve input paths relative to workspace root and add slash at the end.
             // eslint-disable-next-line prefer-const
             let { input, output, ignore = [], glob } = asset;
@@ -200,6 +200,7 @@ function getCommonConfig(wco) {
                         ...ignore,
                     ].map((i) => path.posix.join(input, i)),
                 },
+                priority: index,
             };
         });
         extraPlugins.push(new copy_webpack_plugin_1.default({
@@ -212,6 +213,18 @@ function getCommonConfig(wco) {
             exclude: /[\\\/]node_modules[\\\/]/,
         }));
     }
+    if (buildOptions.extractLicenses) {
+        const LicenseWebpackPlugin = require('license-webpack-plugin').LicenseWebpackPlugin;
+        extraPlugins.push(new LicenseWebpackPlugin({
+            stats: {
+                warnings: false,
+                errors: false,
+            },
+            perChunkOutput: false,
+            outputFilename: '3rdpartylicenses.txt',
+            skipChildCompilers: true,
+        }));
+    }
     if (buildOptions.statsJson) {
         extraPlugins.push(new (class {
             apply(compiler) {
@@ -324,12 +337,19 @@ function getCommonConfig(wco) {
     return {
         mode: scriptsOptimization || stylesOptimization.minify ? 'production' : 'development',
         devtool: false,
+        target: [
+            platform === 'server' ? 'node' : 'web',
+            tsConfig.options.target === typescript_1.ScriptTarget.ES5 ||
+                (platform !== 'server' && buildBrowserFeatures.isEs5SupportNeeded())
+                ? 'es5'
+                : 'es2015',
+        ],
         profile: buildOptions.statsJson,
         resolve: {
             roots: [projectRoot],
             extensions: ['.ts', '.tsx', '.mjs', '.js'],
             symlinks: !buildOptions.preserveSymlinks,
-            modules: [wco.tsConfig.options.baseUrl || projectRoot, 'node_modules'],
+            modules: [tsConfig.options.baseUrl || projectRoot, 'node_modules'],
         },
         resolveLoader: {
             symlinks: !buildOptions.preserveSymlinks,
@@ -445,9 +465,14 @@ function getCacheSettings(wco, supportedBrowsers) {
                 .update(packageVersion)
                 .update(wco.projectRoot)
                 .update(JSON.stringify(wco.tsConfig))
-                .update(JSON.stringify(wco.buildOptions))
+                .update(JSON.stringify({
+                ...wco.buildOptions,
+                // Needed because outputPath changes on every build when using i18n extraction
+                // https://github.com/angular/angular-cli/blob/736a5f89deaca85f487b78aec9ff66d4118ceb6a/packages/angular_devkit/build_angular/src/utils/i18n-options.ts#L264-L265
+                outputPath: undefined,
+            }))
                 .update(supportedBrowsers.join(''))
-                .digest('base64'),
+                .digest('hex'),
         };
     }
     if (wco.buildOptions.watch && !environment_options_1.cachingDisabled) {

package/src/webpack/configs/server.js

@@ -30,7 +30,6 @@ function getServerConfig(wco) {
         resolve: {
             mainFields: ['es2015', 'main', 'module'],
         },
-        target: 'node',
         output: {
             libraryTarget: 'commonjs',
         },

package/src/webpack/configs/styles.js

@@ -270,6 +270,9 @@ function getStylesConfig(wco) {
                             // Ex: /* autoprefixer grid: autoplace */
                             // See: https://github.com/webpack-contrib/sass-loader/blob/45ad0be17264ceada5f0b4fb87e9357abe85c4ff/src/getSassOptions.js#L68-L70
                             outputStyle: 'expanded',
+                            // Silences compiler warnings from 3rd party stylesheets
+                            quietDeps: !buildOptions.verbose,
+                            verbose: buildOptions.verbose,
                         },
                     },
                 },
@@ -299,6 +302,9 @@ function getStylesConfig(wco) {
                             // Ex: /* autoprefixer grid: autoplace */
                             // See: https://github.com/webpack-contrib/sass-loader/blob/45ad0be17264ceada5f0b4fb87e9357abe85c4ff/src/getSassOptions.js#L68-L70
                             outputStyle: 'expanded',
+                            // Silences compiler warnings from 3rd party stylesheets
+                            quietDeps: !buildOptions.verbose,
+                            verbose: buildOptions.verbose,
                         },
                     },
                 },
@@ -384,6 +390,9 @@ function getStylesConfig(wco) {
                     calc: false,
                     // Disable CSS rules sorted due to several issues #20693, https://github.com/ionic-team/ionic-framework/issues/23266 and https://github.com/cssnano/cssnano/issues/1054
                     cssDeclarationSorter: false,
+                    // Workaround for Critters as it doesn't work when `@media all {}` is minified to `@media {}`.
+                    // TODO: Remove once they move to postcss.
+                    minifyParams: !buildOptions.optimization.styles.inlineCritical,
                 },
             ],
         };