fix: should respect stringify number for line-height (vercel#543)

Close vercel#535

Co-authored-by: Shu Ding <g@shud.in>

src/handler/expand.ts

@@ -44,12 +44,11 @@ function handleFallbackColor(
 }
 
 function purify(name: string, value?: string | number) {
-  if (typeof value === 'number') {
-    if (!optOutPx.has(name)) return value + 'px'
-    if (keepNumber.has(name)) return value
-    return String(value)
-  }
-  return value
+  const num = Number(value)
+  if (isNaN(num)) return value
+  if (!optOutPx.has(name)) return num + 'px'
+  if (keepNumber.has(name)) return num
+  return String(value)
 }
 
 function handleSpecialCase(

test/line-height.test.tsx

@@ -0,0 +1,35 @@
+import { it, describe, expect } from 'vitest'
+
+import { initFonts, toImage } from './utils.js'
+import satori from '../src/index.js'
+
+describe('line-height', () => {
+  let fonts
+  initFonts((f) => (fonts = f))
+  it('should work correctly', async () => {
+    const svgs = await Promise.all(
+      [1, '1'].map((lineHeight) =>
+        satori(
+          <div
+            style={{
+              margin: 0,
+              padding: 0,
+              fontSize: '30px',
+              width: '100px',
+              height: '100px',
+              background: 'white',
+              lineHeight,
+            }}
+          >
+            Hello I am some text that is here.
+          </div>,
+          { width: 100, height: 100, fonts, embedFont: true }
+        )
+      )
+    )
+
+    svgs.forEach((svg) => {
+      expect(toImage(svg, 100)).toMatchImageSnapshot()
+    })
+  })
+})