fix: use splitEffects to split multiple effects (#553)

We always need to handle mutiple effects. Let's give it a fn and add
some tests

Author: Jackie1210

src/handler/expand.ts

@@ -12,7 +12,7 @@ import CssDimension from '../vendor/parse-css-dimension/index.js'
 import parseTransformOrigin, {
   ParsedTransformOrigin,
 } from '../transform-origin.js'
-import { isString, lengthToNumber, v } from '../utils.js'
+import { isString, lengthToNumber, v, splitEffects } from '../utils.js'
 import { MaskProperty, parseMask } from '../parser/mask.js'
 
 // https://react-cn.github.io/react/tips/style-props-value-px.html
@@ -173,7 +173,7 @@ function handleSpecialCase(
     // Handle multiple text shadows if provided.
     value = value.toString().trim()
     if (value.includes(',')) {
-      const shadows = splitTextShadow(value)
+      const shadows = splitEffects(value)
       const result = {}
       for (const shadow of shadows) {
         const styles = getStylesForProperty('textShadow', shadow, true)
@@ -192,29 +192,6 @@ function handleSpecialCase(
   return
 }
 
-function splitTextShadow(str: string) {
-  const result: string[] = []
-  let skip = false
-  let startPos = 0
-  const len = str.length
-
-  for (let i = 0; i < len; ++i) {
-    const t = str[i]
-    if (t === ')') skip = false
-    if (skip) continue
-    if (t === '(') skip = true
-
-    if (t === ',') {
-      result.push(str.substring(startPos, i))
-      startPos = i + 1
-    }
-  }
-
-  result.push(str.substring(startPos, len))
-
-  return result.map((s) => s.trim())
-}
-
 function getErrorHint(name: string) {
   if (name === 'transform') {
     return ' Only absolute lengths such as `10px` are supported.'

src/parser/mask.ts

@@ -1,4 +1,5 @@
 import { getPropertyName } from 'css-to-react-native'
+import { splitEffects } from '../utils.js'
 
 function getMaskProperty(style: Record<string, string | number>, name: string) {
   const key = getPropertyName(`mask-${name}`)
@@ -14,34 +15,6 @@ 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)]
- */
-
 export function parseMask(
   style: Record<string, string | number>
 ): MaskProperty[] {
@@ -55,7 +28,7 @@ export function parseMask(
     clip: getMaskProperty(style, 'origin') || 'border-box',
   }
 
-  let maskImages = splitMaskImages(maskImage).filter((v) => v && v !== 'none')
+  let maskImages = splitEffects(maskImage).filter((v) => v && v !== 'none')
 
   return maskImages.reverse().map((m) => ({
     image: m,

src/utils.ts

@@ -318,3 +318,30 @@ export const midline = (s: string) => {
     (_, letter: string) => `-${letter.toLowerCase()}`
   )
 }
+
+export function splitEffects(
+  input: string,
+  separator: string | RegExp = ','
+): string[] {
+  const result = []
+  let l = 0
+  let parenCount = 0
+  separator = new RegExp(separator)
+
+  for (let i = 0; i < input.length; i++) {
+    if (input[i] === '(') {
+      parenCount++
+    } else if (input[i] === ')') {
+      parenCount--
+    }
+
+    if (parenCount === 0 && separator.test(input[i])) {
+      result.push(input.slice(l, i).trim())
+      l = i + 1
+    }
+  }
+
+  result.push(input.slice(l).trim())
+
+  return result
+}

test/units.test.tsx

@@ -2,6 +2,7 @@ import { it, describe, expect } from 'vitest'
 
 import { initFonts, toImage } from './utils.js'
 import satori from '../src/index.js'
+import { splitEffects } from '../src/utils.js'
 
 describe('Units', () => {
   let fonts
@@ -133,4 +134,37 @@ describe('Units', () => {
     )
     expect(toImage(svg, 100)).toMatchImageSnapshot()
   })
+
+  it('should support split multiple effect', () => {
+    const tests = {
+      '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)'],
+      '1px 1px 2px black, 0 0 1em blue': ['1px 1px 2px black', '0 0 1em blue'],
+      '2px 2px red, 4px 4px #4bf542, 6px 6px rgba(186, 147, 17, 30%)': [
+        '2px 2px red',
+        '4px 4px #4bf542',
+        '6px 6px rgba(186, 147, 17, 30%)',
+      ],
+    }
+
+    for (const [k, v] of Object.entries(tests)) {
+      expect(splitEffects(k, ',')).toEqual(v)
+    }
+
+    ;[' ', /\s{1}/].forEach((v) => {
+      expect(
+        splitEffects(
+          'drop-shadow(4px 4px 10px blue) blur(4px) saturate(150%)',
+          v
+        )
+      ).toEqual([
+        'drop-shadow(4px 4px 10px blue)',
+        'blur(4px)',
+        'saturate(150%)',
+      ])
+    })
+  })
 })