[static css + ESM preset] generates invalid css syntax error

[adbutterfield]

Description

I have a monorepo with the tokens as a package exporting a preset. I found that when you have a preset built as esm, and you have both global and semantic spacing tokens, and you want to build staticCss you get an error at build time.

The error:

🐼 error [sheet:process] > 1 | .m_-1 {margin: {spacing.small};
    |                 ^
  2 | }
  3 | 
🐼 error [sheet:process] > 1 | .m_-2 {margin: {spacing.medium};
    |                 ^
  2 | }
  3 | 
🐼 error [sheet:process] > 1 | .m_-3 {margin: {spacing.large};
    |                 ^
  2 | }
  3 | 
🐼 error [sheet:process] > 1 | @media screen and (min-width: 40em) {.sm\:m_-1 {margin: {spacing.small};
    |                                                          ^
  2 | }
  3 | }
🐼 error [sheet:process] > 1 | @media screen and (min-width: 40em) {.sm\:m_-2 {margin: {spacing.medium};
    |                                                          ^
  2 | }
  3 | }
🐼 error [sheet:process] > 1 | @media screen and (min-width: 40em) {.sm\:m_-3 {margin: {spacing.large};
    |                                                          ^
  2 | }
  3 | }
🐼 error [sheet:process] > 1 | @media screen and (min-width: 48em) {.md\:m_-1 {margin: {spacing.small};
    |                                                          ^
  2 | }
  3 | }
🐼 error [sheet:process] > 1 | @media screen and (min-width: 48em) {.md\:m_-2 {margin: {spacing.medium};
    |                                                          ^
  2 | }
  3 | }
🐼 error [sheet:process] > 1 | @media screen and (min-width: 48em) {.md\:m_-3 {margin: {spacing.large};
    |                                                          ^
  2 | }
  3 | }
🐼 error [sheet:process] > 1 | @media screen and (min-width: 64em) {.lg\:m_-1 {margin: {spacing.small};
    |                                                          ^
  2 | }
  3 | }
🐼 error [sheet:process] > 1 | @media screen and (min-width: 64em) {.lg\:m_-2 {margin: {spacing.medium};
    |                                                          ^
  2 | }
  3 | }
🐼 error [sheet:process] > 1 | @media screen and (min-width: 64em) {.lg\:m_-3 {margin: {spacing.large};
    |                                                          ^
  2 | }
  3 | }
🐼 error [sheet:process] > 1 | @media screen and (min-width: 80em) {.xl\:m_-1 {margin: {spacing.small};
    |                                                          ^
  2 | }
  3 | }
🐼 error [sheet:process] > 1 | @media screen and (min-width: 80em) {.xl\:m_-2 {margin: {spacing.medium};
    |                                                          ^
  2 | }
  3 | }
🐼 error [sheet:process] > 1 | @media screen and (min-width: 80em) {.xl\:m_-3 {margin: {spacing.large};
    |                                                          ^
  2 | }
  3 | }
🐼 error [sheet:process] > 1 | @media screen and (min-width: 96em) {.\32xl\:m_-1 {margin: {spacing.small};
    |                                                             ^
  2 | }
  3 | }
🐼 error [sheet:process] > 1 | @media screen and (min-width: 96em) {.\32xl\:m_-2 {margin: {spacing.medium};
    |                                                             ^
  2 | }
  3 | }
🐼 error [sheet:process] > 1 | @media screen and (min-width: 96em) {.\32xl\:m_-3 {margin: {spacing.large};
    |                                                             ^
  2 | }
  3 | }
🐼 error [sheet:process] > 1 | .m_-1 {margin: {spacing.small};
    |                 ^
  2 | }
  3 | 
🐼 error [sheet:process] > 1 | .m_-2 {margin: {spacing.medium};
    |                 ^
  2 | }
  3 | 
🐼 error [sheet:process] > 1 | .m_-3 {margin: {spacing.large};
    |                 ^
  2 | }
  3 | 
🐼 error [sheet:process] > 1 | @media screen and (min-width: 40em) {.sm\:m_-1 {margin: {spacing.small};
    |                                                          ^
  2 | }
  3 | }
🐼 error [sheet:process] > 1 | @media screen and (min-width: 40em) {.sm\:m_-2 {margin: {spacing.medium};
    |                                                          ^
  2 | }
  3 | }
🐼 error [sheet:process] > 1 | @media screen and (min-width: 40em) {.sm\:m_-3 {margin: {spacing.large};
    |                                                          ^
  2 | }
  3 | }
🐼 error [sheet:process] > 1 | @media screen and (min-width: 48em) {.md\:m_-1 {margin: {spacing.small};
    |                                                          ^
  2 | }
  3 | }
🐼 error [sheet:process] > 1 | @media screen and (min-width: 48em) {.md\:m_-2 {margin: {spacing.medium};
    |                                                          ^
  2 | }
  3 | }
🐼 error [sheet:process] > 1 | @media screen and (min-width: 48em) {.md\:m_-3 {margin: {spacing.large};
    |                                                          ^
  2 | }
  3 | }
🐼 error [sheet:process] > 1 | @media screen and (min-width: 64em) {.lg\:m_-1 {margin: {spacing.small};
    |                                                          ^
  2 | }
  3 | }
🐼 error [sheet:process] > 1 | @media screen and (min-width: 64em) {.lg\:m_-2 {margin: {spacing.medium};
    |                                                          ^
  2 | }
  3 | }
🐼 error [sheet:process] > 1 | @media screen and (min-width: 64em) {.lg\:m_-3 {margin: {spacing.large};
    |                                                          ^
  2 | }
  3 | }
🐼 error [sheet:process] > 1 | @media screen and (min-width: 80em) {.xl\:m_-1 {margin: {spacing.small};
    |                                                          ^
  2 | }
  3 | }
🐼 error [sheet:process] > 1 | @media screen and (min-width: 80em) {.xl\:m_-2 {margin: {spacing.medium};
    |                                                          ^
  2 | }
  3 | }
🐼 error [sheet:process] > 1 | @media screen and (min-width: 80em) {.xl\:m_-3 {margin: {spacing.large};
    |                                                          ^
  2 | }
  3 | }
🐼 error [sheet:process] > 1 | @media screen and (min-width: 96em) {.\32xl\:m_-1 {margin: {spacing.small};
    |                                                             ^
  2 | }
  3 | }
🐼 error [sheet:process] > 1 | @media screen and (min-width: 96em) {.\32xl\:m_-2 {margin: {spacing.medium};
    |                                                             ^
  2 | }
  3 | }
🐼 error [sheet:process] > 1 | @media screen and (min-width: 96em) {.\32xl\:m_-3 {margin: {spacing.large};
    |                                                             ^
  2 | }
  3 | }

It seems like it might be building correctly. So maybe the error is getting thrown by mistake?

Link to Reproduction

https://stackblitz.com/edit/vitejs-vite-rwpwxa?file=panda.config.ts,preset.ts&terminal=dev

Steps to reproduce

1. Go to the Stackblitz
2. npm run build
3. See error in console

There are 3 ways to build without error:

1. In panda.config.ts, use import preset from './dist/preset.cjs' instead of import preset from './dist/preset';
2. In preset.ts, comment out semanticTokens.
3. In panda.config.ts, comment out staticCss

Of course, 2 and 3 will not generate the resulting static CSS that we want.

JS Framework

No response

Panda CSS Version

0.31.0

Browser

No response

Operating System

• macOS
• Windows
• Linux

Additional Information

No response