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

With this change we use `css-minimizer-webpack-plugin` which leverages workers and also webpack cache.

(cherry picked from commit 7e04bb3)

Author: alan-agius4

package.json

@@ -96,8 +96,7 @@
     "@types/babel__template": "7.4.0",
     "@types/cacache": "^15.0.0",
     "@types/caniuse-lite": "^1.0.0",
-    "@types/copy-webpack-plugin": "^6.0.0",
-    "@types/cssnano": "^4.0.0",
+    "@types/copy-webpack-plugin": "^8.0.0",
     "@types/debug": "^4.1.2",
     "@types/express": "^4.16.0",
     "@types/find-cache-dir": "^3.0.0",
@@ -143,7 +142,7 @@
     "core-js": "3.12.0",
     "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.7.0",
     "eslint": "7.25.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.0",
     "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/webpack/configs/common.ts

@@ -36,11 +36,7 @@ import {
 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 +45,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 +314,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';