Changes in recipes are not reflected in the UI

[cschroeter]

Description

When I change a recipe, I expect the change to reflect in the UI but the styles are not updated.

Link to Reproduction

https://github.com/cschroeter/panda-recipe-bug

Steps to reproduce

Open src/theme/recipes/badge.ts
Change for example the background color to blue.50

Expect the background of the badge to be blue not red.

JS Framework

React, Next

Panda CSS Version

0.4.0

Additional Information

Most likely a caching issue with PostCSS.

A workaround is to rm -rf .next and restart the next server. But this is pretty weak developer experience and we should find a better solution.

[segunadebayo]

This is a known Next.js app dir issue.

There are a couple of references to the fact that the PostCSS strategy in the app dir isn't working as well as the pages dir.

vercel/next.js#39410
vercel/next.js#48748
vercel/next.js#47533

I'm confident it'll be fixed pretty soon.

[RDeluxe]

Hello, was wondering if my issue was linked. However I'm using Next13 with Pages, not AppDir

If I change the panda.config.ts file and modify tokens there, the hot reloading is working as intended. However if I store my tokens in another file, I need to restart the development server to see the changes.

You can find a repro here on stackblizt
Simply run pnpm run dev and modify the color in tokens.ts