Feature Request - Allow useage of objects defined in other packages

[Hecatron]

Ok so this is something I thought worked out of the box but it looks like I was mistaken.
Currently I'm writing a component library and I thought I'd be clever and split the css and vue components into seperate packages within a mono repo

The first would have been a package to store css definitions such as
NeonButton.ts

import type { SystemStyleObject } from '@pandacss/types'

export const style: SystemStyleObject = {
  background: 'red',
  color: 'white',
}

The second would have been a package to store vue components such as

<template>
  <div :class="css(neonButton.style)">
    <slot />
  </div>
  <slot />
</template>
<script setup lang="ts">
import { css } from '~pandacss/css'
import { neonButton } from 'neon-ui-css/components/button'
</script>

what tends to happen is that the list of class names is generated for the div element.
But the css that would be output under styled-components (such as style.css when running cssgen) lacks any actual css
As far as I can tell this is because panda doesn't scan packages outside of the one it's been installed into during the css generation phase.

I actually tricked myself into thinking this worked originally because I'd defined the same rules to generate the same class tokens
directly in a nearby component within the vue package while I was messing with the code.

I get the feeling panda wasn't originally designed to work this way perhaps.
Although I can't help but think having libraries of css objects in different packages could be super useful
I think panda is using ts-evaluator to evaluate the typescript / get the values of the objects when it generates the css
But trying to do the above may be quite complicated / not an easy fix

For now I'll just have to move back to bundling my css objects back into the same package as the vue components.
I suppose I could try and build out a seperate css file within the css package using cssgen, but it seems a bit overcomplicated to do that during dev

[astahmer]

We have it, currently disabled

panda/packages/parser/src/parser.ts

Line 222 in 7c248b4

flags: { skipTraverseFiles: true },

ts-evaluator is only used for evaluating complex conditions or simple CallExpression (functions, basically) that might still be resolvable like Object.keys

We technically could resolve the value in the static analysis step, but what if the value is nested 4 files deep ? or nested inside 1 or 2 packages deep from node_modules ? or dynamically imported ? we then might have traversed multiple files to not even be able to resolve the final value

We currently prefer to remain consistent and not make the performance suffer with that simple rule: what you (can) see is what you get

---

now, here as an alternative you could define a neonButtonRecipe config recipe, include it in a preset and it would be available directly in the styled-system/recipes in all your apps

[astahmer]

related https://panda-css.com/docs/guides/dynamic-styling#referenced-values

[Hecatron]

I'm starting to underestand the restrictions now, it's the same reason vanilla-extract only looks at .css.ts files when generating it's styles.

I had a quick go with config recipies, I think the only limitation there is that they can't be namespaced yet, everything has to exist within a single directory of recipies, but maybe that's resolvable in the future