Bug: box-shadow doesn’t work without explicit height

[shnhrrsn]

Bug report

Description / Observed Behavior

If you don’t provide an explicit height to satori, box-shadow doesn't seem to work:

pass1 - without height	pass2 - with height

Expected Behavior

How did you expect Satori to behave here?

Reproduction

import fs from 'fs/promises'
import { createElement } from 'react'
import satori from 'satori'

const width = 400
const target = createElement('div', {
  style: {
    display: 'flex',
    width: `${width}px`,
    padding: '45px',
  },
  children: createElement('div', {
    style: {
      display: 'flex',
      boxShadow: '10px 10px 10px green',
      width: `${width - 90}px`,
      height: '150px',
      background: 'blue',
    },
  }),
})

const pass1 = await satori(target, { width })

const [, , , , height] = pass1.match(/viewBox="(\d+) (\d+) (\d+) (\d+)"/) ?? []

const pass2 = await satori(target, {
  width,
  height: Number(height),
})

await Promise.all([fs.writeFile('pass1.svg', pass1), fs.writeFile('pass2.svg', pass2)])

Additional Context

Satori version: 0.1.1

A couple of things worth pointing out:

• In the repro sample code you can see I'm just reading the height from pass1 to generate pass2 with a height - so presumably satori should have enough info.
• In pass1 where the shadow doesn't appear, the code for the shadow is still in the SVG but it seems the mask itself is missing the height value:

--- pass1.svg   2023-01-20 01:32:39
+++ pass2.svg   2023-01-20 01:32:52
@@ -1,6 +1,6 @@
 <svg width="400" height="240" viewBox="0 0 400 240" xmlns="http://www.w3.org/2000/svg">
   <mask id="satori_ms-id-0-0" maskUnits="userSpaceOnUse">
-    <rect x="0" y="0" width="400" fill="#fff" />
+    <rect x="0" y="0" width="400" height="240" fill="#fff" />
     <rect x="45" y="45" width="310" height="150" fill="#000" stroke-width="0" />
   </mask>
   <defs>

[ppppqp]

The source of this bug is that when height is not explicitly given, satori will first generate the children of the SVG and use the computedHeight in the end. However, before the computedHeight is obtained, the shadow element is already generated using the undefined SVG height.

A workaround for this issue can be using a placeholder if height is not given and injecting the height later.

[github-actions]

🎉 This issue has been resolved in version 0.4.5 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