`justifyContent: 'space-evenly'` throws, though Yoga supports it
Bug report
Description / Observed Behavior
Setting justifyContent: "space-evenly" throws instead of rendering:
Invalid value for CSS property "justifyContent".
Allowed values: "center" | "flex-start" | "flex-end" | "space-between" | "space-around".
Received: "space-evenly".The value map in src/handler/compute.ts has five entries and space-evenly is not one of them, so getYogaValueFromCSS (the YA helper in the bundle) rejects it.
The underlying layout engine already supports it. Verified against the shipped bundle of [email protected]:
const s = fs.readFileSync("node_modules/satori/dist/index.js", "utf8");
// the map that rejects it — 5 entries
s.indexOf("setJustifyContent")
// → {center, "flex-start", "flex-end", "space-between", "space-around"}
s.includes("JUSTIFY_SPACE_EVENLY") // → true
s.includes("ALIGN_SPACE_EVENLY") // → trueSo both Yoga constants are present in the bundle; they are simply never mapped.
alignContent has the same gap: its map covers stretch | center | flex-start | flex-end | space-between | space-around | baseline | normal, while ALIGN_SPACE_EVENLY exists and is unreachable.
Expected Behavior
space-evenly is a standard value of both justify-content and align-content, and Yoga implements it. I would expect Satori to accept it and distribute the free space evenly, including before the first and after the last item.
Reproduction
The playground share link encodes the editor state, so here is the minimal input to paste instead:
<div
style={{
display: 'flex',
flexDirection: 'column',
justifyContent: 'space-evenly',
width: 200,
height: 200,
background: 'white',
}}
>
<div style={{ display: 'flex', height: 20, background: 'tomato' }} />
<div style={{ display: 'flex', height: 20, background: 'tomato' }} />
<div style={{ display: 'flex', height: 20, background: 'tomato' }} />
</div>Swapping space-evenly for space-around renders; space-evenly throws.
Additional Context
- satori 0.29.0, Node 26.
- Searching the issue tracker for
space-evenlyreturns no results, so this does not appear to have been reported before. - Practical impact: distributing N items evenly over a fixed height is common in generated cards. The workaround is
space-around, which is not the same distribution (half-size gaps at the edges), or inserting spacer nodes.
Source: vercel/satori