Problems setup panda css with rslib to create a component library

[lucas-santosP]

I'm trying to create a React component library using Panda CSS with Rslib, but I'm facing problems with the build output. My goal is to output static CSS. Since I'm mainly using recipes, I followed the documentation and added staticCss: { recipes: '*' } to my panda.config file. I'm also using the cssgen script as part of the build process:

"build": "panda codegen && rslib build && panda cssgen --outfile dist/styles.css"

The main issue is that the final distribution files are pointing to my root styled-system folder (outside of dist) to access certain types:

// dist/components/button.d.ts
import { type ButtonRecipeVariantProps } from '../../styled-system/recipes';

I haven't been able to find a way to fix this. I've tried to create a path alias to access the styled-system folder and setting it as an external in the rslib configuration but unfortunately, none of these approaches worked.

I have this repository with a minimal example of what I'm doing. But I'm open to change the bundler if needed to setup a easier config with Panda css, or if anyone have a example like this working I love to see too.

[lucas-santosP]

I found where the problem is—it's happening during the dts generation in the rslib config. I followed the doc instructions but I couldn't make it work. It seems like an rslib problem with @microsoft/api-extractor; it wasn't recognizing that I had installed it.

In case someone faces the same problem, I ended up switching the bundler to use Vite in library mode with unplugin-dts/vite, which also uses @microsoft/api-extractor but it's working (I just needed to install ajv for some reason).