fix(@angular-devkit/build-angular): RGBA converted to hex notation in…

… component styles breaks IE11

ESBuild which is used to optimize CSS in components, doesn't support IE. With this change we workaround this limitation by adding `Edge 12` when the user needs `IE 11` support.

Closes #21652

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

@@ -700,5 +700,36 @@ describe('Browser Builder styles', () => {
       };
       await browserBuild(architect, host, target, overrides);
     });
+
+    it('should minify colors based on browser support', async () => {
+      host.writeMultipleFiles({
+        'src/app/app.component.css': `
+          div { box-shadow: 0 3px 10px, rgba(0, 0, 0, 0.15); }
+        `,
+      });
+      host.replaceInFile('tsconfig.json', 'es2017', 'es5');
+
+      let result = await browserBuild(architect, host, target, { optimization: true, aot: true });
+      expect(await result.files['main.js']).toContain('#00000026');
+
+      await host.restore().toPromise();
+      await host.initialize().toPromise();
+      architect = (await createArchitect(host.root())).architect;
+
+      // IE 11 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/app/app.component.css': `
+          div { box-shadow: 0 3px 10px, rgba(0, 0, 0, 0.15); }
+        `,
+        '.browserslistrc': 'ie 11',
+      });
+      host.replaceInFile('tsconfig.json', 'es2017', 'es5');
+
+      result = await browserBuild(architect, host, target, { optimization: true, aot: true });
+      expect(await result.files['main.js']).toContain('rgba(0,0,0,.149)');
+    });
   });
 });

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

@@ -489,7 +489,10 @@ function transformSupportedBrowsersToTargets(supportedBrowsers: string[]): strin
 
   for (const browser of supportedBrowsers) {
     const [browserName, version] = browser.split(' ');
-    if (esBuildSupportedBrowsers.has(browserName)) {
+
+    if (browserName === 'ie') {
+      transformed.push('edge12');
+    } else if (esBuildSupportedBrowsers.has(browserName)) {
       transformed.push(browserName + version);
     }
   }