"@pandabox/unplugin/vite" does not work in "solid-start"

FlatMapIO commented 5 months ago

I'm not sure if this is related to the fact that Solid uses its own Babel plugin to transform JSX, but in solid-start, macros are not generating anything for the utilities layer, and the class in JSX is not being rewritten by the macro.

app.config.ts

export default defineConfig({
  middleware: './src/middleware.ts',
  server: {
    preset: 'cloudflare-module',
  },
  vite: {
    plugins: [
      panda({
        optimizeCss: !isDev,
        // output: isDev ? 'atomic' : 'grouped',
        output: 'grouped',
      }),
    ],
  },
})

app.tsx

import 'virtual:panda.css'

astahmer commented 5 months ago

there's no output: "grouped" with @pandabox/unplugin this option exists for @pandabox/unplugin-panda-macro but I gave up on this approach as it introduces too many limitations, which I intend to fix with a chrome extension instead https://twitter.com/astahmer_dev/status/1776919737999425629

can you try using the outfile options (which generates an actual file that you can import as usual) instead of the virtual:panda.css ?

if that doesn't work, can you make a minimal repro ?

FlatMapIO commented 5 months ago

This extension is so cool! I just tried the outfile option, and I don't think it's been published to npm yet? The version I'm using shows this option in its TypeScript types, and after running it, no panda.css is generated anywhere.

astahmer commented 5 months ago

latest version is here as 0.1.2 it's working in the examples/react folder https://github.com/astahmer/pandabox/pull/52

can you link a minimal repro ? I tried making one for solid-start but the dev command won't start

pandakit/examples/solid-start-unplugin sandbox/unplugin-from-npm* ≡
❯ pnpm vinxi dev
vinxi v0.3.11
Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'vinxi' imported from /Users/astahmer/dev/alex/pandakit/node_modules/.pnpm/@solidjs+start@1.0.0-rc.0_solid-js@1.8.16_vinxi@0.3.11_vite@5.2.8/node_modules/@solidjs/start/config/index.js
    at new NodeError (node:internal/errors:405:5)
    at packageResolve (node:internal/modules/esm/resolve:916:9)
    at moduleResolve (node:internal/modules/esm/resolve:973:20)
    at defaultResolve (node:internal/modules/esm/resolve:1193:11)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:403:12)
    at ModuleLoader.resolve (node:internal/modules/esm/loader:372:25)
    at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:249:38)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:39)
    at link (node:internal/modules/esm/module_job:75:36) {
  code: 'ERR_MODULE_NOT_FOUND'
}
vinxi starting dev server

FlatMapIO commented 5 months ago

I previously installed @pandabox/unplugin-panda-macro, it seems I made a mistake.

I tried the plugin again, and the optimizeJs: 'auto' option causes the plugin to generate CSS for the previous code modifications each time, so there won't be a utils layer generated on the first run. The new tokens generated each time do not clear out the tokens that no longer exist, which can quickly lead to HMR not working properly in large projects. If neither the 'optimizeCss' nor the 'optimizeJs' options are specified, the plugin will never generate utils.

FlatMapIO commented 5 months ago

https://github.com/FlatMapIO/solid-start-panda-macro/blob/main/src/routes/index.tsx#L9-L15

astahmer commented 5 months ago

thank you, this is very helpful ! sorry for those issues, I havent spend a lot of time playing with the unplugin for now 🥲 my time is limited between so many different projects

will look into it asap !

astahmer commented 5 months ago

should be fixed in 0.1.3 https://github.com/astahmer/pandabox/pull/53

astahmer / pandabox

"@pandabox/unplugin/vite" does not work in "solid-start" #51