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.
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 whateverbackground the element already had.
Because a mask erases everything outside the shape:
bordersurvives only as rectangle fragments, so the border isdrawn by the worklet from
--pill-border-width/--pill-border-coloroutlineand outerbox-shadowcannot survive at all, andfilterrunsbefore the mask, so a shadow has to go on a wrapper
FULL_RADIUS, with nocorner-shapeBugs they still carry
Found by review and fixed on the Tailwind side only:
@supports (corner-shape: superellipse()),so a browser supporting neither feature matches nothing and renders a
rectangle — exactly the browser the fallback exists for
pillFallbacksetscornerShapewith noborder-radius, soSafari gets a square box;
amtVardefaults to--squircle-amtwhile theworklet reads
--pill-squircle-amt, so the amount is inert;pillBasecarries
"data-squircle-pill": "", which compiles to an inert declarationsince a stylesheet cannot set an attribute; every side variant fetches
variantBySuffix.get(...)and never uses it, so all 15 emit identical CSSborderRadius: "50%", an ellipse on anynon-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.