fix(unplugin): vite build output css (#64)

* fix(unplugin): vite build output css

output a final css once all modules have been loaded by tapping into the `generateBundle` hook and updating the CSS source with parsed PandaContext which contains all loaded modules

Fixes #63

* add changeset

.changeset/shaggy-planets-give.md

@@ -0,0 +1,6 @@
+---
+'@pandabox/unplugin': patch
+---
+
+output a final css once all modules have been loaded by tapping into the generateBundle hook and updating the CSS source
+with parsed PandaContext which contains all loaded modules.

packages/unplugin/src/plugin/core.ts

@@ -12,6 +12,7 @@ import { tranformPanda, type TransformOptions } from './transform'
 import path from 'node:path'
 import { addCompoundVariantCss, inlineCva } from './cva-fns'
 import type { SourceFile } from 'ts-morph'
+import type { OutputAsset } from 'rollup'
 
 const createVirtualModuleId = (id: string) => {
   const base = `virtual:panda${id}`
@@ -27,6 +28,10 @@ const ids = {
   compoundVariants: createVirtualModuleId('-compound-variants'),
 }
 
+const premableStart = '/*! PANDA START */'
+const preambleEnd = '/*! PANDA END */'
+const preambleRegex = /\/\*\!\sPANDA\sSTART\s\*\/.*\/\*\!\sPANDA\sEND\s\*\//s
+
 export interface PandaPluginOptions extends Partial<PandaPluginHooks>, Pick<TransformOptions, 'optimizeJs'> {
   /** @see https://panda-css.com/docs/references/config#cwd */
   cwd?: string
@@ -157,8 +162,7 @@ export const unpluginFactory: UnpluginFactory<PandaPluginOptions | undefined> =
       const sheet = ctx.panda.createSheet()
       const css = ctx.toCss(sheet, options)
       // console.log('load', { id, outfile, resolved: ids.css.resolved })
-
-      return css
+      return `${premableStart}${css}${preambleEnd}`
     },
 
     transformInclude(id) {
@@ -210,6 +214,7 @@ export const unpluginFactory: UnpluginFactory<PandaPluginOptions | undefined> =
       return result
     },
     vite: {
+      name: 'unplugin-panda',
       configResolved(config) {
         if (!options.cwd) {
           options.cwd = config.configFile ? path.dirname(config.configFile) : config.root
@@ -260,6 +265,22 @@ export const unpluginFactory: UnpluginFactory<PandaPluginOptions | undefined> =
           invalidate(outfile)
         })
       },
+      async generateBundle(_, bundles) {
+        const cssBundle = Object.values(bundles).find(
+          (bundle) =>
+            bundle.type === 'asset' &&
+            bundle.name?.endsWith('.css') &&
+            typeof bundle.source === 'string' &&
+            bundle.source.includes(premableStart),
+        ) as OutputAsset | undefined
+        if (cssBundle) {
+          const source = cssBundle.source
+          const ctx = await getCtx()
+          const sheet = ctx.panda.createSheet()
+          const css = ctx.toCss(sheet, options)
+          cssBundle.source = (source as string).replace(preambleRegex, css)
+        }
+      },
     } as Plugin,
   }
 }