Color in hsl is not applied when using deg units (local hosted)

[Arctomachine]

Bug report

Description / Observed Behavior

When defining color in hsl, if it has deg units, it is not applied, black is used instead. Example: hsl(200deg, 50%, 50%) - expected blue, results in black. Bug appears when local hosted, but not in playground.

Result in local project:

Result in playground:

Expected Behavior

Results should be identical, both words must be blue in local project

Reproduction

As mentioned above, it works in playground.
https://og-playground.vercel.app/?share=hZNva9swEMa_yiEoScAsTtigiCQwunbbm73Z3gz8RrHOtjJZMpK81Av-7jvZ_Ze2bs8gpOP3HPLdoxPLrUTG2XIJN0Lrvcj_QGFN8CCMhOvaHhQIhyA7I2qVE9KBtkKizAxpCmdr-GptqRFuHmRXX354UAZCpTxIrO2HzAz4b9tCLgwI7S04DK2jPRStyYOyBnJbN9agCaMYodGiK51tjaQK8wVsd3DKDBBofKBVW7eCLcwqr-frNJVYJvApvRiWxewZuX5CnmMRvLvNPO4fYyPV3_NMDB86jdvTcJWXEdv3U_1DDqv1ZfI6E_s8_hiH2bFSAWcT5FHJUBG0StOLKaZCVVbhHUgqH9tJVKHxdooKeBs-a1Ua4nKaBLopUkTqe8Dav4seWh9U0V1RY4h7E-_789yOphPGb0xsfEMGup_AMFh-54S-331DrW2yWUaIpOe1p6Vrkh6t0_JV5WZJLniSW2SmB8gMS5htonE94yc2DIrxSzIXGwfC-Md4kLhvS8YLMj0mjF7DQf3qmvjownE4UZ3omet6j5Lx4Frs-_8

But same code is not working in local project.
Here is entire code from /api/og endpoint

// pages/api/og.tsx
import {ImageResponse} from '@vercel/og';

export const config = {
    runtime: 'edge',
};

export default function Og() {
    const color1 = 'hsl(200deg, 50%, 50%)'
    const color2 = 'hsl(200, 50%, 50%)'

    return new ImageResponse(
        (
            <div
                style={{
                    fontSize: 128,
                    background: 'white',
                    width: '100%',
                    height: '100%',
                    display: 'flex',
                    textAlign: 'center',
                    alignItems: 'center',
                    justifyContent: 'center',
                }}
            >
                <span style={{color: color1}}>Hello,</span>
                <span style={{color: color2}}>world</span>
            </div>
        ),
        {
            width: 800,
            height: 400,
        },
    );
}

Additional Context

Project settings:

• environment: node.js 16.15.1 lts
• react: 18.2.0
• next: 13.1.2
• @vercel/og: 0.0.27

[sahithyandev]

I tried to find the cause of this bug. And I couldn't find it.

[Arctomachine]

Can it be caused by differences between normal edge runtime and its node emulation?
When render engine cannot read property value or thinks it is incorrect, it uses default value. Maybe some regex missing optional deg when reading props?

[Arctomachine]

Node 18 lts (v18.13.0), still getting this bug.

[shuding]

Can you try latest @vercel/og?

[Arctomachine]

Issue remains in latest version 0.1.0 and beta version 0.2.0-beta.0

[Arctomachine]

I checked my sandbox link again and found out this.

1. When it is set to svg output, everything works
   
2. When set to png output, it behaves the same way as in my local project, where it is also png
   
3. And in pdf output all colors are black
   

Does it help to narrow down this issue?

[shuding]

Thanks! Since the SVG is correct, this should be something in Resvg (handles SVG → PNG). I'll upgrade that lib and see if it's fixed in the upstream.

[shuding]

Just verified, this is indeed caused by https://github.com/RazrFalcon/resvg, you can open an issue there — however I'd like to also work around it inside Satori by removing the deg when generating the SVG.

[yisibl]

resvg has no plans to implement this linebender/resvg#579, I think it would be better to implement it separately in this library.