fix(@angular-devkit/build-angular): improve Safari browserslist to esbuild target conversion

The browser targets provided by `browserslist` have several differences than what `esbuild` expects for the Safari browsers. The first is that the iOS Safari is named `ios_saf` within browserslist and `ios` by esbuild. The former is now converted to the later when generating the target list for esbuild.  The second difference is that `browserslist` supports a `TP` (Technology Preview) version for Safari but esbuild expects a numeric value for all versions. Since a TP version of Safari is assumed to be the latest unreleased version and as a result supports all currently known features, a high version number (999) is used as a replacement when generating the target list for esbuild.

Author: clydin

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

@@ -488,11 +488,25 @@ function transformSupportedBrowsersToTargets(supportedBrowsers: string[]): strin
   const esBuildSupportedBrowsers = new Set(['safari', 'firefox', 'edge', 'chrome', 'ios']);
 
   for (const browser of supportedBrowsers) {
-    const [browserName, version] = browser.split(' ');
+    let [browserName, version] = browser.split(' ');
+
+    // browserslist uses the name `ios_saf` for iOS Safari whereas esbuild uses `ios`
+    if (browserName === 'ios_saf') {
+      browserName = 'ios';
+      // browserslist also uses ranges for iOS Safari versions but only the lowest is required
+      // to perform minimum supported feature checks. esbuild also expects a single version.
+      [version] = version.split('-');
+    }
 
     if (browserName === 'ie') {
       transformed.push('edge12');
     } else if (esBuildSupportedBrowsers.has(browserName)) {
+      if (browserName === 'safari' && version === 'TP') {
+        // esbuild only supports numeric versions so `TP` is converted to a high number (999) since
+        // a Technology Preview (TP) of Safari is assumed to support all currently known features.
+        version = '999';
+      }
+
       transformed.push(browserName + version);
     }
   }