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 <[email protected]>

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,
+ }))
 }