@griffel/transform 2.0.1 → 3.0.0

package/CHANGELOG.md

@@ -1,16 +1,32 @@
 # Change Log - @griffel/transform
 
-This log was last generated on Thu, 12 Mar 2026 17:19:24 GMT and should not be manually modified.
+This log was last generated on Mon, 23 Mar 2026 16:49:14 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## 2.0.1
+## 3.0.0
 
-Thu, 12 Mar 2026 17:19:24 GMT
+Mon, 23 Mar 2026 16:49:14 GMT
+
+### Major changes
+
+- BREAKING: rename modules to importsToTransform, add functionsToTransform option (olfedias@microsoft.com)
+
+### Patches
+
+- fix: reverse styleCalls iteration to match CSS rule ordering of old plugin (olfedias@microsoft.com)
+- fix: add zIndex fallback values in fluentTokensPlugin (olfedias@microsoft.com)
+
+## 2.0.2
+
+Fri, 13 Mar 2026 17:00:44 GMT
 
 ### Patches
 
-- Bump @griffel/transform-shaker to v1.0.1
+- fix: wrap VM errors as host Error with filename context (olfedias@microsoft.com)
+- perf: skip eval cache for __mkPreval entry-point evaluations (olfedias@microsoft.com)
+- fix: wrap VM errors as host Error with filename context, defer CJS export assignments for IIFE patterns (olfedias@microsoft.com)
+- Bump @griffel/transform-shaker to v1.0.2
 
 ## 2.0.0
 

package/evaluation/module.d.mts

@@ -25,7 +25,7 @@ export declare class Module {
         cache: Record<string, Module>;
         resolve: (id: string) => string;
     };
