Dithn · pull · May 14, 2021 · May 13, 2021 · May 13, 2021 · May 13, 2021
diff --git a/package.json b/package.json
@@ -91,14 +91,13 @@
     "@bazel/buildifier": "4.0.1",
     "@bazel/jasmine": "3.5.0",
     "@bazel/typescript": "3.5.0",
-    "@discoveryjs/json-ext": "0.5.2",
+    "@discoveryjs/json-ext": "0.5.3",
     "@jsdevtools/coverage-istanbul-loader": "3.0.5",
     "@types/babel__core": "7.1.14",
     "@types/babel__template": "7.4.0",
     "@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",
@@ -206,7 +205,7 @@
     "rimraf": "3.0.2",
     "rxjs": "6.6.7",
     "sass": "1.32.13",
-    "sass-loader": "11.1.0",
+    "sass-loader": "11.1.1",
     "sauce-connect-proxy": "https://saucelabs.com/downloads/sc-4.6.4-linux.tar.gz",
     "semver": "7.3.5",
     "source-map": "0.7.3",

diff --git a/packages/angular_devkit/build_angular/BUILD.bazel b/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",

diff --git a/packages/angular_devkit/build_angular/package.json b/packages/angular_devkit/build_angular/package.json
@@ -17,7 +17,7 @@
     "@babel/preset-env": "7.14.2",
     "@babel/runtime": "7.14.0",
     "@babel/template": "7.12.13",
-    "@discoveryjs/json-ext": "0.5.2",
+    "@discoveryjs/json-ext": "0.5.3",
     "@jsdevtools/coverage-istanbul-loader": "3.0.5",
     "@ngtools/webpack": "0.0.0",
     "ansi-colors": "4.1.1",
@@ -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",
@@ -56,7 +56,7 @@
     "rimraf": "3.0.2",
     "rxjs": "6.6.7",
     "sass": "1.32.13",
-    "sass-loader": "11.1.0",
+    "sass-loader": "11.1.1",
     "semver": "7.3.5",
     "source-map": "0.7.3",
     "source-map-loader": "2.0.1",

diff --git a/packages/angular_devkit/build_angular/src/utils/action-executor.ts b/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 {

diff --git a/packages/angular_devkit/build_angular/src/utils/environment-options.ts b/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;
diff --git a/packages/angular_devkit/build_angular/src/utils/index.ts b/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';
diff --git a/packages/angular_devkit/build_angular/src/utils/workers.ts b/packages/angular_devkit/build_angular/src/utils/workers.ts
diff --git a/packages/angular_devkit/build_angular/src/webpack/configs/common.ts b/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;

diff --git a/packages/angular_devkit/build_angular/src/webpack/plugins/index.ts b/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';

diff --git a/packages/angular_devkit/build_angular/src/webpack/plugins/optimize-css-webpack-plugin.ts b/packages/angular_devkit/build_angular/src/webpack/plugins/optimize-css-webpack-plugin.ts
diff --git a/packages/schematics/angular/workspace/files/README.md.template b/packages/schematics/angular/workspace/files/README.md.template
@@ -12,15 +12,15 @@ Run `ng generate component component-name` to generate a new component. You can
 
 ## Build
 
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
 
 ## Running unit tests
 
 Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
 
 ## Running end-to-end tests
 
-Run `ng e2e` to execute the end-to-end tests via a platform of your choice.
+Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
 
 ## Further help