Replies: 6 comments 3 replies
-
|
adding those lines in your config file should enable the type-safety import type { SystemStyleObject as SystemStyleObjectWithTypes } from "styled-system/types"
declare module '@pandacss/dev' {
export interface SystemStyleObject extends SystemStyleObjectWithTypes {}
} |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for the response, @astahmer While it helps avoid typing incorrect properties, it still allows me to write invalid values such as |
Beta Was this translation helpful? Give feedback.
-
|
got it, I think this might not be that simple and we'd have to make a lot of utility functions with generics for the typesafety const themeFn = createThemeWithTokens({
colors: {
primary: { value: "xxx" }
}
})
const buttonRecipe = themeFn.defineRecipe({
base: {
color: "",
// ^? "primary" is also suggested here, just like it will be suggested in the app code
}
})
PR are definitely welcome if you come up with a good implementation ! |
Beta Was this translation helpful? Give feedback.
-
|
Hi @astahmer, after forking the repo, I was able to achieve it in two ways: Module AugmentationInstead of // packages/types/recipe.ts
type IsEmptyInterface<T> = keyof T extends never ? true : false;
export interface StyledRecipeConfig {}
type DefaultRecipeConfig<T extends RecipeVariantRecord = RecipeVariantRecord> =
RecipeDefinition<T> & RecipeConfigMeta;
export type RecipeConfig<T extends RecipeVariantRecord = RecipeVariantRecord> =
IsEmptyInterface<StyledRecipeConfig> extends true
? DefaultRecipeConfig<T>
: StyledRecipeConfig;
// Previous implementation:
// export interface RecipeConfig<T extends RecipeVariantRecord = RecipeVariantRecord>
// extends RecipeDefinition<T>,
// RecipeConfigMeta {}after that, I exported import type {
...
StyledRecipeConfig
} from '@panda/types'
...
export type {
...
StyledRecipeConfig
}and then add these lines to the codebase: declare module '@pandacss/dev' {
export interface StyledRecipeConfig<T extends RecipeVariantRecord = RecipeVariantRecord>
extends CodegenRecipeConfig<T> {}
}And....
🚀🚀🚀 The only issue here is that the error now shows 2 overloads:
Which leads me to the seconds approach: Re-declare
|
Beta Was this translation helpful? Give feedback.
-
|
Type safety support for config and slot recipes would be awesome. Would it be possible to make this part of Pandacss by default @astahmer ? |
Beta Was this translation helpful? Give feedback.
-
|
we can't make the above solution (chicken & egg issue, relying on the generated outdir import { RecipeConfig as CodegenRecipeConfig, RecipeVariantRecord } from './styled-system-strict/types'
export function defineSaferRecipe<T extends RecipeVariantRecord>(config: CodegenRecipeConfig<T>): RecipeConfig {
return config as RecipeConfig
}the alternative would be to create a type-safe alternative using the builder pattern, and this is exactly what I've done here
|
Beta Was this translation helpful? Give feedback.
-
|
Figured it out: export function defineSaferSlotRecipe<
S extends string = string,
T extends SlotRecipeVariantRecord<S> = SlotRecipeVariantRecord<S>,
>(config: CodegenSlotRecipeConfig<S, T>): SlotRecipeConfig {
return config as SlotRecipeConfig;
} |
Beta Was this translation helpful? Give feedback.
-
|
after observing the createStyleContext commit, wouldn't these utilities be useful to be codegen-ed into the style-system too? |
Beta Was this translation helpful? Give feedback.
-
|
The helpers above were life savers once I realized what was happening here. While I understand the circularity problems of having a recipe generator dependent on the styled system directory it ends up generating, I also would have expected the panda cli to respect the strictness properties of the config, and either warn or error for invalid recipes. The most pernicious one for me is when setting Is this intended or documented anywhere? I would expect for design system maintainers making heavy use of config recipes to author styles, this could cause some hard-to-diagnose problems. |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
Description
When I try to define a CSS recipe using PandaCSS, I do not get errors when using invalid or inappropriate values for properties. For example, borderRadius accepts non-strict tokens and non-existing properties like xxxRadius does not give any error.
Link to Reproduction
https://play.panda-css.com/AdekKLOMx1
Steps to reproduce
JS Framework
React (TS)
Panda CSS Version
0.18.3
Browser
Google Chrome 119
Operating System
Additional Information
Recipe example:
Beta Was this translation helpful? Give feedback.
All reactions