Problems using Panda for a Svelte component library

[BeeMargarida]

Hi!

I'm currently doing a POC svelte component library with panda CSS, where I use SvelteKit packaging system. I have some questions regarding how could I package pandaCSS so that the users of the component library were not forced to use panda.

I tried following the static CSS file part of the docs, but I think I found a bug. But even with that fixed, does it generate only one static file with all the styles? Is there a way of breaking them up?
Or would it be better to include the generated code (styled-system) and ship it with the library? Are there any downsides?

I'm sorry if some of the questions are dumb, I'm just trying to figure out if panda CSS will work and that I'm making the correct choices. Thank you!

[Hecatron]

I'm not a panda dev myself
I've been taking a different approach myself of saving typescript objects with the right type within a seperate css package then importing them into a vue component library that includes panda

If you wanted to generate the css before hand so that the component library would just import the final css files.
I suspect what you would need to do is

1. use panda cssgen to generate the styled-system/styles.css file
2. it looks as if styles.css imports other css files such as './reset.css' './global.css' './tokens/index.css' etc so I'd probably include anything with a .css extension within that directory
3. write a bit of code that exports a json or lump of javascript that could later be imported by another package
   the idea being it contains the mapping from the styles to the class lists

From what I understand on how pandacss works

1. it scans the source files based on the config
2. where it finds css() or cva() functions etc it looks at that to figure out what css to put into styles.css
3. then if you run some code as part of a build step which uses those functions such as css() or cva() they return a text string with a list of classes that you need to make a note of some place for later use

Since those functions css() / cva() are defined within the styled-system directory which isn't a package but an auto generated lump of code, they can't be called from outside of the package.

I think that might work

[BeeMargarida]

Thank you so much for this answer! I'll definitely will try this out. I'll probably have to ship the generated code too, since I want to export the panda functions to allow users to customize the styles as well.

[Hecatron]

Thinking about it that might work for straight css definitions
but for recipes you'd have to decide before hand what values would be fed into the recipe for generating the needed css, so that might not be that helpful