From 4b6108411bacd00c765d543e7e786619cb1c85a6 Mon Sep 17 00:00:00 2001 From: Shashikant Yadav Date: Sun, 22 Mar 2026 15:26:14 +0530 Subject: [PATCH 1/2] fix(babel-plugin): catch TS syntax errors from evaluatePaths and surface Griffel error message --- .../error-typescript-evaluation/fixture.ts | 8 +++++ .../error-typescript-evaluation/style.ts | 5 +++ .../babel-preset/src/transformPlugin.test.ts | 7 ++++ packages/babel-preset/src/transformPlugin.ts | 35 +++++++++++++++---- 4 files changed, 49 insertions(+), 6 deletions(-) create mode 100644 packages/babel-preset/__fixtures__/error-typescript-evaluation/fixture.ts create mode 100644 packages/babel-preset/__fixtures__/error-typescript-evaluation/style.ts diff --git a/packages/babel-preset/__fixtures__/error-typescript-evaluation/fixture.ts b/packages/babel-preset/__fixtures__/error-typescript-evaluation/fixture.ts new file mode 100644 index 000000000..f50576be4 --- /dev/null +++ b/packages/babel-preset/__fixtures__/error-typescript-evaluation/fixture.ts @@ -0,0 +1,8 @@ +import { makeStyles } from '@griffel/react'; +import { colorToStop } from './style'; + +export const useStyles = makeStyles({ + root: { + color: colorToStop, + }, +}); diff --git a/packages/babel-preset/__fixtures__/error-typescript-evaluation/style.ts b/packages/babel-preset/__fixtures__/error-typescript-evaluation/style.ts new file mode 100644 index 000000000..f5d116d8f --- /dev/null +++ b/packages/babel-preset/__fixtures__/error-typescript-evaluation/style.ts @@ -0,0 +1,5 @@ +/* eslint-disable @typescript-eslint/no-unused-vars */ +export const colorToStop = (() => { + const x: number; // triggers evaluation crash + return 'red'; +})(); diff --git a/packages/babel-preset/src/transformPlugin.test.ts b/packages/babel-preset/src/transformPlugin.test.ts index 713e94c10..3340ef1dc 100644 --- a/packages/babel-preset/src/transformPlugin.test.ts +++ b/packages/babel-preset/src/transformPlugin.test.ts @@ -305,6 +305,13 @@ pluginTester({ }, error: /Validation failed for passed config/, }, + + // Fix for https://github.com/microsoft/griffel/issues/627 + { + title: 'errors: shows clear message for TypeScript syntax during evaluation', + fixture: path.resolve(fixturesDir, 'error-typescript-evaluation', 'fixture.ts'), + error: /\[Griffel\].*TypeScript/, + }, ], plugin: transformPlugin, diff --git a/packages/babel-preset/src/transformPlugin.ts b/packages/babel-preset/src/transformPlugin.ts index b33699823..08d976770 100644 --- a/packages/babel-preset/src/transformPlugin.ts +++ b/packages/babel-preset/src/transformPlugin.ts @@ -228,6 +228,12 @@ function isRequireDeclarator( return false; } +function isTypeScriptSyntaxError(error: any): boolean { + if (!error?.message) return false; + + return error.message.includes('Missing initializer') || error.message.includes('Unexpected token'); +} + export const transformPlugin = declare, PluginObj>((api, options) => { api.assertVersion(7); @@ -302,12 +308,29 @@ export const transformPlugin = declare, PluginObj p.path), - pluginOptions, - ); + try { + evaluatePaths( + programPath, + state.file.opts.filename!, + state.definitionPaths.map(p => p.path), + pluginOptions, + ); + } catch (error: any) { + if (isTypeScriptSyntaxError(error)) { + throw programPath.buildCodeFrameError( + `[Griffel] Failed to evaluate styles due to TypeScript syntax. +Griffel's static evaluation received TypeScript code, which is not supported. + +Fix: +- Ensure TypeScript is compiled before Griffel runs +- Or adjust your Vite/plugin configuration + +Original error: ${error.message}`, + ); + } + + throw error; + } state.definitionPaths.forEach(definitionPath => { const callExpressionPath = definitionPath.path.findParent(parentPath => From 9171eae7f41fa6fdac7c4905485f59e052785da1 Mon Sep 17 00:00:00 2001 From: Shashikant Yadav Date: Sun, 22 Mar 2026 15:53:32 +0530 Subject: [PATCH 2/2] Change files --- ...-babel-preset-d3fb1ed9-0525-46b2-87a3-94a60df26319.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@griffel-babel-preset-d3fb1ed9-0525-46b2-87a3-94a60df26319.json diff --git a/change/@griffel-babel-preset-d3fb1ed9-0525-46b2-87a3-94a60df26319.json b/change/@griffel-babel-preset-d3fb1ed9-0525-46b2-87a3-94a60df26319.json new file mode 100644 index 000000000..af81d84ae --- /dev/null +++ b/change/@griffel-babel-preset-d3fb1ed9-0525-46b2-87a3-94a60df26319.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix(babel-plugin): catch TS syntax errors from evaluatePaths and surface Griffel error message", + "packageName": "@griffel/babel-preset", + "email": "shashikant1989yadav@gmail.com", + "dependentChangeType": "patch" +}