Webpack HMR on windows shows warning due to invalid dependency path about panda

[astahmer]

can you try setting your config.outExtension to "js"

[refty10]

can you try setting your config.outExtension to "js"

Thanks for the reply.
I have tried your advice.
I added outExtension: 'js' to panda.config.ts and still get the same Warning.
CSS content is changed and a warning is output as before when a hot read occurs.
I also removed styled-system and ran npx panda codegen again with similar results.

[astahmer]

sorry to hear that. It looks like a webpack (used by nextjs) specific issue, maybe css-loader has a hard time with CSS @layer ? I'm not sure we can do anything about it

maybe using this ignore comment can help ? https://webpack.js.org/loaders/css-loader/#disable-url-resolving-using-the--webpackignore-true--comment
or maybe opting out of layers could help https://www.npmjs.com/package/@csstools/postcss-cascade-layers

[refty10]

sorry to hear that. It looks like a webpack (used by nextjs) specific issue, maybe css-loader has a hard time with CSS @layer ? I'm not sure we can do anything about it

maybe using this ignore comment can help ? https://webpack.js.org/loaders/css-loader/#disable-url-resolving-using-the--webpackignore-true--comment or maybe opting out of layers could help https://www.npmjs.com/package/@csstools/postcss-cascade-layers

Thanks for the reply.
I added webpackIgnore: true to global.css.

//src\styles\globals.css

/* webpackIgnore: true */
@layer reset, base, tokens, recipes, utilities;

But there is no change, the Warning is still output.

---

How to install this.
https://www.npmjs.com/package/@csstools/postcss-cascade-layers

I could not figure out how to configure panda-css with this plugin.
Perhaps not using global.css and putting @layers in config instead?
It would be great if you could show a sample.

[astahmer]

just pushed this PR which might solve your issue, I'm not sure since I can't test it 😅

I could not figure out how to configure panda-css with this plugin.

like any other postcss plugin, so just installing and adding it here should be enough

module.exports = {
  plugins: {
    '@pandacss/dev/postcss': {}
+     '@csstools/postcss-cascade-layers': {},
  }
}

[BorisZubchenko]

Having the same issue for a fresh project. @csstools/postcss-cascade-layers doesn't help as well. This warning is so annoying since it runs for every recompiling.