panda-debug.mdx

CLI Commands

Panda comes with built-in commands to help you develop and debug your app.

Command	Description
studio	Runs built-in documentation for tokens defined in your project. This will be useful for your team to communicate design decisions in your own way, and share information effectively. More on that here.
analyze	Analyze design token usage in your project, this will be automatically used by the studio command and available in the studio's Token Analyzer page
debug	Debug design token extraction & css generated from files

Debugging

Panda comes with a built-in debug command to help you debug your app. This can be useful to understand how Panda is extracting styles from your code and generating CSS.

By default it will scan & output debug files for the entire project depending on your include and exclude options from your config file.

<Tabs items={['pnpm', 'npm', 'yarn']}> bash pnpm panda debug # You can also debug a specific file or folder # using the optional glob argument pnpm panda debug src/components/Button.tsx pnpm panda debug "./src/components/**" bash npx panda debug # # You can also debug a specific file or folder # using the optional glob argument npx panda debug src/components/Button.tsx npx panda debug "./src/components/**" bash yarn panda debug # # You can also debug a specific file or folder # using the optional glob argument yarn panda debug src/components/Button.tsx yarn panda debug "./src/components/**"

This would generate a debug folder in your config.outdir folder with the following structure:

*.ast.json files will look like:

[
  {
    "name": "css",
    "type": "object",
    "data": [
      {
        "transitionProperty": "all",
        "opacity": "0.5",
        "border": "1px solid",
        "borderColor": "black",
        "color": "gray.600",
        "_hover": {
          "color": "gray.900"
        },
        "rounded": "md",
        "p": "1.5",
        "_dark": {
          "borderColor": "rgba(255, 255, 255, 0.1)",
          "color": "gray.400",
          "_hover": {
            "color": "gray.50"
          }
        }
      }
    ],
    "kind": "CallExpression",
    "line": 13,
    "column": 9
  }
]

And the css file associated would just contain the styles generated from the extraction process on that file.