windicss / windicss-webpack-plugin

🍃 Windi CSS for webpack ⚡
https://windicss.org/integrations/webpack.html
79 stars 19 forks source link

NextJS appDir: cannot use colors that have not been used yet #125

Open ngoov opened 1 year ago

ngoov commented 1 year ago

Describe the bug I'm using the experimental appDir (which is used by a lot of people to test currently) and WindiCSS in my app. Using WindiCSS in the pages dir works perfectly, even the fast refresh. Using it in the app/ dir only works for colors that have been already used anywhere in the code (so I guess exists in the "windi.css"). Even hard reloading using CTRL+F5 on the page does not work. Only restarting the dev server works to use the colors that have been defined in the page when starting the server. I guess something is wrong with the cache.

To Reproduce I've created a simple CodeSandbox to reproduce this issue: https://codesandbox.io/p/sandbox/crazy-ioana-3iu9rp?file=%2Fapp%2Fpage.tsx When you change the color of the div on the app/page.tsx file to for example bg-blue-100, the color is not found. Same when you try to use bg-red-500 for example or any color that has not been used in the app yet.

Expected behavior A clear and concise description of what you expected to happen.

Additional context I've tried multiple versions of nextjs, like 13.0.4, 13.1.1 or the canary versions of 13.1.2.