Skip to content

feat: add Panda CSS preset (#27) - #28

Closed
dogmar wants to merge 2 commits into
mainfrom
claude/sad-booth-758000
Closed

dogmar wants to merge 2 commits into
mainfrom
claude/sad-booth-758000

Conversation

@dogmar

@dogmar dogmar commented May 3, 2026

Copy link
Copy Markdown
Collaborator

Summary

  • Adds a Panda CSS preset at @klinking/squircle/panda-preset covering the full 15-utility radius matrix, with property names mirroring Panda's border<Side>Radius / rounded<Side> convention (e.g. squircleTopLeftRadius shorthand squircleTopLeft).
  • Refactors the shared formula into squircleCssObj() in variants.ts so the Tailwind plugin, the static-CSS generator, and the new Panda preset all share one source of truth. Tailwind output is byte-identical (existing 163 snapshot tests unchanged).
  • Closes part of Extend squircle utilities to work in stylex and panda-css #27 — the StyleX half is split out into a separate WIP branch (#TBD) because StyleX's babel plugin rejects every function-call and computed @-rule key inside stylex.create(), which makes the originally-planned factory API non-viable. Research notes are checked in on that branch.

What ships

Property name (camelCase) Shorthand Targets
squircleRadius squircle border-radius (all four corners)
squircleTopRadius squircleTop top corners
squircleRightRadius / Left / Bottom / Start / End corresponding shorthands per-side aggregates
squircleTopLeftRadius / TopRight / BottomRight / BottomLeft corresponding shorthands per-corner physical
squircleStartStartRadius / StartEnd / EndStart / EndEnd corresponding shorthands per-corner logical
squircleAmount squircleAmt --squircle-amt + corner-shape

Plus a _squircleSupported condition registered for @supports (corner-shape: superellipse(2)) overrides.

Consumer setup

// panda.config.ts
import { defineConfig } from "@pandacss/dev";
import squirclePreset from "@klinking/squircle/panda-preset";

export default defineConfig({
  presets: ["@pandacss/dev/presets", squirclePreset()],
  // ...
});
<div className={css({ squircle: "md", padding: "4" })} />
<div className={css({ squircleTopLeft: "lg", squircleAmt: 3 })} />

@pandacss/dev is added as an optional peer dependency.

Test plan

  • vp run @klinking/squircle#test:panda — 11 unit tests (preset shape + transform output snapshots + amtVar/rVar option threading)
  • vp run @klinking/squircle#test:plugin — existing 77 Tailwind tests unchanged
  • vp run @klinking/squircle#test:css — existing 83 generated-CSS tests unchanged
  • vp lint clean
  • tsc --noEmit clean
  • Manual smoke in a real Panda project (apply the preset, confirm squircle: "md" produces border-radius: var(--radii-md) + @supports-gated correction in DevTools)

🤖 Generated with Claude Code

Ships a definePreset-style export at @klinking/squircle/panda-preset
covering the full 15-utility radius matrix. Property names follow
Panda's own border-radius convention (e.g. `squircleTopLeftRadius`
mirrors `borderTopLeftRadius`, with the shorthand `squircleTopLeft`
mirroring `roundedTopLeft`). Radius utilities resolve through the
consumer's `radii` theme tokens; `squircleAmount` accepts numeric
values. A `_squircleSupported` condition is registered for one-off
overrides, and `amtVar`/`rVar` options match the Tailwind plugin.

Refactors the shared math into `squircleCssObj()` in variants.ts,
which the Tailwind plugin and the static-CSS generator now both
consume. Tailwind output is byte-identical (existing snapshots
unchanged).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@dogmar dogmar closed this May 4, 2026
@dogmar
dogmar deleted the claude/sad-booth-758000 branch May 4, 2026 23:39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant