perf(@angular-devkit/build-angular): use CSS optimization plugin that leverages workers

package.json

@@ -98,7 +98,6 @@
     "@types/cacache": "^15.0.0",
     "@types/caniuse-lite": "^1.0.0",
     "@types/copy-webpack-plugin": "^8.0.0",
-    "@types/cssnano": "^4.0.0",
     "@types/debug": "^4.1.2",
     "@types/express": "^4.16.0",
     "@types/find-cache-dir": "^3.0.0",
@@ -144,7 +143,7 @@
     "core-js": "3.12.1",
     "critters": "0.0.10",
     "css-loader": "5.2.4",
-    "cssnano": "5.0.2",
+    "css-minimizer-webpack-plugin": "3.0.0",
     "debug": "^4.1.1",
     "enhanced-resolve": "5.8.2",
     "eslint": "7.26.0",

packages/angular_devkit/build_angular/BUILD.bazel

@@ -121,7 +121,6 @@ ts_library(
         "@npm//@types/cacache",
         "@npm//@types/caniuse-lite",
         "@npm//@types/copy-webpack-plugin",
-        "@npm//@types/cssnano",
         "@npm//@types/find-cache-dir",
         "@npm//@types/glob",
         "@npm//@types/inquirer",
@@ -147,7 +146,7 @@ ts_library(
         "@npm//core-js",
         "@npm//critters",
         "@npm//css-loader",
-        "@npm//cssnano",
+        "@npm//css-minimizer-webpack-plugin",
         "@npm//find-cache-dir",
         "@npm//glob",
         "@npm//https-proxy-agent",

packages/angular_devkit/build_angular/package.json

@@ -30,7 +30,7 @@
     "core-js": "3.12.1",
     "critters": "0.0.10",
     "css-loader": "5.2.4",
-    "cssnano": "5.0.2",
+    "css-minimizer-webpack-plugin": "3.0.0",
     "find-cache-dir": "3.3.1",
     "glob": "7.1.7",
     "https-proxy-agent": "5.0.0",

packages/angular_devkit/build_angular/src/utils/action-executor.ts

@@ -11,9 +11,9 @@ import * as os from 'os';
 import * as path from 'path';
 import { serialize } from 'v8';
 import { BundleActionCache } from './action-cache';
+import { maxWorkers } from './environment-options';
 import { I18nOptions } from './i18n-options';
 import { InlineOptions, ProcessBundleOptions, ProcessBundleResult } from './process-bundle';
-import { maxWorkers } from './workers';
 
 let workerFile = require.resolve('./process-bundle');
 workerFile =
@@ -35,7 +35,7 @@ export class BundleActionExecutor {
   }
 
   private static executeMethod<O>(worker: JestWorker, method: string, input: unknown): Promise<O> {
-    return ((worker as unknown) as Record<string, (i: unknown) => Promise<O>>)[method](input);
+    return (worker as unknown as Record<string, (i: unknown) => Promise<O>>)[method](input);
   }
 
   private ensureLarge(): JestWorker {

packages/angular_devkit/build_angular/src/utils/environment-options.ts

@@ -83,3 +83,15 @@ export const cachingBasePath = (() => {
 // Build profiling
 const profilingVariable = process.env['NG_BUILD_PROFILING'];
 export const profilingEnabled = isPresent(profilingVariable) && isEnabled(profilingVariable);
+
+/**
+ * Some environments, like CircleCI which use Docker report a number of CPUs by the host and not the count of available.
+ * This cause `Error: Call retries were exceeded` errors when trying to use them.
+ *
+ * @see https://github.com/nodejs/node/issues/28762
+ * @see https://github.com/webpack-contrib/terser-webpack-plugin/issues/143
+ * @see https://ithub.com/angular/angular-cli/issues/16860#issuecomment-588828079
+ *
+ */
+const maxWorkersVariable = process.env['NG_BUILD_MAX_WORKERS'];
+export const maxWorkers = isPresent(maxWorkersVariable) ? +maxWorkersVariable : 4;

packages/angular_devkit/build_angular/src/utils/index.ts

@@ -16,4 +16,3 @@ export * from './normalize-source-maps';
 export * from './normalize-optimization';
 export * from './normalize-builder-schema';
 export * from './url';
-export * from './workers';

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

@@ -23,24 +23,21 @@ import {
   debug,
 } from 'webpack';
 import { AssetPatternClass } from '../../browser/schema';
-import { BuildBrowserFeatures, maxWorkers } from '../../utils';
+import { BuildBrowserFeatures } from '../../utils';
 import { WebpackConfigOptions } from '../../utils/build-options';
 import { findCachePath } from '../../utils/cache-path';
 import {
   allowMangle,
   allowMinify,
   cachingDisabled,
+  maxWorkers,
   profilingEnabled,
   shouldBeautify,
 } from '../../utils/environment-options';
 import { findAllNodeModules } from '../../utils/find-up';
 import { Spinner } from '../../utils/spinner';
 import { addError } from '../../utils/webpack-diagnostics';
-import {
-  DedupeModuleResolvePlugin,
-  OptimizeCssWebpackPlugin,
-  ScriptsWebpackPlugin,
-} from '../plugins';
+import { DedupeModuleResolvePlugin, ScriptsWebpackPlugin } from '../plugins';
 import {
   getEsVersionForFileName,
   getOutputHashFormat,
@@ -49,8 +46,6 @@ import {
 } from '../utils/helpers';
 import { IGNORE_WARNINGS } from '../utils/stats';
 
-const TerserPlugin = require('terser-webpack-plugin');
-
 // eslint-disable-next-line max-lines-per-function
 export function getCommonConfig(wco: WebpackConfigOptions): Configuration {
   const { root, projectRoot, buildOptions, tsConfig } = wco;
@@ -320,20 +315,37 @@ export function getCommonConfig(wco: WebpackConfigOptions): Configuration {
 
   const extraMinimizers = [];
   if (stylesOptimization.minify) {
+    const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
     extraMinimizers.push(
-      new OptimizeCssWebpackPlugin({
-        sourceMap: stylesSourceMap,
+      new CssMinimizerPlugin({
         // component styles retain their original file name
-        test: (file) => /\.(?:css|scss|sass|less|styl)$/.test(file),
+        test: /\.(?:css|scss|sass|less|styl)$/,
+        parallel: maxWorkers,
+        minify: [CssMinimizerPlugin.cssnanoMinify],
+        minimizerOptions: {
+          preset: [
+            'default',
+            {
+              // Disable SVG optimizations, as this can cause optimizations which are not compatible in all browsers.
+              svgo: false,
+              // Disable `calc` optimizations, due to several issues. #16910, #16875, #17890
+              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,
+            },
+          ],
+        },
       }),
     );
   }
 
   if (scriptsOptimization) {
+    const TerserPlugin = require('terser-webpack-plugin');
     const {
       GLOBAL_DEFS_FOR_TERSER,
       GLOBAL_DEFS_FOR_TERSER_WITH_AOT,
     } = require('@angular/compiler-cli');
+
     const angularGlobalDefinitions = buildOptions.aot
       ? GLOBAL_DEFS_FOR_TERSER_WITH_AOT
       : GLOBAL_DEFS_FOR_TERSER;

packages/angular_devkit/build_angular/src/webpack/plugins/index.ts

@@ -8,10 +8,6 @@
 
 // Exports the webpack plugins we use internally.
 export { AnyComponentStyleBudgetChecker } from './any-component-style-budget-checker';
-export {
-  OptimizeCssWebpackPlugin,
-  OptimizeCssWebpackPluginOptions,
-} from './optimize-css-webpack-plugin';
 export { ScriptsWebpackPlugin, ScriptsWebpackPluginOptions } from './scripts-webpack-plugin';
 export { SuppressExtractedTextChunksWebpackPlugin } from './suppress-entry-chunks-webpack-plugin';
 export { RemoveHashPlugin, RemoveHashPluginOptions } from './remove-hash-plugin';