You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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 ? ☺️
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
This discussion was converted from issue #2523 on April 23, 2024 17:24.
Heading
Bold
Italic
Quote
Code
Link
Numbered list
Unordered list
Task list
Attach files
Mention
Reference
Menu
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
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
Additional Information
No response
Beta Was this translation helpful? Give feedback.
All reactions