fix: support iOS (#523)

Hi there! We're developing an open-source app
(https://github.com/dumpus-app/dumpus-app) and use satori to render some
images client-side.
However, we encountered the following error on both ios web (safari) and
capacitor (that uses safari webview) on a lot of iOS devices:
```bash
Invalid regular expression: invalid group specifier name
```
After investigating, we found out it's caused by [regex
lookbehind](https://stackoverflow.com/questions/51568821/works-in-chrome-but-breaks-in-safari-invalid-regular-expression-invalid-group)
not being [supported until iOS
16.4](https://caniuse.com/js-regexp-lookbehind).

This PR replaces this regex by some quite hacky code because we needed a
hotfix.
If anybody wants to update the regex in order not to use `lookbehind`
feature, feel free to do so!.

If you want to test it, you can use satori on the web using the
following package json version:
```json
"satori": "dumpus-app/satori#fix-safari-compatibility-build"
```

Thanks for your time!

Co-authored-by: Androz2091 <androz2091@gmail.com>

Author: florian-lefebvre

src/parser/mask.ts

@@ -14,11 +14,33 @@ export interface MaskProperty {
   clip: string
 }
 
+function splitMaskImages(maskImage) {
+  let maskImages = []
+  let start = 0
+  let parenCount = 0
+
+  for (let i = 0; i < maskImage.length; i++) {
+    if (maskImage[i] === '(') {
+      parenCount++
+    } else if (maskImage[i] === ')') {
+      parenCount--
+    }
+
+    if (parenCount === 0 && maskImage[i] === ',') {
+      maskImages.push(maskImage.slice(start, i).trim())
+      start = i + 1
+    }
+  }
+
+  maskImages.push(maskImage.slice(start).trim())
+
+  return maskImages
+}
+
 /**
  * url(https:a.png), linear-gradient(blue, red) => [url(https:a.png), linear-gradient(blue, red)]
  * rgba(0,0,0,.7) => [rgba(0,0,0,.7)]
  */
-const SPILIT_SOURCE_COMMOA_RE = /(?<=\))(?:\s*,\s*)/
 
 export function parseMask(
   style: Record<string, string | number>
@@ -33,16 +55,10 @@ export function parseMask(
     clip: getMaskProperty(style, 'origin') || 'border-box',
   }
 
-  return (
-    maskImage
-      .split(SPILIT_SOURCE_COMMOA_RE)
-      // https://www.w3.org/TR/css-backgrounds-3/#layering
-      .reverse()
-      .map((v) => v.trim())
-      .filter((v) => v && v !== 'none')
-      .map((m) => ({
-        image: m,
-        ...common,
-      }))
-  )
+  let maskImages = splitMaskImages(maskImage).filter((v) => v && v !== 'none')
+
+  return maskImages.reverse().map((m) => ({
+    image: m,
+    ...common,
+  }))
 }