fix: should render text-shadow with color like 'rgba(8, 15, 30, 50%)' (…

…#450)

src/handler/expand.ts

@@ -171,7 +171,7 @@ function handleSpecialCase(
  // Handle multiple text shadows if provided.
  value = value.toString().trim()
  if (value.includes(',')) {
- const shadows = value.split(',')
+ const shadows = splitTextShadow(value)
  const result = {}
  for (const shadow of shadows) {
  const styles = getStylesForProperty('textShadow', shadow, true)
@@ -190,6 +190,29 @@ 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.'

test/shadow.test.tsx

@@ -212,5 +212,25 @@ describe('Shadow', () => {
  )
  expect(toImage(svg, 100)).toMatchImageSnapshot()
  })
+
+ it('should support text shadows if exist unexpected comma', async () => {
+ const svg = await satori(
+ <div
+ style={{
+ background: 'white',
+ width: 100,
+ height: 100,
+ fontSize: 40,
+ textShadow:
+ '2px 2px red, 4px 4px #4bf542, 6px 6px rgb(186, 147, 17)',
+ }}
+ >
+ Lynn
+ </div>,
+ { width: 100, height: 100, fonts }
+ )
+
+ expect(toImage(svg, 100)).toMatchImageSnapshot()
+ })
  })
 })