Conflict between recipes and pattern with same name

[azoriusss]

Hi
I found out something with panda (which is maybe intentional)
I'm trying to create my own Stack recipe (with some spacing variant for eg)
It looks like it's not possible and I assume it's due to conflict with pattern name
Example here

Temporarily I'll name my recipe with a prefix to avoid conflict, but is there an another way to do ? Or a way to disable patterns ?

Or am I just doing it wrong ?

Thanks for your help 🙏

[anubra266]

@vird-playin that should definitely work. The error in the playground is because all the playground js are defined together.
In your project, I don't expect any clashes

[azoriusss]

I can indeed create the recipe in my project
But jsx usage of variant is not tracked
I can't write this in a playground because of conflict error but here's a sample

stacks.ts

  export const stackRecipe = defineRecipe({
    className: 'stack',
    description: 'Stack component',
    base: {
      display: 'flex'
    },
    variants: {
      spacing: {
        xl: {
          gap: 12
        },
        lg: {
          gap: 8
        },
        md: {
          gap: 5
        },
        sm: {
          gap: 2.5
        }
      }
    },
    defaultVariants: {
      spacing: 'md'
    },
    jsx: ['Stack']
  })

My custom preset

  const myPreset = defineConfig({
    conditions: {
      light: '[data-color-mode=light] &',
      dark: '[data-color-mode=dark] &'
    },
    theme: {
      extend: {
        recipes: {
          stack: stackRecipe
        },
      }
    }
  })
  
  export default myPreset

and my panda.config.ts

  export default defineConfig({
    // Whether to use css reset
    preflight: true,
  
    // Keep default panda preset
    eject: false,
  
    // Where to look for your css declarations
    include: [
      './src/components/atoms/**/*.{js,jsx,ts,tsx}',
      './src/components/organisms/**/*.{js,jsx,ts,tsx}',
      './src/components/molecules/**/*.{js,jsx,ts,tsx}',
      './app/**/*.{ts,tsx,js,jsx}'
    ],
  
    // Files to exclude
    exclude: [],
  
    // Useful for theme customization
    theme: {},
  
    // The output directory for your css system
    outdir: 'styled-system',
    presets: [pandaPreset, myPreset]
  })

To add some context, my projet is still using chakra-ui because I'm doing a step by step migration to pandacss
But folder included (atoms/molecules/organisms/app) does not contain any Stack from chakra

I created my own Stack

If i use <Stack spacing="xl"/> I get class="stack stack--spacing_xl" but with no stack--spacing_xl css associated
If I use <Stack/> i get class="stack stack--spacing_md" and stack--spacing_md css is created

If I update my stack.ts with

 jsx: ['FooStack']

and update my Stack component to FooStack, everything works fine (class and css are generated)

It's kind of a mistery for me and I had similar issue with a recipe named flex. I'm guessing i will have same issues with container/box,etc..
All of my other recipes (heading / link / tetxt) are working fine

[astahmer]

In term of current implementation/logic, this is expected as we have don't check a function/component name against all kind, we just pick the 1st kind matching (recipes/patterns/etc)

https://github.com/chakra-ui/panda/blob/main/packages/parser/src/parser.ts#L352-L365

in term of what should be the intent / what should be possible, I don't know
I personally think avoiding using the same name (and introducing conflicts like this) will lead to easier code maintenance and clarity, both for us as contributors and you as user

pinging @segunadebayo to get another opinion on this

[azoriusss]

I personally think avoiding using the same name (and introducing conflicts like this) will lead to easier code maintenance and clarity, both for us as contributors and you as user

I can see the point here ✔️

As a workaround, is there a way to disable patterns ? (or is this planned in a future update ?)
I also tried to change pattern name (by extending them and using jsx key) but it does'nt seem to work

If none of this is possible I will keep going with my prefixes, but I would rather avoid

[astahmer]

it's a bit cumbersome but you can do it like this:

import pandaBasePreset from '@pandacss/preset-base'
import pandaPreset from '@pandacss/preset-panda'

// omitting stack here
const { stack, ...pandaBasePresetPatterns } = pandaBasePreset.patterns

export default defineConfig({
  presets: [pandaPreset],
    // we need to eject to prevent the @pandacss/preset-base from being resolved
   // https://panda-css.com/docs/customization/presets#which-panda-presets-will-be-included-
  eject: true, 
  conditions: {
    extend: {
      ...pandaBasePreset.conditions,
    },
  },
  patterns: {
    extend: {
      ...pandaBasePresetPatterns,
    },
  },
  utilities: {
    extend: {
      ...pandaBasePreset.utilities,
    },
  },
})

[azoriusss]

It worked like a charm, thank you 🙏