Poor error in development when token has syntax error

Description

I messed up the syntax for a token by forgetting to close a parenthesis:

// within panda.config.ts...
theme: {
    tokens: {
        fontSizes: {
            mediumJosh: { value: "clamp(1.5rem, 4vw, {fontSizes.large}" },

The error message reported by Panda/PostCSS/etc. was rather unhelpful. It mentioned that index.css had an issue, but never pointed out the specific syntax complaint or where it came from:

✘ [ERROR] <css input>:4:36: Unclosed bracket [plugin postcss-plugin]

    node_modules/.pnpm/postcss@8.4.32/node_modules/postcss/lib/input.js:107:15:
      107 │       result = new CssSyntaxError(
          ╵                ^

    at Input.error (/Users/josh/repos/philly-js-club-website/node_modules/.pnpm/postcss@8.4.32/node_modules/postcss/lib/input.js:107:16)
    at Parser.unclosedBracket (/Users/josh/repos/philly-js-club-website/node_modules/.pnpm/postcss@8.4.32/node_modules/postcss/lib/parser.js:578:22)
    at Parser.other (/Users/josh/repos/philly-js-club-website/node_modules/.pnpm/postcss@8.4.32/node_modules/postcss/lib/parser.js:424:35)
    at Parser.parse (/Users/josh/repos/philly-js-club-website/node_modules/.pnpm/postcss@8.4.32/node_modules/postcss/lib/parser.js:471:16)
    at Function.parse (/Users/josh/repos/philly-js-club-website/node_modules/.pnpm/postcss@8.4.32/node_modules/postcss/lib/parse.js:11:12)
    at cleanupSelectors (/Users/josh/repos/philly-js-club-website/node_modules/.pnpm/@pandacss+generator@0.24.0/node_modules/@pandacss/generator/dist/index.js:3856:40)
    at generateTokenCss (/Users/josh/repos/philly-js-club-website/node_modules/.pnpm/@pandacss+generator@0.24.0/node_modules/@pandacss/generator/dist/index.js:3831:19)
    at /Users/josh/repos/philly-js-club-website/node_modules/.pnpm/@pandacss+generator@0.24.0/node_modules/@pandacss/generator/dist/index.js:4075:118
    at t.with (/Users/josh/repos/philly-js-club-website/node_modules/.pnpm/ts-pattern@5.0.5/node_modules/ts-pattern/dist/index.cjs:1:9593)
    at PandaContext.appendCssOfType (/Users/josh/repos/philly-js-club-website/node_modules/.pnpm/@pandacss+generator@0.24.0/node_modules/@pandacss/generator/dist/index.js:4075:101)
    at PandaContext.appendBaselineCss (/Users/josh/repos/philly-js-club-website/node_modules/.pnpm/@pandacss+generator@0.24.0/node_modules/@pandacss/generator/dist/index.js:4086:12)
    at Builder.write (/Users/josh/repos/philly-js-club-website/node_modules/.pnpm/@pandacss+node@0.24.0_typescript@5.0.4/node_modules/@pandacss/node/dist/index.js:2712:9)
    at plugins (/Users/josh/repos/philly-js-club-website/node_modules/.pnpm/@pandacss+postcss@0.24.0_typescript@5.0.4/node_modules/@pandacss/postcss/dist/index.js:82:17)
    at async LazyResult.runAsync (/Users/josh/repos/philly-js-club-website/node_modules/.pnpm/postcss@8.4.22/node_modules/postcss/lib/lazy-result.js:396:11)
    at async /Users/josh/repos/philly-js-club-website/node_modules/.pnpm/@remix-run+dev@2.0.0_@remix-run+serve@2.0.0_typescript@5.0.4/node_modules/@remix-run/dev/dist/compiler/plugins/cssImports.js:141:23
    at async requestCallbacks.on-load (/Users/josh/repos/philly-js-club-website/node_modules/.pnpm/esbuild@0.17.6/node_modules/esbuild/lib/main.js:1421:22)
    at async handleRequest (/Users/josh/repos/philly-js-club-website/node_modules/.pnpm/esbuild@0.17.6/node_modules/esbuild/lib/main.js:723:13)

  This error came from the "onLoad" callback registered here:

    node_modules/.pnpm/@remix-run+dev@2.0.0_@remix-run+serve@2.0.0_typescript@5.0.4/node_modules/@remix-run/dev/dist/compiler/plugins/cssImports.js:133:22:
      133 │                 build.onLoad({
          ╵                       ~~~~~~

    at setup (/Users/josh/repos/philly-js-club-website/node_modules/.pnpm/@remix-run+dev@2.0.0_@remix-run+serve@2.0.0_typescript@5.0.4/node_modules/@remix-run/dev/dist/compiler/plugins/cssImports.js:133:23)
    at handlePlugins (/Users/josh/repos/philly-js-club-website/node_modules/.pnpm/esbuild@0.17.6/node_modules/esbuild/lib/main.js:1279:21)

✘ [ERROR] Build failed with 1 error:
node_modules/.pnpm/postcss@8.4.32/node_modules/postcss/lib/input.js:107:15: ERROR: [plugin: postcss-plugin] <css input>:4:36: Unclosed bracket [plugin css-file]

    app/root.tsx:23:19:
      23 │ import styles from "./index.css";
         ╵                    ~~~~~~~~~~~~~

  This error came from the "onLoad" callback registered here:

    node_modules/.pnpm/@remix-run+dev@2.0.0_@remix-run+serve@2.0.0_typescript@5.0.4/node_modules/@remix-run/dev/dist/compiler/plugins/cssImports.js:77:12:
      77 │       build.onLoad({
         ╵             ~~~~~~

    at setup (/Users/josh/repos/philly-js-club-website/node_modules/.pnpm/@remix-run+dev@2.0.0_@remix-run+serve@2.0.0_typescript@5.0.4/node_modules/@remix-run/dev/dist/compiler/plugins/cssImports.js:77:13)
    at handlePlugins (/Users/josh/repos/philly-js-club-website/node_modules/.pnpm/esbuild@0.17.6/node_modules/esbuild/lib/main.js:1279:21)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

I had to add a console.log inside the call stack to see that the specific CSS being crated was:

  this: Input {
    css: ':where(:root, :host) {\n' +
      // ...
      '    --font-sizes-medium-josh: clamp(1.5rem, 4vw, var(--font-sizes-large);\n' +

Link to Reproduction

https://github.com/philly-js-club/philly-js-club-website/pull/85/commits/4962967f4d264bfc97bd6bf5d40b9707ff24afb9

Steps to reproduce

Check out https://github.com/philly-js-club/philly-js-club-website/pull/85/commits/4962967f4d264bfc97bd6bf5d40b9707ff24afb9
pnpm i and pnpm dev
See unclear error message

Sorry again for not posting a StackBlitz 🙂

JS Framework

Remix (TS)

Panda CSS Version

0.24.0

Browser

n/a

Operating System

[X] macOS
[ ] Windows
[ ] Linux

Additional Information

No response

chakra-ui / panda

Poor error in development when token has syntax error #1912