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

Close #535

Co-authored-by: Shu Ding <[email protected]>

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()
+ })
+ })
+})