defineRecipe is not type-safe

[Newbie012]

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

1. Import defineRecipe from PandaCSS.
2. Define a new recipe using defineRecipe.
3. In the recipe, use an unacceptable value (like a non-strict token) for a CSS property like borderRadius.
4. Also try adding a non-existing CSS property.
5. Confirm that no error appears.

JS Framework

React (TS)

Panda CSS Version

0.18.3

Browser

Google Chrome 119

Operating System

• macOS
• Windows
• Linux

Additional Information

Recipe example:

defineRecipe({
    className: "button",
    base: {
        color: "this.color.does.not.exist",
        borderRadius: "asd",
        xxxRadius: "dsa",
    }
})

[astahmer]

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 {}
}

https://play.panda-css.com/4Bv48dvypG

[Newbie012]

Thanks for the response, @astahmer

While it helps avoid typing incorrect properties, it still allows me to write invalid values such as color: 'nonexistant.color'.

https://play.panda-css.com/iY6nQ811ot

[astahmer]

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
we actually also had this idea noted in our internal issue tracker:

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 !

[Newbie012]

Hi @astahmer, after forking the repo, I was able to achieve it in two ways:

Module Augmentation

Instead of interface RecipeConfig extending the default types, it checks whether a (new) interface called StyledRecipeConfig is defined. If it does, it uses it, and only then falls back to the current RecipeConfig<T>. This is how I did it:

// 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 StyledRecipeConfig so I could apply declaration merging (maybe there's a better way of doing it) by modifying packages/cli/src/index.ts:

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 defineRecipe with the codegen types:

import { RecipeConfig as CodegenRecipeConfig, RecipeVariantRecord } from './styled-system-strict/types'

export function defineSaferRecipe<T extends RecipeVariantRecord>(config: CodegenRecipeConfig<T>): RecipeConfig {
  return config as RecipeConfig
}

which now shows a proper error:

---

If you want to test it, this is what I did: main...Newbie012:panda:type-safe-define-recipe

[peterbartels]

Type safety support for config and slot recipes would be awesome. Would it be possible to make this part of Pandacss by default @astahmer ?

[astahmer]

we can't make the above solution (chicken & egg issue, relying on the generated outdir styled-system to.. generate itself) part of Panda, feel free to use this snippet tho, it still brings type-safety and is super quick to setup:

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
this approach has different issues:

• use intensive inferring and type mapping which can lead to slow IDE completion
• can't infer the possible colorPalette values
• can't infer values from presets
• can't infer values for utility when values is a function

[cgatian]

Having difficulty making this work with defineSlotRecipe.

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;
}

[firzanarmani]

after observing the createStyleContext commit, wouldn't these utilities be useful to be codegen-ed into the style-system too?