fix(@angular-devkit/build-angular): provide supported browsers to esbuild

With this change we provide the list of supported browsers to Esbuild during CSS optimizations, so it can perform optimizations based on the browser support needed.

Closes #21594

Author: alan-agius4

packages/angular_devkit/build_angular/src/builders/browser/specs/styles_spec.ts

@@ -626,4 +626,33 @@ describe('Browser Builder styles', () => {
       await browserBuild(architect, host, target, overrides);
     });
   });
+
+  it('should minify colors based on browser support', async () => {
+    host.writeMultipleFiles({
+      'src/styles.css': `
+        div { box-shadow: 0 3px 10px, rgba(0, 0, 0, 0.15); }
+      `,
+    });
+
+    let result = await browserBuild(architect, host, target, { optimization: true });
+    expect(await result.files['styles.css']).toContain('#00000026');
+
+    await host.restore().toPromise();
+    await host.initialize().toPromise();
+    architect = (await createArchitect(host.root())).architect;
+
+    // Edge 17 doesn't support #rrggbbaa colors
+    // https://github.com/angular/angular-cli/issues/21594#:~:text=%23rrggbbaa%20hex%20color%20notation
+    // While this browser is un-supported, this is used as a base case to test that the underlying
+    // logic to pass the list of supported browsers to the css optimizer works.
+    host.writeMultipleFiles({
+      'src/styles.css': `
+        div { box-shadow: 0 3px 10px, rgba(0, 0, 0, 0.15); }
+      `,
+      '.browserslistrc': 'edge 17',
+    });
+
+    result = await browserBuild(architect, host, target, { optimization: true });
+    expect(await result.files['styles.css']).toContain('rgba(0,0,0,.149)');
+  });
 });

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

@@ -395,7 +395,13 @@ export function getStylesConfig(wco: WebpackConfigOptions): webpack.Configuratio
       })),
     },
     optimization: {
-      minimizer: buildOptions.optimization.styles.minify ? [new CssOptimizerPlugin()] : undefined,
+      minimizer: buildOptions.optimization.styles.minify
+        ? [
+            new CssOptimizerPlugin({
+              supportedBrowsers,
+            }),
+          ]
+        : undefined,
     },
     plugins: extraPlugins,
   };

packages/angular_devkit/build_angular/src/webpack/plugins/css-optimizer-plugin.ts

@@ -14,14 +14,24 @@ import { addWarning } from '../../utils/webpack-diagnostics';
  */
 const PLUGIN_NAME = 'angular-css-optimizer';
 
+export interface CssOptimizerPluginOptions {
+  supportedBrowsers?: string[];
+}
+
 /**
  * A Webpack plugin that provides CSS optimization capabilities.
  *
  * The plugin uses both `esbuild` to provide both fast and highly-optimized
  * code output.
  */
 export class CssOptimizerPlugin {
-  constructor() {}
+  private targets: string[] | undefined;
+
+  constructor(options?: CssOptimizerPluginOptions) {
+    if (options?.supportedBrowsers) {
+      this.targets = this.transformSupportedBrowsersToTargets(options.supportedBrowsers);
+    }
+  }
 
   apply(compiler: Compiler) {
     const { OriginalSource, SourceMapSource } = compiler.webpack.sources;
@@ -83,6 +93,7 @@ export class CssOptimizerPlugin {
                 minify: true,
                 sourcemap: !!inputMap && 'external',
                 sourcefile: asset.name,
+                target: this.targets,
               },
             );
 
@@ -110,4 +121,20 @@ export class CssOptimizerPlugin {
       }
     }
   }
+
+  private transformSupportedBrowsersToTargets(supportedBrowsers: string[]): string[] | undefined {
+    const transformed: string[] = [];
+
+    // https://esbuild.github.io/api/#target
+    const esBuildSupportedBrowsers = new Set(['safari', 'firefox', 'edge', 'chrome', 'ios']);
+
+    for (const browser of supportedBrowsers) {
+      const [browserName, version] = browser.split(' ');
+      if (esBuildSupportedBrowsers.has(browserName)) {
+        transformed.push(browserName + version);
+      }
+    }
+
+    return transformed.length ? transformed : undefined;
+  }
 }