Poor error in development when token has syntax error

[JoshuaKGoldberg]

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/[email protected]/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/[email protected]/node_modules/postcss/lib/input.js:107:16)
    at Parser.unclosedBracket (/Users/josh/repos/philly-js-club-website/node_modules/.pnpm/[email protected]/node_modules/postcss/lib/parser.js:578:22)
    at Parser.other (/Users/josh/repos/philly-js-club-website/node_modules/.pnpm/[email protected]/node_modules/postcss/lib/parser.js:424:35)
    at Parser.parse (/Users/josh/repos/philly-js-club-website/node_modules/.pnpm/[email protected]/node_modules/postcss/lib/parser.js:471:16)
    at Function.parse (/Users/josh/repos/philly-js-club-website/node_modules/.pnpm/[email protected]/node_modules/postcss/lib/parse.js:11:12)
    at cleanupSelectors (/Users/josh/repos/philly-js-club-website/node_modules/.pnpm/@[email protected]/node_modules/@pandacss/generator/dist/index.js:3856:40)
    at generateTokenCss (/Users/josh/repos/philly-js-club-website/node_modules/.pnpm/@[email protected]/node_modules/@pandacss/generator/dist/index.js:3831:19)
    at /Users/josh/repos/philly-js-club-website/node_modules/.pnpm/@[email protected]/node_modules/@pandacss/generator/dist/index.js:4075:118
    at t.with (/Users/josh/repos/philly-js-club-website/node_modules/.pnpm/[email protected]/node_modules/ts-pattern/dist/index.cjs:1:9593)
    at PandaContext.appendCssOfType (/Users/josh/repos/philly-js-club-website/node_modules/.pnpm/@[email protected]/node_modules/@pandacss/generator/dist/index.js:4075:101)
    at PandaContext.appendBaselineCss (/Users/josh/repos/philly-js-club-website/node_modules/.pnpm/@[email protected]/node_modules/@pandacss/generator/dist/index.js:4086:12)
    at Builder.write (/Users/josh/repos/philly-js-club-website/node_modules/.pnpm/@[email protected][email protected]/node_modules/@pandacss/node/dist/index.js:2712:9)
    at plugins (/Users/josh/repos/philly-js-club-website/node_modules/.pnpm/@[email protected][email protected]/node_modules/@pandacss/postcss/dist/index.js:82:17)
    at async LazyResult.runAsync (/Users/josh/repos/philly-js-club-website/node_modules/.pnpm/[email protected]/node_modules/postcss/lib/lazy-result.js:396:11)
    at async /Users/josh/repos/philly-js-club-website/node_modules/.pnpm/@[email protected]_@[email protected][email protected]/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/[email protected]/node_modules/esbuild/lib/main.js:1421:22)
    at async handleRequest (/Users/josh/repos/philly-js-club-website/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:723:13)

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

    node_modules/.pnpm/@[email protected]_@[email protected][email protected]/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/@[email protected]_@[email protected][email protected]/node_modules/@remix-run/dev/dist/compiler/plugins/cssImports.js:133:23)
    at handlePlugins (/Users/josh/repos/philly-js-club-website/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1279:21)

✘ [ERROR] Build failed with 1 error:
node_modules/.pnpm/[email protected]/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/@[email protected]_@[email protected][email protected]/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/@[email protected]_@[email protected][email protected]/node_modules/@remix-run/dev/dist/compiler/plugins/cssImports.js:77:13)
    at handlePlugins (/Users/josh/repos/philly-js-club-website/node_modules/.pnpm/[email protected]/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

philly-js-club/philly-js-club-website@4962967

Steps to reproduce

1. Check out philly-js-club/philly-js-club-website@4962967
2. pnpm i and pnpm dev
3. 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

• macOS
• Windows
• Linux

Additional Information

No response

[astahmer]

this will be fixed with #1896

panda/packages/core/src/plugins/optimize-lightningcss.ts

Lines 27 to 33 in 9c8edd5

	if (result.warnings.length) {
	const split = codeStr.split('\n')
	logger.warn(
	'css',
	result.warnings.map((w) => ({ ...w, line: split[w.loc.line - 1] })),
	)
	}