Panda extracts styles from random unrelated components

[Faithfinder]

Description

Looks similar to #3089, but I decided to open a separate issue anyway, since this specific case isn't mentioned there, and it looks like there's a fix brewing there already.

It looks like, if a prop's name is same as a CSS property, Panda just extracts it into stylesheet? In the example a component not in any way styled has an all boolean prop, and panda generates this stylesheet:

.all_true {
		all: true;
	}

Problem with this particular example is that this is invalid CSS. I've hit it by trying out rolldown-vite, which defaults to LightningCSS, which barfs on invalid CSS, preventing build.

I wonder if there's also an "Panda should never generate invalid CSS" issue in here?

Link to Reproduction

https://play.panda-css.com/_k3mkCx0-b

Steps to reproduce

JS Framework

React (TS)

Panda CSS Version

0.54.0

Browser

Chrome

Operating System

• macOS
• Windows
• Linux

Additional Information

No response

[segunadebayo]

This is a caveat of the JSX style props extraction. Panda extracts all possible CSS properties that are passed as props any element.

In this case “all” is a valid css properties hence the reason it extracts it. You can consider disabling JSX Style props altogether or set it to minimal (so you can use just the css prop)

[Faithfinder]

Well then, how about "Panda should never generate invalid CSS" as a solution?