@griffel/transform 2.0.2 → 3.0.0

package/CHANGELOG.md

@@ -1,12 +1,25 @@
 # Change Log - @griffel/transform
 
-This log was last generated on Fri, 13 Mar 2026 16:59:28 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 -->
 
+## 3.0.0
+
+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 16:59:28 GMT
+Fri, 13 Mar 2026 17:00:44 GMT
 
 ### Patches
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@griffel/transform",
-  "version": "2.0.2",
+  "version": "3.0.0",
   "description": "A package that performs build time transforms for Griffel",
   "license": "MIT",
   "repository": {

package/transform.js

@@ -599,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++) {
@@ -606,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;
       }
@@ -616,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;
   }
@@ -733,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');
   }
@@ -752,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 };
@@ -772,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;
@@ -780,7 +797,7 @@ function transformSync(sourceCode, options) {
           return;
         }
         const importedName = imported.name;
-        if (!RUNTIME_IDENTIFIERS.has(importedName)) {
+        if (!functionsToTransformSet.has(importedName)) {
           return;
         }
         const functionKind = importedName;
@@ -841,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 {};