Code splitting

[Emiliano-Bucci]

Hi! Is there a way to implement code splitting and reduce total bundle size? Or in case, would something like this will implemented? Thanks!

[astahmer]

I don't understand the question, do you mean : is there a way to split the CSS generated ? if that's the question, then the answer is yes there's a panda cssgen command that you can use like this panda cssgen --outfile dist/styles.css

you can also specify a glob of files that will override your config.include so you could use that command just to generate the CSS of a few components or pages

[Emiliano-Bucci]

@astahmer Yes, sorry, I meant that! I was thinking to a solution out of the box for next js, like splitting css by pages or something like that. I suppose it could be done manually though

[Emiliano-Bucci]

@astahmer Yes, I guess that we should generate global (common) stuff and specific stuff, so I will import common stuff in _app.tsx and specific stuff in every single page. Don't know though how hard could be to implement from panda side.

[astahmer]

this shouldnt be too hard, I'll be looking at this very soon !

[astahmer]

here it is #1448

[Emiliano-Bucci]

@astahmer Hi! I see that the pr is not yet merged; is there a way to locally test the implementation? I've tried to install panda from the branch but it seems it doesn't work

[astahmer]

• clone panda repo, go into feat/cssgen-minimal-and-of-type branch, run pnpm i --ignore-scripts in the monorepo root
• inside your app, run pnpm add @pandacss/dev@link:/absolute/path/to/panda/packages/cli and then you should be able to use the pnpm panda cssgen static command