feat: webkit-text-fill-color

Author: lolistream

README.md

@@ -321,6 +321,12 @@ Satori uses the same Flexbox [layout engine](https://yogalayout.com) as React Na
 <td>Supported</td>
 <td></td>
 </tr>
+<tr>
+<td><code>WebkitTextFillColor</code></td>
+<td><code>WebkitTextFillColor</code></td>
+<td>Supported</td>
+<td></td>
+</tr>
 
 </tbody>
 </table>

src/builder/text.ts

@@ -147,7 +147,7 @@ export default function buildText(
         'text',
         {
           ...shapeProps,
-          fill: style.color,
+          fill: style.WebkitTextFillColor || style.color,
           opacity: opacity !== 1 ? opacity : undefined,
         },
         escapeHTML(content)

src/handler/expand.ts

@@ -219,6 +219,10 @@ function handleSpecialCase(
     }
   }
 
+  if (name === 'WebkitTextFillColor') {
+    return { WebkitTextFillColor: value.toString().trim() }
+  }
+
   if (name === 'textDecorationSkipInk') {
     const normalized = value.toString().trim().toLowerCase()
     if (!['auto', 'none', 'all'].includes(normalized)) {
@@ -303,6 +307,7 @@ type MainStyle = {
   textShadowRadius: number[]
   WebkitTextStrokeWidth: number
   WebkitTextStrokeColor: string
+  WebkitTextFillColor: string
   textDecorationSkipInk: 'auto' | 'none' | 'all'
 }
 

src/text/index.ts

@@ -74,9 +74,17 @@ export default async function* buildTextNodes(
     letterSpacing,
     _inheritedBackgroundClipTextPath,
     _inheritedBackgroundClipTextHasBackground,
+    WebkitTextFillColor,
     flexShrink,
   } = parentStyle
 
+  const textFillColor = WebkitTextFillColor as string | undefined
+  const isTransparentText = textFillColor
+    ? isFullyTransparent(textFillColor)
+    : isFullyTransparent(parentStyle.color) ||
+      (!!_inheritedBackgroundClipTextHasBackground &&
+        isOpaqueWhite(parentStyle.color))
+
   const {
     words,
     requiredBreaks,
@@ -517,9 +525,7 @@ export default async function* buildTextNodes(
         shadowOffset: textShadowOffset,
         shadowRadius: textShadowRadius,
       },
-      isFullyTransparent(parentStyle.color) ||
-        (_inheritedBackgroundClipTextHasBackground &&
-          isOpaqueWhite(parentStyle.color))
+      isTransparentText
     )
 
     filter = buildXMLString('defs', {}, filter)
@@ -880,12 +886,9 @@ export default async function* buildTextNodes(
           }>` +
           buildXMLString('path', {
             fill:
-              filter &&
-              (isFullyTransparent(parentStyle.color) ||
-                (_inheritedBackgroundClipTextHasBackground &&
-                  isOpaqueWhite(parentStyle.color)))
+              filter && isTransparentText
                 ? 'black'
-                : parentStyle.color,
+                : textFillColor || parentStyle.color,
             d: mergedPath,
             transform: matrix ? matrix : undefined,
             opacity: opacity !== 1 ? opacity : undefined,

test/__image_snapshots__/background-clip-test-tsx-test-background-clip-test-tsx-background-clip-should-render-webkit-text-fill-color-as-white-over-gradient-1-snap.png

@@ -103,6 +103,64 @@ describe('backgroundClip', () => {
     expect(toImage(svg)).toMatchImageSnapshot()
   })
 
+  it('should render WebkitTextFillColor as white over gradient', async () => {
+    const svg = await satori(
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          width: '100%',
+          height: '100%',
+          fontSize: 32,
+          fontWeight: 600,
+          background:
+            'radial-gradient(61.04% 180% at 55.38% 0%, #55f114 6.77%, #02ff44 26.56%, #14f13f 40.1%, #02D7FF 67.71%, #1496f3 67.72%, #02D7FF 100%)',
+          backgroundClip: 'text',
+          WebkitTextFillColor: '#ffffff',
+          color: '#ffffff',
+          textShadow:
+            '0px 0px 2px #1677f1,0px 0px 3px #1677f1,0px 0px 4px #1677f1,0px 0px 5px #1677f1,0px 0px 5px #1677f1',
+        }}
+      >
+        Hello
+      </div>,
+      {
+        width: 200,
+        height: 50,
+        fonts,
+      }
+    )
+    expect(toImage(svg, 200)).toMatchImageSnapshot()
+  })
+
+  it('should render WebkitTextFillColor transparent as gradient text', async () => {
+    const svg = await satori(
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          width: '100%',
+          height: '100%',
+          fontSize: 32,
+          background: 'linear-gradient(90deg, #ff00bc, #6400ff)',
+          backgroundClip: 'text',
+          WebkitTextFillColor: 'transparent',
+          color: '#ffffff',
+        }}
+      >
+        Hello
+      </div>,
+      {
+        width: 200,
+        height: 50,
+        fonts,
+      }
+    )
+    expect(toImage(svg, 200)).toMatchImageSnapshot()
+  })
+
   it('should preserve color', async () => {
     const svg = await satori(
       <div