CVA and SVA not pre-generating CSS

[waraness99]

Description

When I use CVA or SVA in my NX project, CSS is not generated. However, it works fine with props.

export const Route = createFileRoute('/')({
  component: () => {
    const square2 = cva({
      base: {
        w: '16',
        h: '16',
        bg: 'green.600',
      },
    });

    return (
      <Stack gap="4" m="16">
        <Box w="16" h="16" bg="red.600" />
        {/* 👇 CVA, SVA will not be pre-generated */}
        <Box className={square2()} />
        <Box css={{w:"16", h:"16", bg:"blue.600"}} />
      </Stack>
    );
  },
});

Link to Reproduction

https://stackblitz.com/~/github.com/waraness99/panda-test

Steps to reproduce

My panda config with NX is not great yet...

1. Run npm i.
2. Go tolibs/styled-system/panda.config.ts and temporary edit outdir to ./src/lib/__generated__.
3. Run: cd libs/styled-system && npx panda.
4. Revert outdir path to its initial value (./libs/styled-system/src/lib/__generated__).
5. Open a new terminal and run npx nx serve desktop-front.
6. See error where the 2nd square has no styles.

JS Framework

React (TS)

Panda CSS Version

0.33.0

Browser

Chromium Engine Version 121.0.6167.184

Operating System

• macOS
• Windows
• Linux

Additional Information

No response

[astahmer]

please check this repo and follow the same structure as in the examples
https://github.com/astahmer/panda-monorepo-setup

---

I don't recommend using an importMap that contains every entrypoints (css recipes patterns etc), and I dont' recommend having a lib/styled-system taking care of the CSS generated for the app either, but still, if you really want this you can make it work like this:

import { defineConfig } from '@pandacss/dev';
import path from "node:path"

const monorepoRoot = path.resolve(__dirname, "../..")

export default defineConfig({
  preflight: true,
  jsxFramework: 'react',
  include: [path.join(monorepoRoot, './apps/**/*.{ts,tsx}'), './libs/**/*.{ts,tsx}'],
  outdir: './src/lib/__generated__',
  exclude: [],
  importMap: {
    css: '@panda-test/styled-system',
    recipes: '@panda-test/styled-system',
    patterns: '@panda-test/styled-system',
    jsx: '@panda-test/styled-system',
 }
});