fix: Handle font-size correctly for element like heading (#452)

Close vercel/satori#392
Close vercel/satori#254

src/handler/expand.ts

@@ -301,25 +301,10 @@ export default function expand(
   }
 
   // Calculate the base font size.
-  let baseFontSize: number =
-    typeof transformedStyle.fontSize === 'number'
-      ? transformedStyle.fontSize
-      : inheritedStyle.fontSize
-  if (typeof baseFontSize === 'string') {
-    try {
-      const parsed = new CssDimension(baseFontSize)
-      switch (parsed.unit) {
-        case 'em':
-          baseFontSize = parsed.value * (inheritedStyle.fontSize as number)
-          break
-        case 'rem':
-          baseFontSize = parsed.value * 16
-          break
-      }
-    } catch (err) {
-      baseFontSize = 16
-    }
-  }
+  const baseFontSize = calcBaseFontSize(
+    transformedStyle.fontSize,
+    inheritedStyle.fontSize as number
+  )
   if (typeof transformedStyle.fontSize !== 'undefined') {
     transformedStyle.fontSize = baseFontSize
   }
@@ -393,6 +378,22 @@ export default function expand(
   return transformedStyle
 }
 
+function calcBaseFontSize(size: number | string, inheritedSize: number) {
+  if (typeof size === 'number') return size
+
+  try {
+    const parsed = new CssDimension(size)
+    switch (parsed.unit) {
+      case 'em':
+        return parsed.value * inheritedSize
+      case 'rem':
+        return parsed.value * 16
+    }
+  } catch (err) {
+    return inheritedSize
+  }
+}
+
 /**
  * @see https://github.com/RazrFalcon/resvg/issues/579
  */

test/font.test.tsx

@@ -111,4 +111,39 @@ describe('Font', () => {
 
     expect(toImage(svg, 100)).toMatchImageSnapshot()
   })
+
+  it('should handle font-size correctly for element like heading', async () => {
+    const svgs = await Promise.all(
+      [20, '0.8em', '1.2rem'].map((fontSize) =>
+        satori(
+          <div
+            style={{
+              height: '100%',
+              width: '100%',
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              justifyContent: 'center',
+              backgroundColor: '#fff',
+              fontSize,
+              fontWeight: 600,
+            }}
+          >
+            <h1 style={{ color: 'red' }}>Hello, World</h1>
+            <h2 style={{ color: 'orange' }}>Hello, World</h2>
+            <h5 style={{ color: 'grey', fontSize: 20 }}>Hello, World</h5>
+          </div>,
+          {
+            width: 100,
+            height: 100,
+            fonts,
+          }
+        )
+      )
+    )
+
+    svgs.forEach((svg) => {
+      expect(toImage(svg, 100)).toMatchImageSnapshot()
+    })
+  })
 })