Panda generates css class names but not the actual styles

[jjjtoikka]

Hello and thanks for a great library,

I'm trying to get Panda to work with bun, vite and typescript. All configs and theme are working properly, the problem is that, if I make a common styled component or just another component and if I pass the styles as props down to component, it doesn't create the actual css styles only css classes, like bg_primary text_white. Even thought I manually run prepare.

I'm guessing the problem is with vite?

It works, if I add there a component which have styles coming through css({}) function. It somehow needs to initialise those. The only style props that work are the ones put in the css({}) function. Same happens if I only want to use cva(). It doesn't update the styles. I have tried to look the documentation carefully, but nothing seems to work for me.

Look App.tsx and ./src/components/container

https://github.com/jjjtoikka/panda-test

Cheers, Janne

[astahmer]

hey, Panda can't know that the styles prop contains a SystemStyleObject that should be extracted, so you need to use css.raw to explicitly tell Panda to treat this object as a style object

or you can use the css prop instead of styles as it will always be extracted
https://panda-css.com/docs/concepts/merging-styles#merging-within-jsx-component

https://github.com/jjjtoikka/panda-test/pull/1

[jjjtoikka]

Thanks for the reply @astahmer,

Do you think that Panda would support passing styles as a plain SystemStyleObject in the future. So I could only pass the style object instead of using css or css.raw to pass the styles.

Cheers, Janne

[astahmer]

yes, you can do that today by renaming the prop styles to css

[jjjtoikka]

Thanks again @astahmer

Excellent, got it to work with the css prop. I removed the styled component, so I took jsxFramework away from the config. That's why it didn't work. Maybe you could add it to the documentation, that css prop doesn't work with out jsxFramework in the config. Pushed this to the test repo as well.

Cheers, J

[jjjtoikka]

Another proposal for the excellent documentation @astahmer and @segunadebayo,

As a typescript user, could you move all of the typescript related documentation into one own section. It would make it much more easier to get the related information from one place (it makes sense that those are in the related places, but it's very hard to remember, where to find definitions later). If one uses the search, one gets so many matches that it's a bit hard to get the right answers right away.

Cheers, J

[jaekwak02]

@astahmer Asking in this thread because the title almost exactly matches the issue I'm facing

I'm using panda with Astro and React, and am mostly using the generated styled.x components. When I run pnpm prepare and pnpm dev, the classnames get generated, but the actual css does not seem to be correctly inserted until I go to each individual file and save. Only when the dev server detects the change does it actually go ahead and insert the styles.

I can't figure out the pattern to why this is happening. Sometimes everything works and all the styles get inserted, and other times, I am stuck saving files and restarting the dev server until it randomly starts working again.

Any idea what might be going on? Thanks!

[astahmer]

I'm not sure exactly, a minimal repro would help, maybe switching to using the CLI instead of the PostCSS plugin will help

[jjjtoikka]

Hey @astahmer

Updated the example repo with a more advanced setup, where Grid is used with pattern grid() and then passing that as css or className to Container (Both ways fails, even when using css prop). The classes are coming to the html element, but the actual styles are missing. I'm guessing this is not possible to do at the moment?

Cheers, Janne

[astahmer]

we currently don't support passing anything else than an atomic style object (= pattern specific properties will not work) in the css prop

[prtcl]

Not sure if this helps (might be a different root cause) but I was seeing the same issue when adding a new app to my npm workspaces project and it turned out to be caused by a @pandacss/dev version mismatch. My UI package is exporting the main preset and generating packages/styled-system which is used in the consuming web apps. When setting up a new website to use Panda it installed a slightly newer version which caused some styles to not be generated.

[AntonYushkevich]

In my case, when I used with Remix, after initialization from the panda-css guide, I did not see anything in styles, because the wrong include path was specified in the automatically generated configuration. After changing the actual issue, the problem was solved