Skip to content

Commit c259c45

Browse files
dogmarclaude
dogmar
and
claude
committed
fix(stylex): default amt to literal 2, drop --squircle-amt fallback
The Tailwind and Panda integrations both honor `var(--squircle-amt, 2)` because they emit a static @supports block — the consumer can override the exponent globally through the cascade. The StyleX preset is per-call parametric instead: each variant accepts an explicit `amt`. Mixing both mechanisms muddied the API for no real win, since StyleX dynamic styles don't read the page's CSS scope at compile time. When `amt` is omitted the runtime now substitutes the literal `2` directly into the calc and superellipse expressions. Tune via the second argument. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
1 parent ec3287f commit c259c45

3 files changed

Lines changed: 86 additions & 81 deletions

File tree

‎README.md‎

Lines changed: 41 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -152,7 +152,7 @@ import { squircle } from "@klinking/squircle/stylex";
152152
<div {...stylex.props(squircle.topLeft("1.5rem", 3))} />
153153
```
154154

155-
Each variant (`all`, `top`, `right`, …, `topLeft`, `endEnd`, …) is a function that takes a `radius` and an optional superellipse `amt`, then emits a `borderRadius` + `cornerShape` pair gated behind `@supports (corner-shape: superellipse(2))`. If `amt` is omitted, it falls through `var(--squircle-amt, 2)` so the same custom property used by the Tailwind / Panda integrations applies.
155+
Each variant (`all`, `top`, `right`, …, `topLeft`, `endEnd`, …) is a function that takes a `radius` and an optional superellipse `amt`, then emits a `borderRadius` + `cornerShape` pair gated behind `@supports (corner-shape: superellipse(2))`. If `amt` is omitted, the default exponent `2` is used; unlike the Tailwind and Panda integrations, this preset does not read `--squircle-amt` — pass `amt` explicitly per call site to tune it.
156156

157157
The whole 15-variant table is a single statically-analyzable `stylex.create({ … })` literal — your StyleX bundler picks it up the same way it picks up your own create calls.
158158

@@ -753,9 +753,10 @@ import * as stylex from "@stylexjs/stylex";
753753
* <div {...stylex.props(squircle.topLeft('0.5rem', 3))} />
754754
* ```
755755
*
756-
* If `amt` is omitted, the corrected radius and `corner-shape` resolve through
757-
* `var(--squircle-amt, 2)` — set that custom property anywhere up the cascade
758-
* to drive the superellipse exponent globally.
756+
* If `amt` is omitted, the corrected radius and `corner-shape` use the
757+
* literal default exponent of `2` — pass `amt` explicitly per-call site to
758+
* tune it. Unlike the Tailwind and Panda integrations, this preset does not
759+
* read `--squircle-amt`; StyleX's per-call parameter is the only knob.
759760
*
760761
* **Constraint** — StyleX's babel plugin requires `stylex.create(...)` to receive
761762
* a fully-static object literal, and forbids destructuring, spreading, or
@@ -767,175 +768,175 @@ const squircle = stylex.create({
767768
all: (radius, amt) => ({
768769
borderRadius: {
769770
default: radius,
770-
"@supports (corner-shape: superellipse(2))": `calc(${radius} * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * ${amt ?? "var(--squircle-amt, 2)"}))))`
771+
"@supports (corner-shape: superellipse(2))": `calc(${radius} * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * ${amt ?? 2}))))`
771772
},
772773
cornerShape: {
773774
default: null,
774-
"@supports (corner-shape: superellipse(2))": `superellipse(${amt ?? "var(--squircle-amt, 2)"})`
775+
"@supports (corner-shape: superellipse(2))": `superellipse(${amt ?? 2})`
775776
}
776777
}),
777778
top: (radius, amt) => ({
778779
borderTopLeftRadius: {
779780
default: radius,
780-
"@supports (corner-shape: superellipse(2))": `calc(${radius} * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * ${amt ?? "var(--squircle-amt, 2)"}))))`
781+
"@supports (corner-shape: superellipse(2))": `calc(${radius} * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * ${amt ?? 2}))))`
781782
},
782783
borderTopRightRadius: {
783784
default: radius,
784-
"@supports (corner-shape: superellipse(2))": `calc(${radius} * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * ${amt ?? "var(--squircle-amt, 2)"}))))`
785+
"@supports (corner-shape: superellipse(2))": `calc(${radius} * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * ${amt ?? 2}))))`
785786
},
786787
cornerShape: {
787788
default: null,
788-
"@supports (corner-shape: superellipse(2))": `superellipse(${amt ?? "var(--squircle-amt, 2)"})`
789+
"@supports (corner-shape: superellipse(2))": `superellipse(${amt ?? 2})`
789790
}
790791
}),
791792
right: (radius, amt) => ({
792793
borderTopRightRadius: {
793794
default: radius,
794-
"@supports (corner-shape: superellipse(2))": `calc(${radius} * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * ${amt ?? "var(--squircle-amt, 2)"}))))`
795+
"@supports (corner-shape: superellipse(2))": `calc(${radius} * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * ${amt ?? 2}))))`
795796
},
796797
borderBottomRightRadius: {
797798
default: radius,
798-
"@supports (corner-shape: superellipse(2))": `calc(${radius} * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * ${amt ?? "var(--squircle-amt, 2)"}))))`
799+
"@supports (corner-shape: superellipse(2))": `calc(${radius} * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * ${amt ?? 2}))))`
799800
},
800801
cornerShape: {
801802
default: null,
802-
"@supports (corner-shape: superellipse(2))": `superellipse(${amt ?? "var(--squircle-amt, 2)"})`
803+
"@supports (corner-shape: superellipse(2))": `superellipse(${amt ?? 2})`
803804
}
804805
}),
805806
bottom: (radius, amt) => ({
806807
borderBottomLeftRadius: {
807808
default: radius,
808-
"@supports (corner-shape: superellipse(2))": `calc(${radius} * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * ${amt ?? "var(--squircle-amt, 2)"}))))`
809+
"@supports (corner-shape: superellipse(2))": `calc(${radius} * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * ${amt ?? 2}))))`
809810
},
810811
borderBottomRightRadius: {
811812
default: radius,
812-
"@supports (corner-shape: superellipse(2))": `calc(${radius} * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * ${amt ?? "var(--squircle-amt, 2)"}))))`
813+
"@supports (corner-shape: superellipse(2))": `calc(${radius} * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * ${amt ?? 2}))))`
813814
},
814815
cornerShape: {
815816
default: null,
816-
"@supports (corner-shape: superellipse(2))": `superellipse(${amt ?? "var(--squircle-amt, 2)"})`
817+
"@supports (corner-shape: superellipse(2))": `superellipse(${amt ?? 2})`
817818
}
818819
}),
819820
left: (radius, amt) => ({
820821
borderTopLeftRadius: {
821822
default: radius,
822-
"@supports (corner-shape: superellipse(2))": `calc(${radius} * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * ${amt ?? "var(--squircle-amt, 2)"}))))`
823+
"@supports (corner-shape: superellipse(2))": `calc(${radius} * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * ${amt ?? 2}))))`
823824
},
824825
borderBottomLeftRadius: {
825826
default: radius,
826-
"@supports (corner-shape: superellipse(2))": `calc(${radius} * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * ${amt ?? "var(--squircle-amt, 2)"}))))`
827+
"@supports (corner-shape: superellipse(2))": `calc(${radius} * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * ${amt ?? 2}))))`
827828
},
828829
cornerShape: {
829830
default: null,
830-
"@supports (corner-shape: superellipse(2))": `superellipse(${amt ?? "var(--squircle-amt, 2)"})`
831+
"@supports (corner-shape: superellipse(2))": `superellipse(${amt ?? 2})`
831832
}
832833
}),
833834
start: (radius, amt) => ({
834835
borderStartStartRadius: {
835836
default: radius,
836-
"@supports (corner-shape: superellipse(2))": `calc(${radius} * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * ${amt ?? "var(--squircle-amt, 2)"}))))`
837+
"@supports (corner-shape: superellipse(2))": `calc(${radius} * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * ${amt ?? 2}))))`
837838
},
838839
borderEndStartRadius: {
839840
default: radius,
840-
"@supports (corner-shape: superellipse(2))": `calc(${radius} * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * ${amt ?? "var(--squircle-amt, 2)"}))))`
841+
"@supports (corner-shape: superellipse(2))": `calc(${radius} * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * ${amt ?? 2}))))`
841842
},
842843
cornerShape: {
843844
default: null,
844-
"@supports (corner-shape: superellipse(2))": `superellipse(${amt ?? "var(--squircle-amt, 2)"})`
845+
"@supports (corner-shape: superellipse(2))": `superellipse(${amt ?? 2})`
845846
}
846847
}),
847848
end: (radius, amt) => ({
848849
borderStartEndRadius: {
849850
default: radius,
850-
"@supports (corner-shape: superellipse(2))": `calc(${radius} * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * ${amt ?? "var(--squircle-amt, 2)"}))))`
851+
"@supports (corner-shape: superellipse(2))": `calc(${radius} * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * ${amt ?? 2}))))`
851852
},
852853
borderEndEndRadius: {
853854
default: radius,
854-
"@supports (corner-shape: superellipse(2))": `calc(${radius} * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * ${amt ?? "var(--squircle-amt, 2)"}))))`
855+
"@supports (corner-shape: superellipse(2))": `calc(${radius} * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * ${amt ?? 2}))))`
855856
},
856857
cornerShape: {
857858
default: null,
858-
"@supports (corner-shape: superellipse(2))": `superellipse(${amt ?? "var(--squircle-amt, 2)"})`
859+
"@supports (corner-shape: superellipse(2))": `superellipse(${amt ?? 2})`
859860
}
860861
}),
861862
topLeft: (radius, amt) => ({
862863
borderTopLeftRadius: {
863864
default: radius,
864-
"@supports (corner-shape: superellipse(2))": `calc(${radius} * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * ${amt ?? "var(--squircle-amt, 2)"}))))`
865+
"@supports (corner-shape: superellipse(2))": `calc(${radius} * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * ${amt ?? 2}))))`
865866
},
866867
cornerShape: {
867868
default: null,
868-
"@supports (corner-shape: superellipse(2))": `superellipse(${amt ?? "var(--squircle-amt, 2)"})`
869+
"@supports (corner-shape: superellipse(2))": `superellipse(${amt ?? 2})`
869870
}
870871
}),
871872
topRight: (radius, amt) => ({
872873
borderTopRightRadius: {
873874
default: radius,
874-
"@supports (corner-shape: superellipse(2))": `calc(${radius} * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * ${amt ?? "var(--squircle-amt, 2)"}))))`
875+
"@supports (corner-shape: superellipse(2))": `calc(${radius} * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * ${amt ?? 2}))))`
875876
},
876877
cornerShape: {
877878
default: null,
878-
"@supports (corner-shape: superellipse(2))": `superellipse(${amt ?? "var(--squircle-amt, 2)"})`
879+
"@supports (corner-shape: superellipse(2))": `superellipse(${amt ?? 2})`
879880
}
880881
}),
881882
bottomRight: (radius, amt) => ({
882883
borderBottomRightRadius: {
883884
default: radius,
884-
"@supports (corner-shape: superellipse(2))": `calc(${radius} * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * ${amt ?? "var(--squircle-amt, 2)"}))))`
885+
"@supports (corner-shape: superellipse(2))": `calc(${radius} * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * ${amt ?? 2}))))`
885886
},
886887
cornerShape: {
887888
default: null,
888-
"@supports (corner-shape: superellipse(2))": `superellipse(${amt ?? "var(--squircle-amt, 2)"})`
889+
"@supports (corner-shape: superellipse(2))": `superellipse(${amt ?? 2})`
889890
}
890891
}),
891892
bottomLeft: (radius, amt) => ({
892893
borderBottomLeftRadius: {
893894
default: radius,
894-
"@supports (corner-shape: superellipse(2))": `calc(${radius} * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * ${amt ?? "var(--squircle-amt, 2)"}))))`
895+
"@supports (corner-shape: superellipse(2))": `calc(${radius} * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * ${amt ?? 2}))))`
895896
},
896897
cornerShape: {
897898
default: null,
898-
"@supports (corner-shape: superellipse(2))": `superellipse(${amt ?? "var(--squircle-amt, 2)"})`
899+
"@supports (corner-shape: superellipse(2))": `superellipse(${amt ?? 2})`
899900
}
900901
}),
901902
startStart: (radius, amt) => ({
902903
borderStartStartRadius: {
903904
default: radius,
904-
"@supports (corner-shape: superellipse(2))": `calc(${radius} * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * ${amt ?? "var(--squircle-amt, 2)"}))))`
905+
"@supports (corner-shape: superellipse(2))": `calc(${radius} * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * ${amt ?? 2}))))`
905906
},
906907
cornerShape: {
907908
default: null,
908-
"@supports (corner-shape: superellipse(2))": `superellipse(${amt ?? "var(--squircle-amt, 2)"})`
909+
"@supports (corner-shape: superellipse(2))": `superellipse(${amt ?? 2})`
909910
}
910911
}),
911912
startEnd: (radius, amt) => ({
912913
borderStartEndRadius: {
913914
default: radius,
914-
"@supports (corner-shape: superellipse(2))": `calc(${radius} * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * ${amt ?? "var(--squircle-amt, 2)"}))))`
915+
"@supports (corner-shape: superellipse(2))": `calc(${radius} * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * ${amt ?? 2}))))`
915916
},
916917
cornerShape: {
917918
default: null,
918-
"@supports (corner-shape: superellipse(2))": `superellipse(${amt ?? "var(--squircle-amt, 2)"})`
919+
"@supports (corner-shape: superellipse(2))": `superellipse(${amt ?? 2})`
919920
}
920921
}),
921922
endStart: (radius, amt) => ({
922923
borderEndStartRadius: {
923924
default: radius,
924-
"@supports (corner-shape: superellipse(2))": `calc(${radius} * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * ${amt ?? "var(--squircle-amt, 2)"}))))`
925+
"@supports (corner-shape: superellipse(2))": `calc(${radius} * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * ${amt ?? 2}))))`
925926
},
926927
cornerShape: {
927928
default: null,
928-
"@supports (corner-shape: superellipse(2))": `superellipse(${amt ?? "var(--squircle-amt, 2)"})`
929+
"@supports (corner-shape: superellipse(2))": `superellipse(${amt ?? 2})`
929930
}
930931
}),
931932
endEnd: (radius, amt) => ({
932933
borderEndEndRadius: {
933934
default: radius,
934-
"@supports (corner-shape: superellipse(2))": `calc(${radius} * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * ${amt ?? "var(--squircle-amt, 2)"}))))`
935+
"@supports (corner-shape: superellipse(2))": `calc(${radius} * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * ${amt ?? 2}))))`
935936
},
936937
cornerShape: {
937938
default: null,
938-
"@supports (corner-shape: superellipse(2))": `superellipse(${amt ?? "var(--squircle-amt, 2)"})`
939+
"@supports (corner-shape: superellipse(2))": `superellipse(${amt ?? 2})`
939940
}
940941
})
941942
});

‎package/src/stylex.test.ts‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -103,8 +103,11 @@ describe("stylex", () => {
103103
expect(compiled.code).toContain("pow(2, -1 *");
104104
});
105105

106-
it("uses the var(--squircle-amt, 2) default for amt", () => {
107-
expect(compiled.code).toContain("var(--squircle-amt, 2)");
106+
it("defaults amt to the literal exponent 2 when omitted", () => {
107+
// Each variant function emits `${amt ?? 2}` inside its template literals.
108+
expect(compiled.code).toMatch(/amt\s*\?\?\s*2/);
109+
// And does not bake in a `var(--squircle-amt, …)` fallback at runtime.
110+
expect(compiled.code).not.toContain("var(--squircle-amt");
108111
});
109112

110113
it("emits all 15 variants", () => {

0 commit comments

Comments
 (0)