hsl/hsla colors not caught by compatibility checker

[tlow92]

Describe the Bug

No hsl color is supported in microsoft outlook, but react-email renders them correctly everywhere else.
react-email also does not show a compatibility warning, so it's very hard to notice if you do not use outlook yourself.
Example colors: "hsl(198, 65%, 45%)" or "hsla(240, 100%, 50%, 0.75)"

Link to the code that reproduces this issue

https://github.com/tlow92/react-email-hsl-colors

Direct link to specific change to the starter template:
tlow92/react-email-hsl-colors@bf954a8

To Reproduce

1. Use following backgroundColor on any element "hsl(198, 65%, 45%)"
2. Check in preview server -> Rendered correctly
3. Use "Send" feature to send it to any email that can be accessed with Microsoft Outlook
4. Background color is missing

Rendered in preview server:

Rendered in Microsoft Outlook

Expected Behavior

I would expect either one of the following

1. Automatic conversion from hsl/hsla to a compatible color like rgb
2. Show compatibility warning

[tlow92]

I opened a PR which fixes this in tailwind, similar to the existing behavior for certain rgb sanitization.

For the regular render method there is no sanitization yet, so I could add some compatibility warning for the preview-server. What do you think?

[gabrielmfern]

React Email doesn't really do these kinds of conversions, we believe the best DX is bringing awareness and teaching people about email compatibility, fixing what can be fixed reliably with our unstyled components, but avoiding behavior that might be unexpected to users like this. Closing as not planned.

The Tailwind component does it mainly because the base colors that Tailwind has oklch, and so we convert it to rgb to have baseline support by default. Unsure if we'll accept the PR, will leave it open for now and think about it.

[tlow92]

@gabrielmfern I mainly did this because tailwind has conversion already. But I agree compatibility warning would be the proper way regular react-email. If you would like I can create a separate PR for showing a compatibility warning in the preview server. I think this really is a "bug" in react-email right now.

[gabrielmfern]

yeah true, the current code should work to catch these kinds of CSS functions though, it's a bug in the compatibility checker, good catch

going to reopen this, feel free to opening a PR for that if you want to