feat: Support text-decoration-style: double (#685)

Seems easy to support.

Author: shuding

README.md

@@ -194,7 +194,7 @@ Satori uses the same Flexbox [layout engine](https://yogalayout.com) as React Na
 <tr><td><code>textAlign</code></td><td><code>start</code>, <code>end</code>, <code>left</code>, <code>right</code>, <code>center</code>, <code>justify</code>, default to <code>start</code></td><td></td></tr>
 <tr><td><code>textTransform</code></td><td><code>none</code>, <code>lowercase</code>, <code>uppercase</code>, <code>capitalize</code>, defaults to <code>none</code></td><td></td></tr>
 <tr><td><code>textOverflow</code></td><td><code>clip</code>, <code>ellipsis</code>, defaults to <code>clip</code></td><td></td></tr>
-<tr><td><code>textDecoration</code></td><td>Support line types <code>underline</code> and <code>line-through</code>, and styles <code>dotted</code>, <code>dashed</code>, <code>solid</code></td><td><a href="https://og-playground.vercel.app/?share=nVLLTsMwEPwVaxHqJYgUOCCr9EL5Ajj24mQ3icH1Ro5DW6L8O3ZeQpwKJ-_M7ox25O0gZySQsEH9ubdCNP5s6KnrYi1ERbqsvBSrdZper5KRPGr01S8OdVMbdQ5sYeg0s7HeaUe512xDL2fTHuzcrRWitqUU63RiMpV_lI5bi89s2AXFVVEUixtb_6q_SIr7u4kqVR3lEfT93m5jEZMsMYSnk99Rzk5NO1i2tArT21hsbsPwJaqwEjmjJ-mCLtbH4RtfhWxlNVj8JP6-hUD2nlA4wsFthP_aRqBqqmCVmXYMN-LZa34hAa6jvAHZwXACIB_TNIHxRkA-RICUtSXIQpmGEqADv-u3cx0PzB8HFHziP74cMkKQ3rXUJ-BVFiYqMoaP7AxC_w0">Example</a></td></tr>
+<tr><td><code>textDecoration</code></td><td>Support line types <code>underline</code> and <code>line-through</code>, and styles <code>dotted</code>, <code>dashed</code>, <code>double</code>, <code>solid</code></td><td><a href="https://og-playground.vercel.app/?share=pVPLTsMwEPwVaytUkAKkPCRklV4oXwDHXhx7YxtcO3Ic2hLl37GTtEKIQynywTvjndGstG6BO4FAYS70x8oSUoedwce2TTUhCrVUgZLpLM_PptlAbrQI6gcndF0ZtotsaXC7Z1O91B550M7GN-5Ms7b714oJoa2kZJaPTMH4u_SuseLJGeejYlKW5cHN2fCiP5GS25uRkqxK8gS6bmUXqUiTHMYgAbdhidx5NmawzuI0di9SMb-OzceoYiT0Ro_SAzpan5ovg4qzSdVbfCf-noIIFwIK4lH0bgM8KQ0RrFbRqjDNMNyAT8rUFAbJhHP-_1CDl5cFO8-z_lzdX_ySb39DBq5KTjXQFvoVBfqQ5xkMOwz0LgGBRSOBlszUmAGu3Zt-3VXpA4RNj6JP2rPndYECaPANdhkEVsQOhca4jfNGQPcF">Example</a></td></tr>
 <tr><td><code>textShadow</code></td><td>Supported</td><td></td></tr>
 <tr><td><code>lineHeight</code></td><td>Supported</td><td></td></tr>
 <tr><td><code>letterSpacing</code></td><td>Supported</td><td></td></tr>

src/builder/text-decoration.ts

@@ -45,6 +45,23 @@ export default function buildDecoration(
       ? `0 ${height * 2}`
       : undefined
 
+  // https://www.w3.org/TR/css-backgrounds-3/#valdef-line-style-double
+  const extraLine =
+    textDecorationStyle === 'double'
+      ? buildXMLString('line', {
+          x1: left,
+          y1: y + height + 1,
+          x2: left + width,
+          y2: y + height + 1,
+          stroke: textDecorationColor || color,
+          'stroke-width': height,
+          'stroke-dasharray': dasharray,
+          'stroke-linecap':
+            textDecorationStyle === 'dotted' ? 'round' : 'square',
+          transform: matrix,
+        })
+      : ''
+
   return (
     (clipPathId ? `<g clip-path="url(#${clipPathId})">` : '') +
     buildXMLString('line', {
@@ -58,6 +75,7 @@ export default function buildDecoration(
       'stroke-linecap': textDecorationStyle === 'dotted' ? 'round' : 'square',
       transform: matrix,
     }) +
+    extraLine +
     (clipPathId ? '</g>' : '')
   )
 }

test/__image_snapshots__/text-decoration-test-tsx-test-text-decoration-test-tsx-text-decoration-should-work-correctly-when-text-decoration-style-double-1-snap.png

@@ -187,4 +187,45 @@ describe('Text Decoration', () => {
     )
     expect(toImage(svg, 100)).toMatchImageSnapshot()
   })
+
+  it('Should work correctly when `text-decoration-style: double`', async () => {
+    const svg = await satori(
+      <div
+        style={{
+          height: '100%',
+          width: '100%',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: '#fff',
+          fontSize: 20,
+          fontWeight: 600,
+        }}
+      >
+        <div
+          style={{
+            backgroundColor: '#91a8d0',
+            textDecoration: 'underline double',
+            color: 'white',
+          }}
+        >
+          It doesn’t exist, it never has. I’m nostalgic for a place that never
+          existed.
+        </div>
+        <div
+          style={{
+            backgroundColor: '#000',
+            textDecoration: 'line-through double',
+            color: 'white',
+          }}
+        >
+          It doesn’t exist, it never has. I’m nostalgic for a place that never
+          existed.
+        </div>
+      </div>,
+      { width: 200, height: 200, fonts }
+    )
+    expect(toImage(svg, 200)).toMatchImageSnapshot()
+  })
 })