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 satori@0.29.0:
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") // → true
So 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-evenly returns 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.
Bug report
Description / Observed Behavior
Setting
justifyContent: "space-evenly"throws instead of rendering:The value map in
src/handler/compute.tshas five entries andspace-evenlyis not one of them, sogetYogaValueFromCSS(theYAhelper in the bundle) rejects it.The underlying layout engine already supports it. Verified against the shipped bundle of
satori@0.29.0:So both Yoga constants are present in the bundle; they are simply never mapped.
alignContenthas the same gap: its map coversstretch | center | flex-start | flex-end | space-between | space-around | baseline | normal, whileALIGN_SPACE_EVENLYexists and is unreachable.Expected Behavior
space-evenlyis a standard value of bothjustify-contentandalign-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:
Swapping
space-evenlyforspace-aroundrenders;space-evenlythrows.Additional Context
space-evenlyreturns no results, so this does not appear to have been reported before.space-around, which is not the same distribution (half-size gaps at the edges), or inserting spacer nodes.