Panda config polyfill & preflight options bug

[avegatolber]

Description

My initial problem was that I was trying to overwrite styles from external libraries with panda and it was not working, apparently it is because CSS outside of @layers will always have a bigger specificity than those inside.

So the solution I was told was to add polyfill: true in the panda configuration, and yes, that solves my problem but unexpected behaviors happened when I did it.

Link to Reproduction

https://codesandbox.io/p/sandbox/kind-mccarthy-ywfnvz

Steps to reproduce

First scenario

• When set polyfill: true + preflight: true in panda.config.ts it overwrites the styles of all buttons with these styles:

  

  

  In this scenario I am already able to overwrite the external library styles but the button styles are broken.

Second scneario

• To solve the style problem of the previous step I should have just let polyfill: true and preflight: false, but this produces another bug and that is that the layout breaks adding a scroll to the body.

  In this scenario I am already able to overwrite the external library styles but the layout is broken by the scroll it generates.

  

JS Framework

React (TS)

Panda CSS Version

0.33.0

Browser

Google Chrome

Operating System

• macOS
• Windows
• Linux

Additional Information

No response

[astahmer]

I don't think there's any issue in Panda itself but it seems that the Panda preflight might not fit your use-case (you partially need it for the scroll issue but don't want it to affect the buttons)

so I'd suggest to generate it once, copy/paste it on your side and remove the parts you don't want

[avegatolber]

That solves my problem but aren't those styles that overwrite the background color of the buttons a bit invasive?

I suppose that those styles are intended to make the button as generic as possible and then with styles adapt it to the necessities of the application.

But it is common to have buttons from UI libraries and those styles break all the buttons styles.