Skip to content

Conversation

kirandash
Copy link
Contributor

Description

Current behavior:

When setting z-index values in styles, a warning appears stating "Expected style 'zIndex: 1px' to be unitless". This warning is incorrect since z-index should be handled as a unitless property. While z-index has no effect in SVG (as elements are painted in document order), the warning itself needs to be fixed for better developer experience.

Changes in this PR:

  • Added special case handling for zIndex property
  • Added clear warning message explaining that z-index is not supported in SVG
  • Improved developer experience by providing more accurate feedback about SVG limitations

Closes #660

Test plan

Before

The floating warning appears in console when setting z-index:

style={{
  zIndex: 1
}}

Shows warning: "Expected style 'zIndex: 1px' to be unitless"

image

After

  1. Set z-index in styles
  2. Verify the correct warning appears: "z-index is not supported in SVG. Elements are painted in the order they appear in the document."
  3. Test with different z-index values
  4. Verify the warning is clear and helpful for developers

image

The warning "Expected style 'zIndex: 1px' to be unitless" appears when
setting z-index values. While z-index has no effect in SVG (as elements
are painted in document order), the warning itself is incorrect since
z-index should be handled as a unitless property.

Added zIndex to handleSpecialCase to properly handle it before unit
processing and provide a clear warning about SVG limitations.

Fixes vercel#660
@kirandash kirandash requested a review from shuding as a code owner April 1, 2025 16:53
Copy link

vercel bot commented Apr 1, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
satori-playground ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jul 23, 2025 9:28am
@shuding shuding merged commit 691f01d into vercel:main Jul 23, 2025
2 checks passed
@shuding
Copy link
Member

shuding commented Jul 23, 2025

I changed the message to "z-index is currently not supported." as in the future Satori could support it (by re-ordering the generated SVG elements).

Copy link

🎉 This PR is included in version 0.16.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

2 participants