Replies: 2 comments
-
|
Looked into this. I'm unable to reproduce the issue you're describing. 
FYI: The |
Beta Was this translation helpful? Give feedback.
-
|
EDIT: I discovered my issue, I simply did not Ultimately my goal is to use The following works when I use panda specific to my app: // panda.config.ts
{
utilities: {
rounded: {
values: { type: "boolean | number" },
transform(value: boolean | number) {
return {
borderRadius: typeof value === "boolean" ? 9999 : value,
};
},
},
}
}This does correctly produce the type: (property) rounded?: ConditionalValue<number | boolean | AnyString | `var(--${string})`> | undefinedHowever in my case, I am using panda in an npm package and exporting a component styled with pandacss. I then want consumers to be able to further style the component with their own panda config. For this, I am exporting a panda preset from the package as well. Then both my package and consumers can use the preset. In my preset I have the same (rounded defined in utilties, not utilities.extend to override panda behavior): // panda.config.ts
{
utilities: {
rounded: {
values: { type: "boolean | number" },
transform(value: boolean | number) {
return {
borderRadius: typeof value === "boolean" ? 9999 : value,
};
},
},
}
}If I then build and look in rounded?: ConditionalValue<UtilityValues["rounded"] | CssVars | AnyString>drilling further into `styled-system/types/prop-types.d.ts, I see: export interface UtilityValues {
rounded: boolean | number;
}So far its correct. However when I build the package and try to use the package the playground, the In my consumer, I use the preset like: export default defineConfig({
presets: ["@pandacss/dev/presets", myPreset],
})Going through the consumers styled-system/ generated with the preset, I get the following type: export interface UtilityValues {
rounded: boolean;
} |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
Description
Suppose I've defined:
its necessary to add @ts-ignore
Internally, panda css uses the following type:
The Problem
Line 15: { type: string } - This means the type property MUST be a string, not an array of strings!
When you try:
TypeScript correctly rejects it because string[] is not assignable to string.
Based on the Panda CSS source code, I believe it is IMPOSSIBLE to directly define a boolean | number type for a custom Panda CSS utility using the values.type field.
Because:
{ type: "boolean" } generates → ConditionalValue<boolean | AnyString | CssVars>
{ type: "number" } generates → ConditionalValue<number | AnyString | CssVars>
{ type: ["boolean", "number"] } → TypeScript error (array not allowed)
{ type: "boolean | number" } → Probably treated as a literal string, not parsed as a union
However, the generated type with the array DOES produce:
This means the build with values: { type: ["boolean", "number"] } actually worked! The @ts-ignore suppressed the TypeScript error in your config file, but Panda CSS successfully generated the correct union type at runtime!
Panda CSS's runtime parser actually DOES support arrays!
The type: ["boolean", "number"] syntax WORKS in Panda CSS, but the TypeScript definitions are incomplete/incorrect.
This is likely an oversight in Panda's type definitions where the runtime supports more than the TypeScript types declare.
Link to Reproduction
github.com
Steps to reproduce
JS Framework
No response
Panda CSS Version
1.2.0
Browser
No response
Operating System
Additional Information
No response
Beta Was this translation helpful? Give feedback.
All reactions