From 367fce2e9f9389c41f2ed5361ef6749198c49785 Mon Sep 17 00:00:00 2001
From: Charles Lyding <19598772+clydin@users.noreply.github.com>
Date: Tue, 7 Sep 2021 10:00:15 -0400
Subject: [PATCH] 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.
---
 .../build_angular/src/webpack/configs/styles.ts  | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/packages/angular_devkit/build_angular/src/webpack/configs/styles.ts b/packages/angular_devkit/build_angular/src/webpack/configs/styles.ts
index 6878fb379644..2374c2d9dada 100644
--- a/packages/angular_devkit/build_angular/src/webpack/configs/styles.ts
+++ b/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);
     }
   }