BUG: Fails to apply HSL colors with a decimal point in the hue.

[Ashwin-Mahadevan]

Bug report

Description / Observed Behavior

When a decimal point is provided

Expected Behavior

How did you expect Satori to behave here?

Reproduction

Note: Satori functions correctly in the OG-Image Playground (Reproduction)

However, in any Next.js app, the bug occurs. I've tried the lastest next-js and satori releases as well as a few versions back. To reproduce this, git clone https://github.com/ashwin-mahadevan/satori-decimal-hue-reproduction, start the Next server, and navigate to / or /?decimal=true.

or use the following code in an app-router route.tsx file:

import { ImageResponse } from "next/og";

export function GET(request) {
  const decimal = request.nextUrl.searchParams.get("decimal") === "true";

  const element = (
    <div
      style={{
        display: "flex",
        width: 256,
        height: 256,
        backgroundColor: decimal
          ? "hsl(20.5 90.2% 48.2%)" // Shows black image with decimal hue.
          : "hsl(21 90.2% 48.2%)", // Shows correct orange image with integer hue.
      }}
    />
  );

  return new ImageResponse(element, { width: 256, height: 256 });
}