[🐞] error when using `stack.raw()` on a project with panda css integration

[babie]

Which component is affected?

Qwik Rollup / Vite plugin

Describe the bug

I used stack.row() and npm run dev and access it, so I had this error:

11:11:39 AM [vite] Internal server error: stack is not defined
  Plugin: vite-plugin-macro
  File: /Users/babie/src/github.com/babie/qwik-pandacss-bug/src/routes/pandacss/index.tsx
      at eval (eval at transform (file:///Users/babie/src/github.com/babie/qwik-pandacss-bug/node_modules/@builder.io/vite-plugin-macro/dist/index.js:472:34), <anonymous>:5:3)
      at TransformContext.transform (file:///Users/babie/src/github.com/babie/qwik-pandacss-bug/node_modules/@builder.io/vite-plugin-macro/dist/index.js:476:28)
      at async Object.transform (file:///Users/babie/src/github.com/babie/qwik-pandacss-bug/node_modules/vite/dist/node/chunks/dep-stQc5rCc.js:50809:30)
      at async loadAndTransform (file:///Users/babie/src/github.com/babie/qwik-pandacss-bug/node_modules/vite/dist/node/chunks/dep-stQc5rCc.js:53582:29)
      at async instantiateModule (file:///Users/babie/src/github.com/babie/qwik-pandacss-bug/node_modules/vite/dist/node/chunks/dep-stQc5rCc.js:54594:10)

Reproduction

https://github.com/babie/qwik-pandacss-bug

Steps to reproduce

• npm create qwik@latest
• npm exec -- qwik add pandacss
• mv postcss.config.js postcss.config.cjs # for another error
• Edit src/routes/pandacss/index.tsx:

diff --git a/src/routes/pandacss/index.tsx b/src/routes/pandacss/index.tsx
index d80f215..eb78009 100644
--- a/src/routes/pandacss/index.tsx
+++ b/src/routes/pandacss/index.tsx
@@ -1,5 +1,15 @@
 import { component$ } from "@builder.io/qwik";
 import { css } from "~/styled-system/css";
+import { stack } from "~/styled-system/patterns";
+
+const headerStyles = css(
+  {},
+  stack.raw({
+    w: "100%",
+    h: "4rem",
+    bg: "red.900",
+  })
+);

 export default component$(() => {
   return (
@@ -12,6 +22,7 @@ export default component$(() => {
         fontSize: 30,
       })}
     >
+      <header class={headerStyles}>This is header.</header>
       This box is styled with PandaCSS.
     </div>
   );

• npm run dev
• Access http://localhost:5173/pandacss

System Info

System:
    OS: macOS 14.3.1
    CPU: (10) arm64 Apple M2 Pro
    Memory: 643.17 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 21.2.0 - ~/Library/pnpm/node
    npm: 10.2.4 - ~/Library/pnpm/npm
    pnpm: 8.15.1 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: 121.0.6167.160
    Safari: 17.3.1
  npmPackages:
    @builder.io/qwik: ^1.4.5 => 1.4.5
    @builder.io/qwik-city: ^1.4.5 => 1.4.5
    @builder.io/vite-plugin-macro: ~0.0.7 => 0.0.7
    undici: * => 6.6.2
    vite: ^5.0.12 => 5.1.3

Additional Information

IMO, @builder.io/vite-plugin-macro has an error: https://www.npmjs.com/package/@builder.io/vite-plugin-macro?activeTab=code

dist/index.js L386-390

  if (opts.preset === "pandacss") {
    defaultFilter = (ident, id) => {
      return ident === "css" && id.endsWith("/styled-system/css") && (id.startsWith(".") || id.startsWith("~"));
    };
  }

I found a workaround:

diff --git a/vite.config.ts b/vite.config.ts
index 1ed0323..ba8356d 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -7,7 +7,16 @@ import { macroPlugin } from "@builder.io/vite-plugin-macro";
 export default defineConfig((): UserConfig => {
   return {
     plugins: [
-      macroPlugin({ preset: "pandacss" }),
+      macroPlugin({
+        preset: "pandacss",
+        filter: (ident, id) => {
+          return (
+            ['css', 'jsx', 'patterns', 'tokens', 'types'].includes(ident) &&
+            !!id.match(/\/styled-system\/{css,jsx,patterns,tokens,types}\Z/g) &&
+            (id.startsWith('.') || id.startsWith('~'))
+          )
+        },
+      }),
       qwikCity(),
       qwikVite(),
       tsconfigPaths(),

This works good.