fix(babel-plugin): handle TypeScript evaluation errors from evaluatePaths and show clear message

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"
+}

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,
+  },
+});

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';
+})();

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,

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<Partial<BabelPluginOptions>, PluginObj<BabelPluginState>>((api, options) => {
   api.assertVersion(7);
 
@@ -302,12 +308,29 @@ export const transformPlugin = declare<Partial<BabelPluginOptions>, PluginObj<Ba
             }
 
             // Runs Babel AST processing or module evaluation for Node once for all arguments of makeStyles() calls once
-            evaluatePaths(
-              programPath,
-              state.file.opts.filename!,
-              state.definitionPaths.map(p => 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 =>