diff --git a/src/handler/expand.ts b/src/handler/expand.ts index 970c4b5e..a11e8bba 100644 --- a/src/handler/expand.ts +++ b/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.' diff --git a/test/__image_snapshots__/shadow-test-tsx-test-shadow-test-tsx-shadow-box-shadow-should-support-text-shadows-if-exist-unexpected-comma-1-snap.png b/test/__image_snapshots__/shadow-test-tsx-test-shadow-test-tsx-shadow-box-shadow-should-support-text-shadows-if-exist-unexpected-comma-1-snap.png new file mode 100644 index 00000000..7f5a9e62 Binary files /dev/null and b/test/__image_snapshots__/shadow-test-tsx-test-shadow-test-tsx-shadow-box-shadow-should-support-text-shadows-if-exist-unexpected-comma-1-snap.png differ diff --git a/test/shadow.test.tsx b/test/shadow.test.tsx index 2adad156..df9cdb6a 100644 --- a/test/shadow.test.tsx +++ b/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( +
+ Lynn +
, + { width: 100, height: 100, fonts } + ) + + expect(toImage(svg, 100)).toMatchImageSnapshot() + }) }) })