PandaCSS' postcss dependency conflicts with vite's postcss dependency

[rcoedo]

Description

When I add the postcss plugin in my vite.config.ts file I get a TS error:

After investigating the issue I noticed I have two postcss versions: 8.4.35 (PandaCSS' required version) and 8.4.38 (Vite's version).

Since the postcss plugin is just using the postcss type definition, would it be possible to use a peer dependency instead?

Thanks!

Link to Reproduction

https://github.com/rcoedo/pandacss-postcss-bug

Steps to reproduce

Open vite.config.ts and there will be a typescript error like the one mentioned.

JS Framework

React

Panda CSS Version

0.37.2

Browser

No response

Operating System

• macOS
• Windows
• Linux

Additional Information

No response

[rcoedo]

This could be related to some closed postcss issues like #1104

[segunadebayo]

I would recommend any of these options:

• Type casting to match the Vite options.
• Setting up pnpm resolutions to always match the Vite's version

https://pnpm.io/package_json#pnpmoverrides

Alternatively, you can use the postcss.config.js file instead; Vite will read this file correctly.

In reality, there is a high chance of a version mismatch between Vite and Panda occasionally.