Invalid CSS when extending theme with semanticTokens

[dsumer]

Description

Currently Panda produces invalid CSS when extending the theme with semanticTokens, which results in unusable tokens.

e.g. my theme looks like this:

  theme: {
    extend: {
      semanticTokens: defineSemanticTokens({
        colors: {
          customRed: {
            value: { _base: '{colors.red.800}', _dark: '{colors.red.200}' },
          },
        },
      }),
    },
  },

then the last lines of the output CSS in styled-system/tokens/index.css looks like this:

  ...
  --colors-color-palette-500: var(--colors-color-palette-500);
  --colors-color-palette-600: var(--colors-color-palette-600);
  --colors-color-palette-700: var(--colors-color-palette-700);
  --colors-color-palette-800: var(--colors-color-palette-800);
  --colors-color-palette-900: var(--colors-color-palette-900)
}

{
  --colors-custom-red: #991b1b
}

.dark {
  --colors-custom-red: #fecaca
}
  }
  

Thank you so much for creating Panda, this is just awesome!

Link to Reproduction

https://stackblitz.com/edit/vitejs-vite-1z5hns?file=panda.config.ts

Steps to reproduce

1. Go to '...'
2. Click on '...'
3. Scroll down to '...'
4. See error

JS Framework

No response

Panda CSS Version

0.3.2

Browser

No response

Operating System

• macOS
• Windows
• Linux

Additional Information

No response

[anubra266]

@dsumer just noting that it's base not _base

[segunadebayo]

Here's a working Stackblitz
https://stackblitz.com/edit/vitejs-vite-nt8jwv?file=panda.config.ts,src%2FApp.tsx

[anubra266]

After testing, can confirm that using _base is what caused the issue.

[dsumer]

ouch, yes that fixes the problem, thanks for pointing this out and for the incredibly fast responses!