diff --git a/.github/workflows/sync-readme.yml b/.github/workflows/sync-readme.yml
index 0ce8ab5..ee197bc 100644
--- a/.github/workflows/sync-readme.yml
+++ b/.github/workflows/sync-readme.yml
@@ -13,7 +13,7 @@ on:
workflow_dispatch:
permissions:
- contents: write
+ contents: read
jobs:
sync:
@@ -22,7 +22,6 @@ jobs:
- uses: actions/checkout@v4
with:
ref: ${{ github.head_ref }}
- token: ${{ secrets.GITHUB_TOKEN }}
- uses: voidzero-dev/setup-vp@v1
with:
@@ -34,34 +33,10 @@ jobs:
- name: Run sync script
run: vp run sync-readme
- - name: Commit and push if changed
- id: sync
+ - name: Fail if README is out of sync
run: |
- if git diff --quiet README.md; then
- echo "pushed=false" >> "$GITHUB_OUTPUT"
- exit 0
- fi
- git config user.name "github-actions[bot]"
- git config user.email "github-actions[bot]@users.noreply.github.com"
- git add README.md
- git commit -m "docs: sync README code blocks"
- if ! git push; then
- echo "::error::README is out of sync and could not push fix to branch"
+ if ! git diff --quiet README.md; then
+ echo "::error::README is out of sync. Run 'bash scripts/sync-readme.sh' locally and push."
+ git diff README.md
exit 1
fi
- echo "pushed=true" >> "$GITHUB_OUTPUT"
-
- # GitHub's anti-loop policy: pushes made with the default GITHUB_TOKEN
- # don't fire `pull_request`/`push` events, so the synced commit would
- # land on the PR with no CI run. Re-dispatch CI manually so the new HEAD
- # gets validated. (For a "proper" fix that fires the synchronize event,
- # plumb a PAT/App token through the checkout step's `token:` input.)
- - name: Re-trigger CI on synced commit
- if: steps.sync.outputs.pushed == 'true'
- env:
- GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
- BRANCH: ${{ github.head_ref }}
- run: |
- gh workflow run ci.yml --ref "$BRANCH"
- gh workflow run sync-readme.yml --ref "$BRANCH"
- gh workflow run pr-title.yml --ref "$BRANCH"
diff --git a/README.md b/README.md
index bae895f..9ba1568 100644
--- a/README.md
+++ b/README.md
@@ -787,150 +787,47 @@ If you'd rather not add a dependency, copy the source directly. Click to expand
-tailwind/index.mjs — the Tailwind plugin and tailwind-merge config
-
-
+squircleMergeConfig — tailwind-merge conflict config
```js
-import { a as squircleCssObj, i as SUPPORTS_RULE, o as variantEntries } from "../variants-CUhqvLRq.mjs";
-import plugin from "tailwindcss/plugin";
-//#region src/tailwind.ts
-const squircle = plugin.withOptions((options = {}) => ({ matchUtilities, theme }) => {
- const amtVar = options.amtVar ?? options["amt-var"] ?? "--squircle-amt";
- const rVar = options.rVar ?? options["r-var"] ?? "--squircle-r";
- const prefix = options.prefix ?? "squircle";
- const radiusValues = theme("borderRadius");
- matchUtilities({ [`${prefix}-amt`]: (value) => ({
- [amtVar]: value,
- [SUPPORTS_RULE]: { "corner-shape": `superellipse(var(${amtVar}))` }
- }) }, { type: "number" });
- for (const [suffix, props] of variantEntries()) matchUtilities({ [suffix ? `${prefix}-${suffix}` : prefix]: (value) => squircleCssObj(props, value, {
- amtVar,
- rVar
- }) }, {
- type: "length",
- values: radiusValues
- });
-});
+import { extendTailwindMerge } from "tailwind-merge";
+
const allRoundedGroups = [
- "rounded",
- "rounded-s",
- "rounded-e",
- "rounded-t",
- "rounded-r",
- "rounded-b",
- "rounded-l",
- "rounded-ss",
- "rounded-se",
- "rounded-es",
- "rounded-ee",
- "rounded-tl",
- "rounded-tr",
- "rounded-br",
- "rounded-bl"
+ "rounded", "rounded-s", "rounded-e", "rounded-t", "rounded-r",
+ "rounded-b", "rounded-l", "rounded-ss", "rounded-se", "rounded-es",
+ "rounded-ee", "rounded-tl", "rounded-tr", "rounded-br", "rounded-bl",
];
-const squircleMergeConfig = { extend: {
- classGroups: {
- squircle: [
- { squircle: [() => true] },
- { "squircle-t": [() => true] },
- { "squircle-r": [() => true] },
- { "squircle-b": [() => true] },
- { "squircle-l": [() => true] },
- { "squircle-s": [() => true] },
- { "squircle-e": [() => true] },
- { "squircle-tl": [() => true] },
- { "squircle-tr": [() => true] },
- { "squircle-br": [() => true] },
- { "squircle-bl": [() => true] },
- { "squircle-ss": [() => true] },
- { "squircle-se": [() => true] },
- { "squircle-es": [() => true] },
- { "squircle-ee": [() => true] }
- ],
- "squircle-amt": [{ "squircle-amt": [() => true] }]
- },
- conflictingClassGroups: {
- squircle: [...allRoundedGroups, "squircle-amt"],
- ...Object.fromEntries(allRoundedGroups.map((g) => [g, ["squircle", "squircle-amt"]]))
- }
+
+export const squircleMergeConfig = { extend: {
+ classGroups: {
+ squircle: [
+ { squircle: [() => true] },
+ { "squircle-t": [() => true] },
+ { "squircle-r": [() => true] },
+ { "squircle-b": [() => true] },
+ { "squircle-l": [() => true] },
+ { "squircle-s": [() => true] },
+ { "squircle-e": [() => true] },
+ { "squircle-tl": [() => true] },
+ { "squircle-tr": [() => true] },
+ { "squircle-br": [() => true] },
+ { "squircle-bl": [() => true] },
+ { "squircle-ss": [() => true] },
+ { "squircle-se": [() => true] },
+ { "squircle-es": [() => true] },
+ { "squircle-ee": [() => true] },
+ ],
+ "squircle-amt": [{ "squircle-amt": [() => true] }],
+ },
+ conflictingClassGroups: {
+ squircle: [...allRoundedGroups, "squircle-amt"],
+ ...Object.fromEntries(allRoundedGroups.map((g) => [g, ["squircle", "squircle-amt"]])),
+ },
} };
-//#endregion
-export { squircle as default, squircleMergeConfig };
-//# sourceMappingURL=index.mjs.map
+export const twMerge = extendTailwindMerge(squircleMergeConfig);
```
-
-
-
-
-
-panda/index.mjs — the Panda CSS preset
-
-
-
-````js
-import { a as squircleCssObj, i as SUPPORTS_RULE, o as variantEntries, t as CAMEL_VARIANTS } from "../variants-CUhqvLRq.mjs";
-import { definePreset } from "@pandacss/dev";
-//#region src/panda.ts
-/**
-* Build the Panda preset object. Pass directly to `presets:` in `panda.config.ts`:
-*
-* ```ts
-* import { defineConfig } from '@pandacss/dev'
-* import squirclePreset from '@klinking/squircle/panda'
-*
-* export default defineConfig({
-* presets: ['@pandacss/dev/presets', squirclePreset()],
-* })
-* ```
-*
-* Naming follows Panda's own border-radius convention: full property names like
-* `squircleTopLeftRadius` mirror `borderTopLeftRadius`, and shorthands like
-* `squircleTopLeft` mirror `roundedTopLeft`. The shape table is identical to
-* Panda's built-in radius utilities.
-*/
-function squirclePandaPreset(options = {}) {
- const amtVar = options.amtVar ?? "--squircle-amt";
- const rVar = options.rVar ?? "--squircle-r";
- const utilities = {};
- const variantBySuffix = new Map(variantEntries());
- for (const variant of CAMEL_VARIANTS) {
- const props = variantBySuffix.get(variant.suffix);
- if (!props) continue;
- utilities[variant.property] = {
- shorthand: variant.shorthand,
- values: "radii",
- transform: (value) => squircleCssObj(props, value, {
- amtVar,
- rVar,
- case: "camel"
- })
- };
- }
- utilities["squircleAmount"] = {
- shorthand: "squircleAmt",
- values: { type: "number" },
- transform: (value) => ({
- [amtVar]: value,
- [SUPPORTS_RULE]: { cornerShape: `superellipse(var(${amtVar}))` }
- })
- };
- return definePreset({
- name: "@klinking/squircle",
- utilities: { extend: utilities },
- conditions: { extend: { squircleSupported: SUPPORTS_RULE } }
- });
-}
-//#endregion
-export { squirclePandaPreset as default, squirclePandaPreset };
-
-//# sourceMappingURL=index.mjs.map
-````
-
-
-
@@ -940,229 +837,225 @@ export { squirclePandaPreset as default, squirclePandaPreset };
````js
import * as stylex from "@stylexjs/stylex";
-//#region src/stylex.ts
/**
-* StyleX squircle utilities — generated from this template by
-* `scripts/generate-stylex.ts`.
-*
-* Each variant is a *dynamic* style — a function that takes a `radius` (and
-* an optional superellipse `amt`) and produces a `borderRadius` +
-* `cornerShape` pair gated behind `@supports (corner-shape: superellipse(2))`.
-* Browsers that don't support `corner-shape` fall back to a plain rounded
-* rectangle at the same radius.
-*
-* ```tsx
-* import * as stylex from '@stylexjs/stylex';
-* import { squircle } from '@klinking/squircle/stylex';
-*
-*
-*
-* ```
-*
-* If `amt` is omitted, the corrected radius and `corner-shape` use the
-* literal default exponent of `2` — pass `amt` explicitly per-call site to
-* tune it. Unlike the Tailwind and Panda integrations, this preset does not
-* read `--squircle-amt`; StyleX's per-call parameter is the only knob.
-*
-* **Constraint** — StyleX's babel plugin requires `stylex.create(...)` to
-* receive a fully-static object literal, and forbids destructuring,
-* spreading, or default values on dynamic-style function parameters. The
-* whole 15-variant table is therefore spelled out verbatim in the generated
-* output. Every entry in this template must remain statically analyzable at
-* its final call site.
-*
-* **How to modify**
-*
-* - To tweak a *variant's body* (the `borderRadius`/`cornerShape` block),
-* edit `renderVariant` in `scripts/generate-stylex.ts`.
-* - To add or rename variants, edit `CAMEL_VARIANTS` and `VARIANTS` in
-* `variants.ts`.
-* - To tweak the *file shell* (imports, docstring, the wrapping
-* `stylex.create({ ... })` call), edit this template.
-*
-* Then run `tsx scripts/generate-stylex.ts` (or just `vp run build`) to
-* regenerate `stylex.ts`. Do not hand-edit `stylex.ts`.
-*/
+ * StyleX squircle utilities — generated from this template by
+ * `scripts/generate-stylex.ts`.
+ *
+ * Each variant is a *dynamic* style — a function that takes a `radius` (and
+ * an optional superellipse `amt`) and produces a `borderRadius` +
+ * `cornerShape` pair gated behind `@supports (corner-shape: superellipse(2))`.
+ * Browsers that don't support `corner-shape` fall back to a plain rounded
+ * rectangle at the same radius.
+ *
+ * ```tsx
+ * import * as stylex from '@stylexjs/stylex';
+ * import { squircle } from '@klinking/squircle/stylex';
+ *
+ *
+ *
+ * ```
+ *
+ * If `amt` is omitted, the corrected radius and `corner-shape` use the
+ * literal default exponent of `2` — pass `amt` explicitly per-call site to
+ * tune it. Unlike the Tailwind and Panda integrations, this preset does not
+ * read `--squircle-amt`; StyleX's per-call parameter is the only knob.
+ *
+ * **Constraint** — StyleX's babel plugin requires `stylex.create(...)` to
+ * receive a fully-static object literal, and forbids destructuring,
+ * spreading, or default values on dynamic-style function parameters. The
+ * whole 15-variant table is therefore spelled out verbatim in the generated
+ * output. Every entry in this template must remain statically analyzable at
+ * its final call site.
+ *
+ * **How to modify**
+ *
+ * - To tweak a *variant's body* (the `borderRadius`/`cornerShape` block),
+ * edit `renderVariant` in `scripts/generate-stylex.ts`.
+ * - To add or rename variants, edit `CAMEL_VARIANTS` and `VARIANTS` in
+ * `variants.ts`.
+ * - To tweak the *file shell* (imports, docstring, the wrapping
+ * `stylex.create({ ... })` call), edit this template.
+ *
+ * Then run `tsx scripts/generate-stylex.ts` (or just `vp run build`) to
+ * regenerate `stylex.ts`. Do not hand-edit `stylex.ts`.
+ */
const squircle = stylex.create({
- all: (radius, amt) => ({
- borderRadius: {
- default: radius,
- "@supports (corner-shape: superellipse(2))": `calc(${radius} * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * ${amt ?? 2}))))`
- },
- cornerShape: {
- default: null,
- "@supports (corner-shape: superellipse(2))": `superellipse(${amt ?? 2})`
- }
- }),
- top: (radius, amt) => ({
- borderTopLeftRadius: {
- default: radius,
- "@supports (corner-shape: superellipse(2))": `calc(${radius} * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * ${amt ?? 2}))))`
- },
- borderTopRightRadius: {
- default: radius,
- "@supports (corner-shape: superellipse(2))": `calc(${radius} * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * ${amt ?? 2}))))`
- },
- cornerShape: {
- default: null,
- "@supports (corner-shape: superellipse(2))": `superellipse(${amt ?? 2})`
- }
- }),
- right: (radius, amt) => ({
- borderTopRightRadius: {
- default: radius,
- "@supports (corner-shape: superellipse(2))": `calc(${radius} * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * ${amt ?? 2}))))`
- },
- borderBottomRightRadius: {
- default: radius,
- "@supports (corner-shape: superellipse(2))": `calc(${radius} * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * ${amt ?? 2}))))`
- },
- cornerShape: {
- default: null,
- "@supports (corner-shape: superellipse(2))": `superellipse(${amt ?? 2})`
- }
- }),
- bottom: (radius, amt) => ({
- borderBottomLeftRadius: {
- default: radius,
- "@supports (corner-shape: superellipse(2))": `calc(${radius} * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * ${amt ?? 2}))))`
- },
- borderBottomRightRadius: {
- default: radius,
- "@supports (corner-shape: superellipse(2))": `calc(${radius} * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * ${amt ?? 2}))))`
- },
- cornerShape: {
- default: null,
- "@supports (corner-shape: superellipse(2))": `superellipse(${amt ?? 2})`
- }
- }),
- left: (radius, amt) => ({
- borderTopLeftRadius: {
- default: radius,
- "@supports (corner-shape: superellipse(2))": `calc(${radius} * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * ${amt ?? 2}))))`
- },
- borderBottomLeftRadius: {
- default: radius,
- "@supports (corner-shape: superellipse(2))": `calc(${radius} * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * ${amt ?? 2}))))`
- },
- cornerShape: {
- default: null,
- "@supports (corner-shape: superellipse(2))": `superellipse(${amt ?? 2})`
- }
- }),
- start: (radius, amt) => ({
- borderStartStartRadius: {
- default: radius,
- "@supports (corner-shape: superellipse(2))": `calc(${radius} * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * ${amt ?? 2}))))`
- },
- borderEndStartRadius: {
- default: radius,
- "@supports (corner-shape: superellipse(2))": `calc(${radius} * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * ${amt ?? 2}))))`
- },
- cornerShape: {
- default: null,
- "@supports (corner-shape: superellipse(2))": `superellipse(${amt ?? 2})`
- }
- }),
- end: (radius, amt) => ({
- borderStartEndRadius: {
- default: radius,
- "@supports (corner-shape: superellipse(2))": `calc(${radius} * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * ${amt ?? 2}))))`
- },
- borderEndEndRadius: {
- default: radius,
- "@supports (corner-shape: superellipse(2))": `calc(${radius} * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * ${amt ?? 2}))))`
- },
- cornerShape: {
- default: null,
- "@supports (corner-shape: superellipse(2))": `superellipse(${amt ?? 2})`
- }
- }),
- topLeft: (radius, amt) => ({
- borderTopLeftRadius: {
- default: radius,
- "@supports (corner-shape: superellipse(2))": `calc(${radius} * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * ${amt ?? 2}))))`
- },
- cornerShape: {
- default: null,
- "@supports (corner-shape: superellipse(2))": `superellipse(${amt ?? 2})`
- }
- }),
- topRight: (radius, amt) => ({
- borderTopRightRadius: {
- default: radius,
- "@supports (corner-shape: superellipse(2))": `calc(${radius} * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * ${amt ?? 2}))))`
- },
- cornerShape: {
- default: null,
- "@supports (corner-shape: superellipse(2))": `superellipse(${amt ?? 2})`
- }
- }),
- bottomRight: (radius, amt) => ({
- borderBottomRightRadius: {
- default: radius,
- "@supports (corner-shape: superellipse(2))": `calc(${radius} * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * ${amt ?? 2}))))`
- },
- cornerShape: {
- default: null,
- "@supports (corner-shape: superellipse(2))": `superellipse(${amt ?? 2})`
- }
- }),
- bottomLeft: (radius, amt) => ({
- borderBottomLeftRadius: {
- default: radius,
- "@supports (corner-shape: superellipse(2))": `calc(${radius} * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * ${amt ?? 2}))))`
- },
- cornerShape: {
- default: null,
- "@supports (corner-shape: superellipse(2))": `superellipse(${amt ?? 2})`
- }
- }),
- startStart: (radius, amt) => ({
- borderStartStartRadius: {
- default: radius,
- "@supports (corner-shape: superellipse(2))": `calc(${radius} * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * ${amt ?? 2}))))`
- },
- cornerShape: {
- default: null,
- "@supports (corner-shape: superellipse(2))": `superellipse(${amt ?? 2})`
- }
- }),
- startEnd: (radius, amt) => ({
- borderStartEndRadius: {
- default: radius,
- "@supports (corner-shape: superellipse(2))": `calc(${radius} * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * ${amt ?? 2}))))`
- },
- cornerShape: {
- default: null,
- "@supports (corner-shape: superellipse(2))": `superellipse(${amt ?? 2})`
- }
- }),
- endStart: (radius, amt) => ({
- borderEndStartRadius: {
- default: radius,
- "@supports (corner-shape: superellipse(2))": `calc(${radius} * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * ${amt ?? 2}))))`
- },
- cornerShape: {
- default: null,
- "@supports (corner-shape: superellipse(2))": `superellipse(${amt ?? 2})`
- }
- }),
- endEnd: (radius, amt) => ({
- borderEndEndRadius: {
- default: radius,
- "@supports (corner-shape: superellipse(2))": `calc(${radius} * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * ${amt ?? 2}))))`
- },
- cornerShape: {
- default: null,
- "@supports (corner-shape: superellipse(2))": `superellipse(${amt ?? 2})`
- }
- })
+ all: (radius, amt) => ({
+ borderRadius: {
+ default: radius,
+ "@supports (corner-shape: superellipse(2))": `calc(${radius} * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * ${amt ?? 2}))))`,
+ },
+ cornerShape: {
+ default: null,
+ "@supports (corner-shape: superellipse(2))": `superellipse(${amt ?? 2})`,
+ },
+ }),
+ top: (radius, amt) => ({
+ borderTopLeftRadius: {
+ default: radius,
+ "@supports (corner-shape: superellipse(2))": `calc(${radius} * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * ${amt ?? 2}))))`,
+ },
+ borderTopRightRadius: {
+ default: radius,
+ "@supports (corner-shape: superellipse(2))": `calc(${radius} * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * ${amt ?? 2}))))`,
+ },
+ cornerShape: {
+ default: null,
+ "@supports (corner-shape: superellipse(2))": `superellipse(${amt ?? 2})`,
+ },
+ }),
+ right: (radius, amt) => ({
+ borderTopRightRadius: {
+ default: radius,
+ "@supports (corner-shape: superellipse(2))": `calc(${radius} * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * ${amt ?? 2}))))`,
+ },
+ borderBottomRightRadius: {
+ default: radius,
+ "@supports (corner-shape: superellipse(2))": `calc(${radius} * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * ${amt ?? 2}))))`,
+ },
+ cornerShape: {
+ default: null,
+ "@supports (corner-shape: superellipse(2))": `superellipse(${amt ?? 2})`,
+ },
+ }),
+ bottom: (radius, amt) => ({
+ borderBottomLeftRadius: {
+ default: radius,
+ "@supports (corner-shape: superellipse(2))": `calc(${radius} * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * ${amt ?? 2}))))`,
+ },
+ borderBottomRightRadius: {
+ default: radius,
+ "@supports (corner-shape: superellipse(2))": `calc(${radius} * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * ${amt ?? 2}))))`,
+ },
+ cornerShape: {
+ default: null,
+ "@supports (corner-shape: superellipse(2))": `superellipse(${amt ?? 2})`,
+ },
+ }),
+ left: (radius, amt) => ({
+ borderTopLeftRadius: {
+ default: radius,
+ "@supports (corner-shape: superellipse(2))": `calc(${radius} * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * ${amt ?? 2}))))`,
+ },
+ borderBottomLeftRadius: {
+ default: radius,
+ "@supports (corner-shape: superellipse(2))": `calc(${radius} * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * ${amt ?? 2}))))`,
+ },
+ cornerShape: {
+ default: null,
+ "@supports (corner-shape: superellipse(2))": `superellipse(${amt ?? 2})`,
+ },
+ }),
+ start: (radius, amt) => ({
+ borderStartStartRadius: {
+ default: radius,
+ "@supports (corner-shape: superellipse(2))": `calc(${radius} * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * ${amt ?? 2}))))`,
+ },
+ borderEndStartRadius: {
+ default: radius,
+ "@supports (corner-shape: superellipse(2))": `calc(${radius} * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * ${amt ?? 2}))))`,
+ },
+ cornerShape: {
+ default: null,
+ "@supports (corner-shape: superellipse(2))": `superellipse(${amt ?? 2})`,
+ },
+ }),
+ end: (radius, amt) => ({
+ borderStartEndRadius: {
+ default: radius,
+ "@supports (corner-shape: superellipse(2))": `calc(${radius} * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * ${amt ?? 2}))))`,
+ },
+ borderEndEndRadius: {
+ default: radius,
+ "@supports (corner-shape: superellipse(2))": `calc(${radius} * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * ${amt ?? 2}))))`,
+ },
+ cornerShape: {
+ default: null,
+ "@supports (corner-shape: superellipse(2))": `superellipse(${amt ?? 2})`,
+ },
+ }),
+ topLeft: (radius, amt) => ({
+ borderTopLeftRadius: {
+ default: radius,
+ "@supports (corner-shape: superellipse(2))": `calc(${radius} * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * ${amt ?? 2}))))`,
+ },
+ cornerShape: {
+ default: null,
+ "@supports (corner-shape: superellipse(2))": `superellipse(${amt ?? 2})`,
+ },
+ }),
+ topRight: (radius, amt) => ({
+ borderTopRightRadius: {
+ default: radius,
+ "@supports (corner-shape: superellipse(2))": `calc(${radius} * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * ${amt ?? 2}))))`,
+ },
+ cornerShape: {
+ default: null,
+ "@supports (corner-shape: superellipse(2))": `superellipse(${amt ?? 2})`,
+ },
+ }),
+ bottomRight: (radius, amt) => ({
+ borderBottomRightRadius: {
+ default: radius,
+ "@supports (corner-shape: superellipse(2))": `calc(${radius} * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * ${amt ?? 2}))))`,
+ },
+ cornerShape: {
+ default: null,
+ "@supports (corner-shape: superellipse(2))": `superellipse(${amt ?? 2})`,
+ },
+ }),
+ bottomLeft: (radius, amt) => ({
+ borderBottomLeftRadius: {
+ default: radius,
+ "@supports (corner-shape: superellipse(2))": `calc(${radius} * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * ${amt ?? 2}))))`,
+ },
+ cornerShape: {
+ default: null,
+ "@supports (corner-shape: superellipse(2))": `superellipse(${amt ?? 2})`,
+ },
+ }),
+ startStart: (radius, amt) => ({
+ borderStartStartRadius: {
+ default: radius,
+ "@supports (corner-shape: superellipse(2))": `calc(${radius} * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * ${amt ?? 2}))))`,
+ },
+ cornerShape: {
+ default: null,
+ "@supports (corner-shape: superellipse(2))": `superellipse(${amt ?? 2})`,
+ },
+ }),
+ startEnd: (radius, amt) => ({
+ borderStartEndRadius: {
+ default: radius,
+ "@supports (corner-shape: superellipse(2))": `calc(${radius} * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * ${amt ?? 2}))))`,
+ },
+ cornerShape: {
+ default: null,
+ "@supports (corner-shape: superellipse(2))": `superellipse(${amt ?? 2})`,
+ },
+ }),
+ endStart: (radius, amt) => ({
+ borderEndStartRadius: {
+ default: radius,
+ "@supports (corner-shape: superellipse(2))": `calc(${radius} * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * ${amt ?? 2}))))`,
+ },
+ cornerShape: {
+ default: null,
+ "@supports (corner-shape: superellipse(2))": `superellipse(${amt ?? 2})`,
+ },
+ }),
+ endEnd: (radius, amt) => ({
+ borderEndEndRadius: {
+ default: radius,
+ "@supports (corner-shape: superellipse(2))": `calc(${radius} * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * ${amt ?? 2}))))`,
+ },
+ cornerShape: {
+ default: null,
+ "@supports (corner-shape: superellipse(2))": `superellipse(${amt ?? 2})`,
+ },
+ }),
});
-//#endregion
export { squircle };
-
-//# sourceMappingURL=index.mjs.map
````
diff --git a/scripts/sync-readme.sh b/scripts/sync-readme.sh
index 7f7c830..7aafed8 100755
--- a/scripts/sync-readme.sh
+++ b/scripts/sync-readme.sh
@@ -16,14 +16,22 @@ sync_file() {
# Some bundled dist files have no trailing newline, which would glue the
# closing fence to the last source line (e.g. `//# sourceMappingURL=…```)
# and prevent the fence from closing — so force a newline before it.
+ local cleaned="$REPO_ROOT/.sync-cleaned.tmp.$lang"
+ grep -v -E '^//#(region|endregion)|^//# sourceMappingURL=' "$src" > "$cleaned"
+
+ if [[ "$lang" == "js" || "$lang" == "ts" ]]; then
+ vp fmt "$cleaned" --write 2>/dev/null
+ fi
+
{
echo "$begin"
echo "\`\`\`$lang"
- cat "$src"
- [ -z "$(tail -c 1 "$src")" ] || echo ""
+ cat "$cleaned"
echo "\`\`\`"
} > "$REPO_ROOT/.sync-block.tmp"
+ rm -f "$cleaned"
+
# Use awk to skip lines between begin/end markers, inserting replacement block
awk -v begin="$begin" -v end="$end" -v blockfile="$REPO_ROOT/.sync-block.tmp" '
$0 == begin {
@@ -81,8 +89,8 @@ sync_toc() {
sync_file "dist/tailwind/utils.css" "css" "package/dist/tailwind/utils.css"
sync_file "dist/tailwind/radius.css" "css" "package/dist/tailwind/radius.css"
-sync_file "dist/tailwind/index.mjs" "js" "package/dist/tailwind/index.mjs"
-sync_file "dist/panda/index.mjs" "js" "package/dist/panda/index.mjs"
+# tailwind/index.mjs — only the tailwind-merge config is shown (hand-written)
+# Panda preset — bundled output imports internal chunks, not copy/paste-able (#32)
sync_file "dist/stylex/index.mjs" "js" "package/dist/stylex/index.mjs"
sync_toc