Replies: 4 comments 2 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.
-
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