Chunk not generated for specific component with Next.js and app dir

[panoskouff]

Description

panda will generate the css for all components under components folder except for the Positioned.tsx component

https://github.com/panoskouff/playground_next.js-panda-css-2/blob/master/components/Positioned.tsx

Link to Reproduction

https://github.com/panoskouff/playground_next.js-panda-css-2

Steps to reproduce

clone https://github.com/panoskouff/playground_next.js-panda-css-2
pnpm install,
pnpm panda panda init,
pnpm run dev
I also did pnpm panda --watch in another terminal although it used to work without this

inspect chunks in styled-system
you will see there is none for Positioned component

JS Framework

React (TS)

Panda CSS Version

0.5.1

Browser

No response

Operating System

• macOS
• Windows
• Linux

Additional Information

No response

[astahmer]

hey, couple of things here:

you don't need to import styles.css nor generate it by yourself if you're using postcss (you are)
https://github.com/panoskouff/playground_next.js-panda-css-2/pull/1/files#diff-eca96d2c09f31517696a26e1d0be4070e1fbab02831481bed006e275741d030bL3

additional will not be extracted as it's not considered a style prop, you can use the special css prop instead
https://github.com/panoskouff/playground_next.js-panda-css-2/pull/1/files#diff-959355568cb53c20f6838581326955c33dd08fc7f90ff2e5ef9f5c4b47f6255cR23

there's indeed an issue with the default parameter extraction here
https://github.com/panoskouff/playground_next.js-panda-css-2/pull/1/files#diff-b2c8f819389ddbcf7a588779d5a9f215728e046e569b5f5dbe1b49baf6726cc1R9-R13

that I fixed in this new PR in panda #973
in the meantime, I used a different syntax to get default parameters in your component, the end-result is the same
you could revert to what you had once the PR has been merged and release in panda

[panoskouff]

thanks : )

[panoskouff]

so I guess I also can't rename properties, so in this case I have to use position instead of mode

[astahmer]

yes, forgot to mention that, we don't follow props cause it can get too dynamic if done across multiple components, it's not reliable