Typing issues for preset-panda

[boar-is]

Description

As stated in Which panda presets will be included?, import pandaPreset from '@pandacss/preset-panda' should be added to presets if I have additional presets. However, adding it raises the following Typescript error:

Type '{ theme: { keyframes: { spin: { to: { transform: string; }; }; ping: { '75%, 100%': { transform: string; opacity: string; }; }; pulse: { '50%': { opacity: string; }; }; bounce: { '0%, 100%': { transform: string; animationTimingFunction: string; }; '50%': { ...; }; }; }; breakpoints: { ...; }; tokens: { ...; }; textS...' is not assignable to type 'string | Preset | Promise<Preset>'.
  Type '{ theme: { keyframes: { spin: { to: { transform: string; }; }; ping: { '75%, 100%': { transform: string; opacity: string; }; }; pulse: { '50%': { opacity: string; }; }; bounce: { '0%, 100%': { transform: string; animationTimingFunction: string; }; '50%': { ...; }; }; }; breakpoints: { ...; }; tokens: { ...; }; textS...' is not assignable to type 'Preset'.
    The types of 'theme.textStyles' are incompatible between these types.
      Type 'TextStyles' is not assignable to type 'Recursive<Token<TextStyle>>'.
        'string' index signatures are incompatible.
          Type 'import("stackblitz:/node_modules/@pandacss/preset-panda/node_modules/@pandacss/types/dist/composition").Token<import("stackblitz:/node_modules/@pandacss/preset-panda/node_modules/@pandacss/types/dist/composition").TextStyle> | import("stackblitz:/node_modules/@pandacss/preset-panda/node_modules/@pandacss/types/dist/...' is not assignable to type 'import("stackblitz:/node_modules/@pandacss/types/dist/composition").Token<import("stackblitz:/node_modules/@pandacss/types/dist/composition").TextStyle> | import("stackblitz:/node_modules/@pandacss/types/dist/composition").Recursive<import("stackblitz:/node_modules/@pandacss/types/dist/composition").Token<import("st...'.
            Type 'Token<TextStyle>' is not assignable to type 'Token<TextStyle> | Recursive<Token<TextStyle>>'.
              Type 'Token<TextStyle>' is not assignable to type 'Recursive<Token<TextStyle>>'.
                Index signature for type 'string' is missing in type 'Token<TextStyle>'.(2322)

Link to Reproduction

https://stackblitz.com/edit/vitejs-vite-a48rp3?file=panda.config.ts

Steps to reproduce

1. Go to reproduction's panda.config.ts
2. See the error from TypeScript LSP

JS Framework

React (TS)

Panda CSS Version

0.23.0

Browser

No response

Operating System

• macOS
• Windows
• Linux

Additional Information

No response

[boar-is]

By the way, can I skip installing @pandacss/preset-panda package? Doesn't @pandacss/dev already export it somehow?

[astahmer]

preset-base is always included, preset-panda is not when you add a custom preset you have to add it back

@pandacss/preset-base: ALWAYS included if NOT using eject: true
@pandacss/preset-panda: only included by default if you haven't specified the presets config option, otherwise you'll have to include that preset by yourself like so:

---

By the way, can I skip installing @pandacss/preset-panda package?

yes, for most people it's included by default if not using presets, otherwise you can import it from @pandacss/dev/presets

[boar-is]

preset-base is always included, preset-panda is not when you add a custom preset you have to add it back

I try but I can't, I have a TypeScript error, hence the issue is created.

@pandacss/dev/presets

I don't know how I overlooked it. Thanks!

[astahmer]

I try but I can't, I have a TypeScript error, hence the issue is created.

in the issue you mentioned the preset-panda so I thought you had it confused with the preset-bad, my bad !

looking at your stackblitz, it seems there's a type issue but the runtime looks fine, you can solve it by either:

• casting presets: [pandaPreset as Preset], or presets: [pandaPreset as any],
• using a string presets: ["@pandacss/dev/presets"], or presets: ['@pandacss/preset-panda']

[boar-is]

I like the second solution more 😅.

I think this issue is a minor one now since there are alternatives with string definitions. I don't know if this issue should be closed as a typing error still persists. But again, it's a minor one.

Thanks for the quick response!

[segunadebayo]

I don't see an easy way to solve this since the typings and overloads.

You don't need to install @pandacss/preset-panda at all because Panda can resolve it internally.

I'll move this to a discussion for now.