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/webpack/configs/styles.ts

@@ -300,6 +300,7 @@ export function getStylesConfig(wco: WebpackConfigOptions): webpack.Configuratio
       `^(${Object.keys(entryPoints).join('|')})(\.[0-9a-f]{20})?.css$`,
     );
 
+    const target = transformSupportedBrowsersToTargets(supportedBrowsers);
     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
@@ -315,6 +316,7 @@ export function getStylesConfig(wco: WebpackConfigOptions): webpack.Configuratio
             loader: 'css',
             minify: true,
             sourcefile,
+            target,
           });
 
           return {
@@ -478,3 +480,19 @@ export function getStylesConfig(wco: WebpackConfigOptions): webpack.Configuratio
     plugins: extraPlugins,
   };
 }
+
+function 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;
+}