Throw an error when CSS property or Tailwind API is not supported about satori HOT 5 OPEN

Just normal style props.

Here's my before & after in case you find it helpful (playground link).

I ended up starting mostly from scratch since there were so many small issues (definitely not a knock; this library is amazing).

Some of the issues I ran into include:

• flexbox gap property unsupported
• vmin, vmax, vw, vh units silently unsupported
• specifying fontSize in em didn't seem to take effect
• the div must explicitly declare display: flex error came up a lot and is pretty annoying, though I understand the intent behind it since it differs from the normal HTML spec
• backgroundSize: cover not supported
• position: absolute doesn't seem to respect it's nearest relative ancestor; e.g,. it always is relative to the document root
• I had issues getting the local next.js version to display the same as the playground, presumably since they're both using slightly different versions of Satori and the lib is new + updating frequently. Some things like filter: blur(8px) + transform: scale(1.1) would work on the playground but not with the latest version of next.js. Not sure there's much that can be done with these sorts of things aside from just maturing the libs, but I wanted to at least call it out.

None of these issues is a big deal; the real pain is that they're all silent, and the only way to figure out what works & what doesn't is through trial & error.

I know some of the compatibility issues are covered in the readme already and this list goes outside the scope of this issue, but I'm just giving feedback on my experience and hope you find it helpful.

from satori.

There are some cases where a CSS rule is used for compatibility reason like -webkit-* (the component can be used by both Satori and Next.js). But I think it should be easy to filter them out.

from satori.

This is something I'm running into quite a bit when porting headless chrome OG image templates over to Satori.

The process currently involves lots of trial & error to figure out which properties aren't being handled properly, whereas I'd rather fail-fast — or at least have some prominent warnings to go off of.

from satori.

@transitive-bullshit Are you using Tailwind mode or just the normal style prop?

from satori.

Thanks for the great feedback @transitive-bullshit! I think most of these can be improved in future updates.

from satori.