Presets not merging

[lalexdotcom]

Description

Thanks for this project, I love the idea and trying to use it in a pure TS monorepo (no intermediate bundling)...

Before being able to do this, I'm gonna need the type safety provided by using several presets from multiple packages, but I couldn't find a way to do it as the presets doesn't seem to merge...

When I use two presets in the preset field of panda.config.ts, it seem they are not merging.
Same if I use the @pandacss/dev/presets in the array with a custom preset...

Is there something I'm missing here?

Link to Reproduction

https://github.com/lalexdotcom/panda-presets

Steps to reproduce

Couldn't set it to stackblitz, the repo is a devcontainer for VSCode

1. Checkout
2. Select "Reopen in container" command
3. pnpm install
4. pnpm test

5 use cases are tested:

• with a theme extension
• with the default preset
• with a custom preset
• with the default presets and a custom one
• with two custom presets

JS Framework

Not here yet (TS)

Panda CSS Version

0.6.0

Browser

No response

Operating System

• macOS
• Windows
• Linux

Additional Information

My environment is a devcontainer (linux) with a macOS host...

[anubra266]

@lalexdotcom I don't fully understand your issue, but one correction in your codebase, is that the presets should use the extend keyword

presets: [
    definePreset({
      theme: {
        extend:{
          tokens: {
            colors: { 'test.light': { value: '#112233' } }
          }
        }
      }
    }),
    definePreset({
      theme: {
        extend:{
          tokens: {
            colors: { 'test.dark': { value: '#112233' } },
            sizes: { '3xs': { value: '1px' } }
          }
        }
      }
    })],

for https://github.com/lalexdotcom/panda-presets/blob/d9f6ee07803bedb3c76259e2dc90e5087d5ab5f8/panda.config-with-two-presets.ts#L19

[lalexdotcom]

Yey, you got it! I totally didn't see the extend possibility for presets

I find that the subtle difference between theme and preset is a bit confusing...

Maybe there would be something to investigate here for a better DX (which is already the best I tried for many other aspects): maybe be a inherit boolean property in the theme property? It seems like there's no use of setting properties at the root of the theme object AND properties in the extend field...

In presets that can take an array, it can be confusing that an array element can cancel all the previous ones...

I don't have any clear answer for that, but maybe there's a way to make things more intuitive?

Thanks so much for your quick answer so I can go with panda!