-    evaluate(text: string, only?: string[] | null): void;
+    evaluate(text: string, only?: string[] | null, useEvalCache?: boolean): void;
     static invalidate: () => void;
     static invalidateEvalCache: () => void;
     static _nodeModulePaths: (filename: string) => string[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@griffel/transform",
-  "version": "2.0.1",
+  "version": "3.0.0",
   "description": "A package that performs build time transforms for Griffel",
   "license": "MIT",
   "repository": {
@@ -17,7 +17,7 @@
   },
   "dependencies": {
     "@griffel/core": "^1.20.1",
-    "@griffel/transform-shaker": "^1.0.1",
+    "@griffel/transform-shaker": "^1.0.2",
     "debug": "^4.3.0",
     "magic-string": "^0.30.19",
     "oxc-parser": "^0.116.0",

package/transform.js

@@ -51,6 +51,7 @@ function convertESMtoCJS(code, filename) {
     return code;
   }
   const ms = new MagicString(code);
+  const deferredExports = [];
   for (const node of program.body) {
     switch (node.type) {
       case "ImportDeclaration": {
@@ -105,14 +106,11 @@ function convertESMtoCJS(code, filename) {
             const names = prop(decl, "declarations").flatMap(
               (d) => extractDeclaredNames(prop(d, "id"))
             );
-            const exportsCode = names.map((name) => `exports.${name} = ${name};`).join(" ");
-            ms.appendLeft(node.end, "\n" + exportsCode);
+            deferredExports.push(...names);
           } else if (decl.type === "FunctionDeclaration" || decl.type === "ClassDeclaration") {
             const id = prop(decl, "id");
             if (id) {
-              const name = prop(id, "name");
-              ms.appendLeft(node.end, `
-exports.${name} = ${name};`);
+              deferredExports.push(prop(id, "name"));
             }
           }
         } else if (prop(node, "source")) {
@@ -173,6 +171,9 @@ exports.default = ${prop(id, "name")};`);
       }
     }
   }
+  if (deferredExports.length > 0) {
+    ms.append("\n" + deferredExports.map((name) => `exports.${name} = ${name};`).join("\n"));
+  }
   ms.prepend('Object.defineProperty(exports, "__esModule", { value: true });\n');
   return ms.toString();
 }
@@ -293,6 +294,9 @@ const debug = createDebug("griffel:module");
 let cache = {};
 const NOOP = () => {
 };
+function isError$1(e) {
+  return e != null && typeof e === "object" && "message" in e && "stack" in e;
+}
 const createCustomDebug = (depth) => (namespaces, arg1, ...args) => {
   const modulePrefix = depth === 0 ? "module" : `sub-module-${depth}`;
   debug(`${modulePrefix}:${namespaces}`, arg1, ...args);
@@ -383,7 +387,7 @@ class Module {
       resolve: (id) => this.resolveFilename(id, this).path
     }
   );
-  evaluate(text, only = null) {
+  evaluate(text, only = null, useEvalCache = true) {
     const { filename } = this;
     let action = "ignore";
     for (let i = this.rules.length - 1; i >= 0; i--) {
@@ -394,7 +398,7 @@ class Module {
       }
     }
     const cacheKey = [this.filename, ...only ?? []];
-    if (has(cacheKey, text)) {
+    if (useEvalCache && has(cacheKey, text)) {
       this.exports = get(cacheKey, text);
       return;
     }
@@ -417,25 +421,36 @@ ${code}`);
 })(exports);`, {
       filename: this.filename
     });
-    script.runInContext(
-      vm.createContext({
-        clearImmediate: NOOP,
-        clearInterval: NOOP,
-        clearTimeout: NOOP,
-        setImmediate: NOOP,
-        setInterval: NOOP,
-        setTimeout: NOOP,
-        fetch: NOOP,
-        global,
-        process: mockProcess,
-        module: this,
-        exports: this.exports,
-        require: this.require,
-        __filename: this.filename,
-        __dirname: path.dirname(this.filename)
-      })
-    );
-    set(cacheKey, text, this.exports);
+    try {
+      script.runInContext(
+        vm.createContext({
+          clearImmediate: NOOP,
+          clearInterval: NOOP,
+          clearTimeout: NOOP,
+          setImmediate: NOOP,
+          setInterval: NOOP,
+          setTimeout: NOOP,
+          fetch: NOOP,
+          global,
+          process: mockProcess,
+          module: this,
+          exports: this.exports,
+          require: this.require,
+          __filename: this.filename,
+          __dirname: path.dirname(this.filename)
+        })
+      );
+    } catch (vmError) {
+      const message = isError$1(vmError) ? vmError.message : String(vmError);
+      const hostError = new Error(message);
+      if (isError$1(vmError)) {
+        hostError.stack = vmError.stack;
+      }
+      throw hostError;
+    }
+    if (useEvalCache) {
+      set(cacheKey, text, this.exports);
+    }
   }
   static invalidate = () => {
     cache = {};
@@ -529,7 +544,12 @@ export const __mkPreval = (() => {
 `;
   try {
     const mod = new Module(filename, evaluationRules, resolveFilename);
-    mod.evaluate(codeForEvaluation, ["__mkPreval"]);
+    mod.evaluate(
+      codeForEvaluation,
+      ["__mkPreval"],
+      /* useEvalCache */
+      false
+    );
     const result = mod.exports.__mkPreval;
     if (isError(result)) {
       return { confident: false, error: result };
@@ -579,6 +599,16 @@ function batchEvaluator(sourceCode, filename, styleCalls, evaluationRules, resol
     evaluationResults
   };
 }
+const Z_INDEX_DEFAULTS = {
+  zIndexBackground: 0,
+  zIndexContent: 1,
+  zIndexOverlay: 1e3,
+  zIndexPopup: 2e3,
+  zIndexMessages: 3e3,
+  zIndexFloating: 4e3,
+  zIndexPriority: 5e3,
+  zIndexDebug: 6e3
+};
 function evaluateTemplateLiteralWithTokens(node) {
   let result = "";
   for (let i = 0; i < node.quasis.length; i++) {
@@ -586,7 +616,9 @@ function evaluateTemplateLiteralWithTokens(node) {
     if (i < node.expressions.length) {
       const expression = node.expressions[i];
       if (expression.type === "MemberExpression" && expression.object.type === "Identifier" && expression.object.name === "tokens" && expression.property.type === "Identifier" && !expression.computed) {
-        result += `var(--${expression.property.name})`;
+        const name = expression.property.name;
+        const fallback = Z_INDEX_DEFAULTS[name];
+        result += fallback !== void 0 ? `var(--${name}, ${fallback})` : `var(--${name})`;
       } else {
         return DEOPT;
       }
@@ -596,7 +628,9 @@ function evaluateTemplateLiteralWithTokens(node) {
 }
 function evaluateTokensMemberExpression(node) {
   if (node.object.type === "Identifier" && node.object.name === "tokens" && node.property.type === "Identifier" && !node.computed) {
-    return `var(--${node.property.name})`;
+    const name = node.property.name;
+    const fallback = Z_INDEX_DEFAULTS[name];
+    return fallback !== void 0 ? `var(--${name}, ${fallback})` : `var(--${name})`;
   } else {
     return DEOPT;
   }
@@ -713,10 +747,13 @@ function transformSync(sourceCode, options) {
     resolveModule,
     classNameHashSalt = "",
     generateMetadata = false,
-    modules = ["@griffel/core", "@griffel/react", "@fluentui/react-components"],
+    importsToTransform = ["@griffel/core", "@griffel/react", "@fluentui/react-components"],
+    functionsToTransform = ["makeStyles", "makeResetStyles", "makeStaticStyles"],
     evaluationRules = [{ action: perfIssues ? wrapWithPerfIssues(shakerEvaluator, perfIssues) : shakerEvaluator }],
     astEvaluationPlugins = [fluentTokensPlugin]
   } = options;
+  const importsToTransformSet = new Set(importsToTransform);
+  const functionsToTransformSet = new Set(functionsToTransform);
   if (!filename) {
     throw new Error('Transform error: "filename" option is required');
   }
@@ -732,7 +769,7 @@ function transformSync(sourceCode, options) {
   const magicString = new MagicString(sourceCode);
   const programAst = parseResult.program;
   const hasGriffelImports = parseResult.module.staticImports.some(
-    (si) => modules.includes(si.moduleRequest.value) && si.entries.some((e) => e.importName.kind === "Name" && RUNTIME_IDENTIFIERS.has(e.importName.name))
+    (si) => importsToTransformSet.has(si.moduleRequest.value) && si.entries.some((e) => e.importName.kind === "Name" && functionsToTransformSet.has(e.importName.name))
   );
   if (!hasGriffelImports) {
     return { code: sourceCode, usedProcessing: false, usedVMForEvaluation: false };
@@ -752,7 +789,7 @@ function transformSync(sourceCode, options) {
           return;
         }
         const importSource = declaration.importNode.source.value;
-        if (!modules.includes(importSource)) {
+        if (!importsToTransformSet.has(importSource)) {
           return;
         }
         const imported = declaration.node.imported;
@@ -760,12 +797,14 @@ function transformSync(sourceCode, options) {
           return;
         }
         const importedName = imported.name;
-        if (!RUNTIME_IDENTIFIERS.has(importedName)) {
+        if (!functionsToTransformSet.has(importedName)) {
           return;
         }
         const functionKind = importedName;
         if (node.arguments.length !== 1) {
-          throw new Error(`${functionKind}() function accepts only a single param`);
+          throw new Error(
+            `${functionKind}() function accepts only a single param, got ${node.arguments.length} in ${filename}`
+          );
         }
         matchedSpecifiers.set(declaration.node.start, {
           start: declaration.node.start,
@@ -819,7 +858,7 @@ function transformSync(sourceCode, options) {
     programAst,
     astEvaluationPlugins
   );
-  for (let i = 0; i < styleCalls.length; i++) {
+  for (let i = styleCalls.length - 1; i >= 0; i--) {
     const styleCall = styleCalls[i];
     const evaluationResult = evaluationResults[i];
     switch (styleCall.functionKind) {

package/transformSync.d.mts

@@ -12,7 +12,9 @@ export type TransformOptions = {
      */
     generateMetadata?: boolean;
     /** Defines set of modules and imports handled by a transformPlugin. */
-    modules?: string[];
+    importsToTransform?: string[];
+    /** Defines the set of function names that should be treated as Griffel style calls. */
+    functionsToTransform?: FunctionKinds[];
     /** The set of rules that defines how the matched files will be transformed during the evaluation. */
     evaluationRules?: EvalRule[];
     /** Plugins for extending AST evaluation with custom node handling. */
@@ -30,7 +32,9 @@ export type TransformResult = {
     usedVMForEvaluation: boolean;
     perfIssues?: TransformPerfIssue[];
 };
+type FunctionKinds = 'makeStyles' | 'makeResetStyles' | 'makeStaticStyles';
 /**
  * Transforms passed source code with oxc-parser and oxc-walker instead of Babel.
  */
 export declare function transformSync(sourceCode: string, options: TransformOptions): TransformResult;
+export {};