Styles not generated for recipe in another recipe

[doksara]

Title may be a bit ambiguous, but I don't know how else I'd explain it. In my component library, I have 2 components: <Input /> and <Autocomplete /> (which is importing <Input />). Both of them have their styles defined using the defineSlotRecipe and when I'm using <Input /> by itself it works just fine, but when I'm using <Autocomplete /> the classes for the inner Input component are not generated at all. As soon as I import <Input /> somewhere else in the codebase, the classes are generated and now <Autocomplete /> looks fine again.

import { input as inputRecipe } from '@mylib/styled-system/recipes'

const Input = (inputProps: InputProps) => {
  const [variantProps, cssProps] = inputRecipe.splitVariantProps(rest)
  const classes = inputRecipe(variantProps)

  return ( ... )
}

import { autocomplete as autocompleteRecipe } from '@mylib/styled-system/recipes'

const Autocomplete = (autocompleteProps: AutocompleteProps) => {
  const [variantProps, cssProps] = autocompleteRecipe.splitVariantProps(rest)
  const classes = autocompleteRecipe(variantProps)

  return ( 
     ...
    <Input variant="outlined" />
    ...
  )
}

What am I doing wrong?

[segunadebayo]

Do you have a reproduction of this? Struggling to understand what you mean.

[doksara]

@segunadebayo After almost a year, I (Claude) finally found the issue. In the consuming app, in panda.config.ts I included the component library like this:

include: ['./src/**/*.{ts,tsx}', '@my-lib/design-system/dist/panda.buildinfo.json']

But the issue with this is that Panda uses fast-glob under the hood which doesn't do actual module resolution, but file system resolution and that's why you need to pass relative path, like this:

include: ['./src/**/*.{ts,tsx}', './node_modules/@my-lib/design-system/dist/panda.buildinfo.json']

Which is kinda strange because in the presets field above, you can reference a module but not in here 🤷