perf(@angular-devkit/build-angular): use esbuild as a CSS optimizer…

… for component styles

The stylesheet optimization pipeline now uses `esbuild` for component stylesheets. The usage of `esbuild` provides noticeable build time improvements as well as, on average, smaller output sizes.
`esbuild` currently does not support stylesheet sourcemaps. However, since the Angular CLI does not support component stylesheet sourcemaps when optimizing, this lack of support is problematic.
Global stylesheets will continue to use `cssnano` as an optimizer due to sourcemaps being required for global stylesheets even when optimizing. When `esbuild` adds stylesheet sourcemap support, global stylesheets may be transitioned to `esbuild` as well.

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

@@ -277,7 +277,9 @@ export function getStylesConfig(wco: WebpackConfigOptions): webpack.Configuratio
   const extraMinimizers = [];
   if (buildOptions.optimization.styles.minify) {
     const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
-    const minimizerOptions = {
+    const esbuild = require('esbuild') as typeof import('esbuild');
+
+    const cssnanoOptions = {
       preset: [
         'default',
         {
@@ -299,20 +301,39 @@ export function getStylesConfig(wco: WebpackConfigOptions): webpack.Configuratio
     );
 
     extraMinimizers.push(
+      // Component styles use esbuild which is faster and generates smaller files on average.
+      // esbuild does not yet support style sourcemaps but component style sourcemaps are not
+      // supported by the CLI when style minify is enabled.
       new CssMinimizerPlugin({
         // Component styles retain their original file name
         test: /\.(?:css|scss|sass|less|styl)$/,
-        parallel: false,
         exclude: globalBundlesRegExp,
-        minify: [CssMinimizerPlugin.cssnanoMinify],
-        minimizerOptions,
+        parallel: false,
+        minify: async (data: string) => {
+          const [[sourcefile, input]] = Object.entries(data);
+          const { code, warnings } = await esbuild.transform(input, {
+            loader: 'css',
+            minify: true,
+            sourcefile,
+          });
+
+          return {
+            code,
+            warnings:
+              warnings.length > 0
+                ? await esbuild.formatMessages(warnings, { kind: 'warning' })
+                : [],
+          };
+        },
       }),
+      // Global styles use cssnano since sourcemap support is required even when minify
+      // is enabled. Once esbuild supports style sourcemaps this can be changed.
       new CssMinimizerPlugin({
         test: /\.css$/,
         include: globalBundlesRegExp,
         parallel: maxWorkers,
         minify: [CssMinimizerPlugin.cssnanoMinify],
-        minimizerOptions,
+        minimizerOptions: cssnanoOptions,
       }),
     );
   }