JSX Styled Component class are like background_blue while CSS is .bg_blue

[mike-shtil-loop]

Hi everyone,

I'm having a scenario where some instances of a styled JSX (React) Panda components inject class names which don't match the global.css selectors.

For example, the global.css style generated is

.bg_blue {
    background: #00f;
}

But some of the instances of this styled component are

<button class="background_blue" />

While others are the expected

<button class="bg_blue" />

Perhaps a maintainer could comment on what makes Panda seemingly fall back to a snake-case raw CSS property name instead of the shortened ones, for a class name?
I couldn't locate this behavior in the source code

Some extra info:
I'm running a turborepo monorepo, with a Panda setup like here https://github.com/fredericoo/panda-design-system-poc
where I have apps/main and packages/ui. The issue only happens with components imported into apps/main from packages/ui.
Using tokens from packages/ui/panda.config.ts works fine. Also for some instances of the components the class name is generated fine.
I don't have any other post-css/atomic CSS libraries. There is some use of Stitches still in the code but I couldn't quite find a connection.
This happens with any property - font-size instead of fs etc.

[astahmer]

hey, can you make a minimal repro ? one showcasing the issue you're having