Skip to content

Bring the Panda CSS and StyleX pill adapters up to the Tailwind implementation #39

Description

@dogmar

The pill feature shipped Tailwind-only for the MVP. The Panda CSS and StyleX
adapters were removed from the release branch and preserved, unchanged, on
pill/panda-stylex-adapters.

They cannot simply be restored: the Tailwind path changed rendering model while
they sat still, so they now diverge on how the shape is drawn, not just on
details. Picking them back up means reimplementing them against the current
design rather than rebasing.

What changed underneath them

The pill is now applied as a mask, so the element keeps its own background —
colour, gradient, image — and that background is what gets pill-shaped. Both
adapters still paint the shape as a background-image, which covers whatever
background the element already had.

Because a mask erases everything outside the shape:

  • a real CSS border survives only as rectangle fragments, so the border is
    drawn by the worklet from --pill-border-width / --pill-border-color
  • outline and outer box-shadow cannot survive at all, and filter runs
    before the mask, so a shadow has to go on a wrapper
  • the no-worklet fallback is a plain FULL_RADIUS, with no corner-shape

Bugs they still carry

Found by review and fixed on the Tailwind side only:

  • both: the fallback is gated on @supports (corner-shape: superellipse()),
    so a browser supporting neither feature matches nothing and renders a
    rectangle — exactly the browser the fallback exists for
  • Panda: pillFallback sets cornerShape with no border-radius, so
    Safari gets a square box; amtVar defaults to --squircle-amt while the
    worklet reads --pill-squircle-amt, so the amount is inert; pillBase
    carries "data-squircle-pill": "", which compiles to an inert declaration
    since a stylesheet cannot set an attribute; every side variant fetches
    variantBySuffix.get(...) and never uses it, so all 15 emit identical CSS
  • StyleX: the fallback is borderRadius: "50%", an ellipse on any
    non-square element, repeated across all 15 variants

Also parked

The website demos for both (PillPandaDemo, PillStyleXDemo) were removed.
They never worked: they used class names the plugins do not generate, the site
never imported the pill plugin, and nothing registered the paint worklet.

Worth deciding first

Whether these adapters should wrap a single shared core rather than restating
the rules three times. The Tailwind implementation has now been changed five
times in a row without the other two moving, which is what let them drift this
far.

Activity

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

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions