Skip to content

justifyContent: 'space-evenly' throws, though Yoga supports it #780

Description

@notluquis

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions