Use recipe.raw within a style object / css function to generate styles

[esou]

Description

When I use someRecipe.raw() within a sub element of css function it fails to generate the styles needed.
following this section of the documentation I expected it to work : https://panda-css.com/docs/concepts/merging-styles#merging-cva--css-styles, but it only works when someRecipe.raw is located at "root" level of css function.

Is this by design? Or is there a way to make it work ? ☺️

Thanks ! 🙌

Link to Reproduction

https://play.panda-css.com/-f2V-Zk5FT

Steps to reproduce

In the reproduction provided, I expected a background to be applied on "hi there"

JS Framework

React(TS)

Panda CSS Version

0.37.2

Browser

No response

Operating System

• macOS
• Windows
• Linux

Additional Information

No response

[astahmer]

hey, you're right, it only works when used on the root level of the css function

---

this is because of static analysis limitations:
since Panda extractor looks at each file in isolation (e.g, it won't traverse files for imported values/fn) for performance reasons, there's no way to know which function is coming from the return of cva

in your example, that means the Panda extractor will see cva and extract the recipe object, but will not be able to know that buttonRecipe is a recipe function

while we could technically make it possible when in the same file, it would introduce inconsistencies and make it hard to reason about when exporting the cva resulting functions

as you can see here, the Panda extractor doesn't see anything for the key '& .element', because it cant know about buttonRecipe being a recipe function