@griffel/transform 1.1.0 → 1.2.0

package/CHANGELOG.md

@@ -1,12 +1,32 @@
 # Change Log - @griffel/transform
 
-This log was last generated on Mon, 03 Nov 2025 15:42:47 GMT and should not be manually modified.
+This log was last generated on Fri, 06 Mar 2026 08:15:28 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.2.0
+
+Fri, 06 Mar 2026 08:15:28 GMT
+
+### Minor changes
+
+- feat: add AST evaluator plugin system with evaluationPlugins option (olfedias@microsoft.com)
+- feat: wrap imported asset paths in <griffel-asset> tags for reliable CSS extraction (olfedias@microsoft.com)
+- feat: add makeStaticStyles AOT/CSS extraction support (olfedias@microsoft.com)
+- feat: hybrid evaluator that shakes ESM node_modules instead of ignoring them (olfedias@microsoft.com)
+- feat: throw on non-ESM input in transformSync (olfedias@microsoft.com)
+- Bump @griffel/core to v1.20.0
+
+### Patches
+
+- refactor: use ScopeTracker from oxc-walker for scope-aware import resolution (olfedias@microsoft.com)
+- refactor: extract dedupeCSSRules result to a variable in transformSync (olfedias@microsoft.com)
+- refactor: internalize Linaria Module/EvalCache to remove @linaria/babel-preset dependency (olfedias@microsoft.com)
+- perf: replace DeoptError with DEOPT sentinel symbol, optimize CSS rule dedup and lookups (olfedias@microsoft.com)
+
 ## 1.1.0
 
-Mon, 03 Nov 2025 15:42:47 GMT
+Mon, 03 Nov 2025 15:43:56 GMT
 
 ### Minor changes
 

package/README.md

@@ -6,12 +6,15 @@ A high-performance transformation package for Griffel that unifies CSS-in-JS tra
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 
 - [Overview](#overview)
-- [Features](#features)
 - [Install](#install)
 - [Usage](#usage)
   - [Basic Transformation](#basic-transformation)
 - [API Reference](#api-reference)
   - [transformSync(sourceCode, options)](#transformsyncsourcecode-options)
+- [Evaluation Plugins](#evaluation-plugins)
+  - [Built-in Plugins](#built-in-plugins)
+    - [`fluentTokensPlugin`](#fluenttokensplugin)
+  - [Custom Plugins](#custom-plugins)
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
@@ -76,3 +79,60 @@ Transforms source code containing `makeStyles` or `makeResetStyles` calls.
 - `modules?` (string[]): Module sources to process
 - `babelOptions?` (object): Babel configuration for complex evaluations
 - `evaluationRules?` (array): Rules for determining evaluation strategy
+- `astEvaluationPlugins?` (AstEvaluatorPlugin[]): Plugins for extending AST evaluation with custom node handling (default: `[fluentTokensPlugin]`)
+
+## Evaluation Plugins
+
+The AST evaluator supports a plugin system that allows extending static evaluation to handle additional AST node types. Plugins are tried in order when the base evaluator encounters a node type it doesn't handle (i.e., anything beyond `Literal`, `ObjectExpression`, and simple `TemplateLiteral` without expressions).
+
+### Built-in Plugins
+
+#### `fluentTokensPlugin`
+
+Handles Fluent UI design token expressions, transforming `tokens.propertyName` into `var(--propertyName)`. Enabled by default — no configuration needed.
+
+To disable it, pass an empty array:
+
+```typescript
+const result = transformSync(sourceCode, {
+  filename: 'styles.ts',
+  astEvaluationPlugins: [],
+});
+```
+
+This plugin handles:
+
+- `MemberExpression`: `tokens.colorBrandBackground` → `var(--colorBrandBackground)`
+- `TemplateLiteral`: `` `${tokens.spacingVerticalS} 0` `` → `var(--spacingVerticalS) 0`
+
+### Custom Plugins
+
+You can create custom plugins by implementing the `AstEvaluatorPlugin` interface:
+
+```typescript
+import { type AstEvaluatorPlugin, DEOPT } from '@griffel/transform';
+
+const myPlugin: AstEvaluatorPlugin = {
+  name: 'myPlugin',
+  evaluateNode(node, context) {
+    // Handle specific node types
+    if (node.type === 'MemberExpression') {
+      // Custom evaluation logic...
+      return 'some-value';
+    }
+
+    // Return DEOPT to signal "can't handle this node" and let the next plugin try
+    return DEOPT;
+  },
+};
+
+const result = transformSync(sourceCode, {
+  filename: 'styles.ts',
+  astEvaluationPlugins: [myPlugin],
+});
+```
+
+The `context` parameter provides:
+
+- `programAst`: The full program AST for cross-referencing
+- `evaluateNode(node)`: Recursive evaluator callback that goes through base evaluation + all plugins

package/constants.d.mts

@@ -0,0 +1,2 @@
+export declare const ASSET_TAG_OPEN = "<griffel-asset>";
+export declare const ASSET_TAG_CLOSE = "</griffel-asset>";

package/evaluation/astEvaluator.d.mts

@@ -1,5 +1,11 @@
-import { Node } from 'oxc-parser';
-import { EvaluationResult } from './types.mjs';
+import { Node, Program } from 'oxc-parser';
+import { EvaluationResult, AstEvaluatorPlugin } from './types.mjs';
+/**
+ * Sentinel value returned by plugins and evaluateNode to signal "can't handle this node".
+ * Using a symbol avoids the cost of Error construction and stack trace capture.
+ */
+export declare const DEOPT: unique symbol;
+export type Deopt = typeof DEOPT;
 /**
  * Simple static evaluator for object expressions with nested objects.
  * Based on Babel's evaluation approach but simplified for our specific use case.
@@ -8,5 +14,7 @@ import { EvaluationResult } from './types.mjs';
  * - Objects with nested objects: { root: { color: 'red', padding: 0 } }
  * - String literals, numeric literals, boolean literals, null
  * - Simple property access
+ *
+ * Plugins can extend evaluation to handle additional node types.
  */
-export declare function astEvaluator(node: Node): EvaluationResult;
+export declare function astEvaluator(node: Node, programAst: Program, plugins?: AstEvaluatorPlugin[]): EvaluationResult;

package/evaluation/batchEvaluator.d.mts

@@ -1,11 +1,12 @@
-import { StrictOptions } from '@linaria/babel-preset';
+import { Program } from 'oxc-parser';
+import { StrictOptions, AstEvaluatorPlugin } from './types.mjs';
 import { StyleCall } from '../types.mjs';
 /**
  * Batch evaluates all style calls in a file for better performance.
  * Uses static evaluation first, then falls back to VM evaluation for complex expressions.
  * Optimizes VM evaluation by sharing module loading and parsing overhead.
  */
-export declare function batchEvaluator(sourceCode: string, filename: string, styleCalls: StyleCall[], babelOptions: NonNullable<StrictOptions['babelOptions']>, evaluationRules: NonNullable<StrictOptions['rules']>): {
+export declare function batchEvaluator(sourceCode: string, filename: string, styleCalls: StyleCall[], babelOptions: NonNullable<StrictOptions['babelOptions']>, evaluationRules: NonNullable<StrictOptions['rules']>, programAst: Program, astEvaluationPlugins?: AstEvaluatorPlugin[]): {
     usedVMForEvaluation: boolean;
     evaluationResults: unknown[];
 };

package/evaluation/evalCache.d.mts

@@ -0,0 +1,9 @@
+/**
+ * Evaluation cache for module results.
+ * Copied from @linaria/babel-preset v3.0.0-beta.19, adapted to use `debug` package.
+ */
+export declare const clear: () => void;
+export declare const clearForFile: (filename: string) => void;
+export declare const has: ([filename, ...exports]: string[], text: string) => boolean;
+export declare const get: ([filename, ...exports]: string[], text: string) => unknown;
+export declare const set: ([filename, ...exports]: string[], text: string, value: unknown) => void;

package/evaluation/fluentTokensPlugin.d.mts

@@ -0,0 +1,2 @@
+import { AstEvaluatorPlugin } from './types.mjs';
+export declare const fluentTokensPlugin: AstEvaluatorPlugin;

package/evaluation/hybridEvaluator.d.mts

@@ -0,0 +1,2 @@
+import { Evaluator } from './types.mjs';
+export declare function createHybridEvaluator(shakerEvaluator: Evaluator): Evaluator;

package/evaluation/module.d.mts

@@ -0,0 +1,29 @@
+import { StrictOptions } from './types.mjs';
+export declare class Module {
+    readonly id: string;
+    readonly filename: string;
+    readonly paths: readonly string[];
+    options: StrictOptions;
+    imports: Map<string, string[]> | null;
+    dependencies: string[] | null;
+    transform: ((code: string, filename: string) => string) | null;
+    exports: unknown;
+    extensions: string[];
+    private debug;
+    private debuggerDepth;
+    constructor(filename: string, options: StrictOptions, debuggerDepth?: number);
+    resolve: (rawId: string) => string;
+    require: ((id: string) => unknown) & {
+        ensure: () => void;
+        cache: Record<string, Module>;
+        resolve: (id: string) => string;
+    };
+    evaluate(text: string, only?: string[] | null): void;
+    static invalidate: () => void;
+    static invalidateEvalCache: () => void;
+    static _resolveFilename: (id: string, options: {
+        filename: string;
+        paths: readonly string[];
+    }) => string;
+    static _nodeModulePaths: (filename: string) => string[];
+}

package/evaluation/process.d.mts

@@ -0,0 +1,24 @@
+/**
+ * Mocked `process` variable for the VM sandbox used in module evaluation.
+ * Copied from @linaria/babel-preset v3.0.0-beta.19.
+ */
+export declare const nextTick: (fn: (...args: unknown[]) => void) => ReturnType<typeof setTimeout>;
+export declare const platform = "browser";
+export declare const arch = "browser";
+export declare const execPath = "browser";
+export declare const title = "browser";
+export declare const pid = 1;
+export declare const browser = true;
+export declare const argv: string[];
+export declare const binding: () => never;
+export declare const cwd: () => string;
+export declare const exit: () => void;
+export declare const kill: () => void;
+export declare const chdir: () => void;
+export declare const umask: () => void;
+export declare const dlopen: () => void;
+export declare const uptime: () => void;
+export declare const memoryUsage: () => void;
+export declare const uvCounters: () => void;
+export declare const features: {};
+export declare const env: NodeJS.ProcessEnv;

package/evaluation/types.d.mts

@@ -1,5 +1,34 @@
+import { Node, Program } from 'oxc-parser';
+export type Evaluator = (filename: string, options: StrictOptions, text: string, only: string[] | null) => [string, Map<string, string[]> | null];
+export type EvalRule = {
+    test?: RegExp | ((path: string) => boolean);
+    action: Evaluator | 'ignore' | string;
+};
+export type StrictOptions = {
+    displayName: boolean;
+    evaluate: boolean;
+    babelOptions: {
+        plugins?: unknown[];
+        presets?: unknown[];
+        [key: string]: unknown;
+    };
+    rules: EvalRule[];
+};
 export interface EvaluationResult {
     confident: boolean;
     value?: unknown;
     error?: Error;
 }
+export interface AstEvaluatorContext {
+    /** Full program AST */
+    programAst: Program;
+    /** Recursive evaluator callback (goes through base + all plugins) */
+    evaluateNode: (node: Node) => unknown;
+}
+export interface AstEvaluatorPlugin {
+    name: string;
+    /**
+     * Evaluate an AST node. Return DEOPT symbol to signal "can't handle this".
+     */
+    evaluateNode: (node: Node, context: AstEvaluatorContext) => unknown;
+}

package/evaluation/vmEvaluator.d.mts

@@ -1,3 +1,2 @@
-import { StrictOptions } from '@linaria/babel-preset';
-import { EvaluationResult } from './types.mjs';
+import { EvaluationResult, StrictOptions } from './types.mjs';
 export declare function vmEvaluator(sourceCode: string, filename: string, expressionCode: string, babelOptions: NonNullable<StrictOptions['babelOptions']>, evaluationRules: NonNullable<StrictOptions['rules']>): EvaluationResult;

package/index.d.mts

@@ -1,4 +1,9 @@
 export { default as shakerEvaluator } from '@linaria/shaker';
-export { EvalCache, Module } from '@linaria/babel-preset';
-export type { Evaluator, EvalRule } from '@linaria/babel-preset';
+export { Module } from './evaluation/module.mjs';
+export * as EvalCache from './evaluation/evalCache.mjs';
+export { ASSET_TAG_OPEN, ASSET_TAG_CLOSE } from './constants.mjs';
+export type { Evaluator, EvalRule } from './evaluation/types.mjs';
 export { transformSync, type TransformOptions, type TransformResult } from './transformSync.mjs';
+export { DEOPT, type Deopt } from './evaluation/astEvaluator.mjs';
+export type { AstEvaluatorPlugin, AstEvaluatorContext } from './evaluation/types.mjs';
+export { fluentTokensPlugin } from './evaluation/fluentTokensPlugin.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@griffel/transform",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "A package that performs build time transforms for Griffel",
   "license": "MIT",
   "repository": {
@@ -16,11 +16,11 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@griffel/core": "^1.19.2",
-    "@linaria/babel-preset": "^3.0.0-beta.24",
+    "@griffel/core": "^1.20.0",
     "@linaria/shaker": "^3.0.0-beta.22",
+    "debug": "^4.3.0",
     "magic-string": "^0.30.19",
-    "oxc-parser": "^0.90.0",
-    "oxc-walker": "^0.5.2"
+    "oxc-parser": "^0.116.0",
+    "oxc-walker": "^0.7.0"
   }
 }

package/transform.js

@@ -1,86 +1,428 @@
 import _shaker from "@linaria/shaker";
 import { default as default2 } from "@linaria/shaker";
-import { Module } from "@linaria/babel-preset";
-import { EvalCache, Module as Module2 } from "@linaria/babel-preset";
-import { parseSync } from "oxc-parser";
-import { walk } from "oxc-walker";
+import fs from "node:fs";
+import NativeModule from "node:module";
+import path, { dirname, extname } from "node:path";
+import vm from "node:vm";
+import createDebug from "debug";
+import { createHash } from "node:crypto";
+import { rawTransferSupported, parseSync } from "oxc-parser";
+import { ScopeTracker, walk } from "oxc-walker";
 import MagicString from "magic-string";
-import { resolveResetStyleRules, resolveStyleRulesForSlots, normalizeCSSBucketEntry } from "@griffel/core";
-class DeoptError extends Error {
-}
-function evaluateNode(node) {
-  switch (node.type) {
-    case "Literal":
-      return node.value;
-    case "ObjectExpression":
-      return evaluateObjectExpression(node);
-    case "TemplateLiteral":
-      return evaluateTemplateLiteral(node);
-    case "MemberExpression":
-      return evaluateMemberExpression(node);
-    default:
-      throw new DeoptError(`Unsupported node type: ${node.type}`);
+import { resolveStaticStyleRules, resolveResetStyleRules, resolveStyleRulesForSlots, normalizeCSSBucketEntry } from "@griffel/core";
+const ASSET_TAG_OPEN = "<griffel-asset>";
+const ASSET_TAG_CLOSE = "</griffel-asset>";
+const debug$1 = createDebug("griffel:eval-cache");
+const fileHashes = /* @__PURE__ */ new Map();
+const evalCache = /* @__PURE__ */ new Map();
+const fileKeys = /* @__PURE__ */ new Map();
+const hash = (text) => createHash("sha1").update(text).digest("base64");
+let lastText = "";
+let lastHash = hash(lastText);
+const memoizedHash = (text) => {
+  if (lastText !== text) {
+    lastHash = hash(text);
+    lastText = text;
   }
-}
-function evaluateObjectExpression(node) {
-  const obj = {};
-  for (const prop of node.properties) {
-    if (prop.type !== "Property" || prop.kind !== "init") {
-      throw new DeoptError("Only standard properties are supported");
+  return lastHash;
+};
+const toKey = (filename, exports$1) => exports$1.length > 0 ? `${filename}:${exports$1.join(",")}` : filename;
+const clear = () => {
+  fileHashes.clear();
+  evalCache.clear();
+  fileKeys.clear();
+};
+const clearForFile = (filename) => {
+  const keys = fileKeys.get(filename) ?? [];
+  if (keys.length === 0) {
+    return;
+  }
+  debug$1("clear-for-file", filename);
+  keys.forEach((key) => {
+    fileHashes.delete(key);
+    evalCache.delete(key);
+  });
+  fileKeys.set(filename, []);
+};
+const has = ([filename, ...exports$1], text) => {
+  const key = toKey(filename, exports$1);
+  const textHash = memoizedHash(text);
+  debug$1("has", `${key} ${textHash}`);
+  return fileHashes.get(key) === textHash;
+};
+const get = ([filename, ...exports$1], text) => {
+  const key = toKey(filename, exports$1);
+  const textHash = memoizedHash(text);
+  debug$1("get", `${key} ${textHash}`);
+  if (fileHashes.get(key) !== textHash) {
+    return void 0;
+  }
+  return evalCache.get(key);
+};
+const set = ([filename, ...exports$1], text, value) => {
+  const key = toKey(filename, exports$1);
+  const textHash = memoizedHash(text);
+  debug$1("set", `${key} ${textHash}`);
+  fileHashes.set(key, textHash);
+  evalCache.set(key, value);
+  if (!fileKeys.has(filename)) {
+    fileKeys.set(filename, []);
+  }
+  fileKeys.get(filename).push(key);
+};
+const evalCache$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  clear,
+  clearForFile,
+  get,
+  has,
+  set
+}, Symbol.toStringTag, { value: "Module" }));
+const nextTick = (fn) => setTimeout(fn, 0);
+const platform = "browser";
+const arch = "browser";
+const execPath = "browser";
+const title = "browser";
+const pid = 1;
+const browser = true;
+const argv = [];
+const binding = function binding2() {
+  throw new Error("No such module. (Possibly not yet loaded)");
+};
+const cwd = () => "/";
+const noop = () => {
+};
+const exit = noop;
+const kill = noop;
+const chdir = noop;
+const umask = noop;
+const dlopen = noop;
+const uptime = noop;
+const memoryUsage = noop;
+const uvCounters = noop;
+const features = {};
+const env = process.env;
+const mockProcess = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  arch,
+  argv,
+  binding,
+  browser,
+  chdir,
+  cwd,
+  dlopen,
+  env,
+  execPath,
+  exit,
+  features,
+  kill,
+  memoryUsage,
+  nextTick,
+  pid,
+  platform,
+  title,
+  umask,
+  uptime,
+  uvCounters
+}, Symbol.toStringTag, { value: "Module" }));
+const debug = createDebug("griffel:module");
+const builtins = {
+  assert: true,
+  buffer: true,
+  child_process: false,
+  cluster: false,
+  console: true,
+  constants: true,
+  crypto: true,
+  dgram: false,
+  dns: false,
+  domain: true,
+  events: true,
+  fs: false,
+  http: true,
+  https: true,
+  module: false,
+  net: false,
+  os: true,
+  path: true,
+  punycode: true,
+  process: true,
+  querystring: true,
+  readline: false,
+  repl: false,
+  stream: true,
+  string_decoder: true,
+  sys: true,
+  timers: true,
+  tls: false,
+  tty: true,
+  url: true,
+  util: true,
+  vm: true,
+  zlib: true
+};
+let cache = {};
+const NOOP = () => {
+};
+const createCustomDebug = (depth) => (namespaces, arg1, ...args) => {
+  const modulePrefix = depth === 0 ? "module" : `sub-module-${depth}`;
+  debug(`${modulePrefix}:${namespaces}`, arg1, ...args);
+};
+const BABEL_ESM = "/@babel/runtime/helpers/esm/";
+const BABEL_CJS = "/@babel/runtime/helpers/";
+const SWC_HELPERS_RE = /(@swc\/helpers\/)src(\/.+)\.mjs/;
+const cookModuleId = (rawId) => {
+  const babelESMIndex = rawId.indexOf(BABEL_ESM);
+  if (babelESMIndex !== -1) {
+    return rawId.slice(0, babelESMIndex) + BABEL_CJS + rawId.slice(babelESMIndex + BABEL_ESM.length);
+  }
+  const swcHelpersIndex = rawId.indexOf("@swc/helpers/src/");
+  if (swcHelpersIndex === -1) {
+    return rawId.replace(SWC_HELPERS_RE, "$1lib$2.js");
+  }
+  return rawId;
+};
+class Module {
+  id;
+  filename;
+  options;
+  imports = null;
+  dependencies = null;
+  transform = null;
+  exports = {};
+  extensions;
+  debug;
+  debuggerDepth;
+  constructor(filename, options, debuggerDepth = 0) {
+    this.id = filename;
+    this.filename = filename;
+    this.options = options;
+    this.debuggerDepth = debuggerDepth;
+    this.debug = createCustomDebug(debuggerDepth);
+    Object.defineProperties(this, {
+      id: {
+        value: filename,
+        writable: false
+      },
+      filename: {
+        value: filename,
+        writable: false
+      },
+      paths: {
+        value: Object.freeze(
+          NativeModule._nodeModulePaths(
+            path.dirname(filename)
+          )
+        ),
+        writable: false
+      }
+    });
+    this.exports = {};
+    this.extensions = [".json", ".js", ".jsx", ".ts", ".tsx", ".cjs"];
+    this.debug("prepare", filename);
+  }
+  resolve = (rawId) => {
+    const id = cookModuleId(rawId);
+    const extensions = NativeModule._extensions;
+    const added = [];
+    try {
+      this.extensions.forEach((ext) => {
+        if (ext in extensions) {
+          return;
+        }
+        extensions[ext] = NOOP;
+        added.push(ext);
+      });
+      return Module._resolveFilename(id, this);
+    } finally {
+      added.forEach((ext) => delete extensions[ext]);
     }
-    let key;
-    if (prop.computed) {
-      throw new DeoptError("Computed properties are not supported");
-    } else if (prop.key.type === "Identifier") {
-      key = prop.key.name;
-    } else if (prop.key.type === "Literal") {
-      const keyLiteral = prop.key;
-      if (typeof keyLiteral.value === "string" || typeof keyLiteral.value === "number") {
-        key = String(keyLiteral.value);
+  };
+  require = Object.assign(
+    (rawId) => {
+      const id = cookModuleId(rawId);
+      this.debug("require", id);
+      if (id in builtins) {
+        if (builtins[id]) {
+          return require(id);
+        }
+        return null;
+      }
+      const filename = this.resolve(id);
+      if (filename === id && !path.isAbsolute(id)) {
+        throw new Error(`Unable to import "${id}". Importing Node builtins is not supported in the sandbox.`);
+      }
+      this.dependencies?.push(id);
+      let cacheKey = filename;
+      let only = [];
+      if (this.imports?.has(id)) {
+        only = this.imports.get(id).sort();
+        if (only.length === 0) {
+          only = ["default"];
+        }
+        cacheKey += `:${only.join(",")}`;
+      }
+      let m = cache[cacheKey];
+      if (!m) {
+        this.debug("cached:not-exist", id);
+        m = new Module(filename, this.options, this.debuggerDepth + 1);
+        m.transform = this.transform;
+        cache[cacheKey] = m;
+        if (this.extensions.includes(path.extname(filename))) {
+          const code = fs.readFileSync(filename, "utf-8");
+          if (/\.json$/.test(filename)) {
+            m.exports = JSON.parse(code);
+          } else {
+            m.evaluate(code, only.includes("*") ? ["*"] : only);
+          }
+        } else {
+          m.exports = ASSET_TAG_OPEN + filename + ASSET_TAG_CLOSE;
+        }
       } else {
-        throw new DeoptError("Unsupported literal key type");
+        this.debug("cached:exist", id);
+      }
+      return m.exports;
+    },
+    {
+      ensure: NOOP,
+      cache,
+      resolve: this.resolve
+    }
+  );
+  evaluate(text, only = null) {
+    const { filename } = this;
+    let action = "ignore";
+    for (let i = this.options.rules.length - 1; i >= 0; i--) {
+      const { test } = this.options.rules[i];
+      if (!test || (typeof test === "function" ? test(filename) : test instanceof RegExp && test.test(filename))) {
+        action = this.options.rules[i].action;
+        break;
       }
+    }
+    const cacheKey = [this.filename, ...only ?? []];
+    if (has(cacheKey, text)) {
+      this.exports = get(cacheKey, text);
+      return;
+    }
+    let code;
+    if (action === "ignore") {
+      this.debug("ignore", `${filename}`);
+      code = text;
     } else {
-      throw new DeoptError("Unsupported key type");
+      const evaluator = typeof action === "function" ? action : require(require.resolve(action, {
+        paths: [dirname(this.filename)]
+      })).default;
+      let imports;
+      this.debug("prepare-evaluation", this.filename, "using", evaluator.name);
+      [code, imports] = evaluator(this.filename, this.options, text, only);
+      this.imports = imports;
+      this.debug("evaluate", `${this.filename} (only ${(only || []).join(", ")}):
+${code}`);
     }
-    obj[key] = evaluateNode(prop.value);
+    const script = new vm.Script(`(function (exports) { ${code}
+})(exports);`, {
+      filename: this.filename
+    });
+    script.runInContext(
+      vm.createContext({
+        clearImmediate: NOOP,
+        clearInterval: NOOP,
+        clearTimeout: NOOP,
+        setImmediate: NOOP,
+        setInterval: NOOP,
+        setTimeout: 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);
   }
-  return obj;
+  static invalidate = () => {
+    cache = {};
+  };
+  static invalidateEvalCache = () => {
+    clear();
+  };
+  // Alias to resolve the module using node's resolve algorithm
+  // This static property can be overridden by the webpack loader
+  // This allows us to use webpack's module resolution algorithm
+  static _resolveFilename = (id, options) => NativeModule._resolveFilename(
+    id,
+    options
+  );
+  static _nodeModulePaths = (filename) => NativeModule._nodeModulePaths(filename);
 }
-function evaluateTemplateLiteral(node) {
-  let result = "";
-  for (let i = 0; i < node.quasis.length; i++) {
-    result += node.quasis[i].value.cooked;
-    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})`;
-      } else {
-        throw new DeoptError("Only tokens.propertyName expressions are supported in template literals");
+const DEOPT = /* @__PURE__ */ Symbol("deopt");
+function astEvaluator(node, programAst, plugins = []) {
+  const context = {
+    programAst,
+    evaluateNode
+  };
+  function evaluateNode(node2) {
+    switch (node2.type) {
+      case "Literal":
+        return node2.value;
+      case "ObjectExpression":
+        return evaluateObjectExpression(node2);
+      case "TemplateLiteral":
+        if (node2.expressions.length === 0) {
+          return node2.quasis[0].value.cooked;
+        }
+        break;
+    }
+    for (const plugin of plugins) {
+      const result2 = plugin.evaluateNode(node2, context);
+      if (result2 !== DEOPT) {
+        return result2;
       }
     }
+    return DEOPT;
   }
-  return result;
-}
-function evaluateMemberExpression(node) {
-  if (node.object.type === "Identifier" && node.object.name === "tokens" && node.property.type === "Identifier" && !node.computed) {
-    return `var(--${node.property.name})`;
-  } else {
-    throw new DeoptError("Only tokens.propertyName member expressions are supported");
+  function evaluateObjectExpression(node2) {
+    const obj = {};
+    for (const prop of node2.properties) {
+      if (prop.type !== "Property" || prop.kind !== "init") {
+        return DEOPT;
+      }
+      let key;
+      if (prop.computed) {
+        return DEOPT;
+      } else if (prop.key.type === "Identifier") {
+        key = prop.key.name;
+      } else if (prop.key.type === "Literal") {
+        const keyLiteral = prop.key;
+        if (typeof keyLiteral.value === "string" || typeof keyLiteral.value === "number") {
+          key = String(keyLiteral.value);
+        } else {
+          return DEOPT;
+        }
+      } else {
+        return DEOPT;
+      }
+      const value = evaluateNode(prop.value);
+      if (value === DEOPT) {
+        return DEOPT;
+      }
+      obj[key] = value;
+    }
+    return obj;
   }
-}
-function astEvaluator(node) {
-  try {
-    return {
-      confident: true,
-      value: evaluateNode(node)
-    };
-  } catch {
+  const result = evaluateNode(node);
+  if (result === DEOPT) {
     return {
       confident: false,
       value: void 0
     };
   }
+  return {
+    confident: true,
+    value: result
+  };
 }
 function isError(e) {
   return Object.prototype.toString.call(e) === "[object Error]";
@@ -123,13 +465,13 @@ if (typeof module !== 'undefined' && module.exports) {
     return { confident: false, error: err };
   }
 }
-function batchEvaluator(sourceCode, filename, styleCalls, babelOptions, evaluationRules) {
+function batchEvaluator(sourceCode, filename, styleCalls, babelOptions, evaluationRules, programAst, astEvaluationPlugins = []) {
   const evaluationResults = new Array(styleCalls.length);
   const argumentsCode = new Array(styleCalls.length).fill(null);
   let vmEvaluationNeeded = false;
   for (let i = 0; i < styleCalls.length; i++) {
     const styleCall = styleCalls[i];
-    const staticResult = astEvaluator(styleCall.argumentNode);
+    const staticResult = astEvaluator(styleCall.argumentNode, programAst, astEvaluationPlugins);
     if (staticResult.confident) {
       evaluationResults[i] = staticResult.value;
       continue;
@@ -163,22 +505,91 @@ function batchEvaluator(sourceCode, filename, styleCalls, babelOptions, evaluati
     evaluationResults
   };
 }
+const CJS_EXTENSIONS = /* @__PURE__ */ new Set([".cjs", ".cts", ".json"]);
+const ESM_EXTENSIONS = /* @__PURE__ */ new Set([".mjs", ".mts"]);
+const useRawTransfer = rawTransferSupported();
+const NODE_MODULES_RE = /[/\\]node_modules[/\\]/;
+function createHybridEvaluator(shakerEvaluator2) {
+  return (filename, options, text, only) => {
+    if (!NODE_MODULES_RE.test(filename)) {
+      return shakerEvaluator2(filename, options, text, only);
+    }
+    const ext = extname(filename);
+    if (CJS_EXTENSIONS.has(ext)) {
+      return [text, null];
+    }
+    if (ESM_EXTENSIONS.has(ext)) {
+      return shakerEvaluator2(filename, options, text, only);
+    }
+    const parseResult = parseSync(filename, text, {
+      sourceType: "unambiguous",
+      ...useRawTransfer && { experimentalLazy: true }
+    });
+    const isESM = parseResult.module.hasModuleSyntax;
+    parseResult.dispose?.();
+    if (!isESM) {
+      return [text, null];
+    }
+    return shakerEvaluator2(filename, options, text, only);
+  };
+}
+function evaluateTemplateLiteralWithTokens(node) {
+  let result = "";
+  for (let i = 0; i < node.quasis.length; i++) {
+    result += node.quasis[i].value.cooked;
+    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})`;
+      } else {
+        return DEOPT;
+      }
+    }
+  }
+  return result;
+}
+function evaluateTokensMemberExpression(node) {
+  if (node.object.type === "Identifier" && node.object.name === "tokens" && node.property.type === "Identifier" && !node.computed) {
+    return `var(--${node.property.name})`;
+  } else {
+    return DEOPT;
+  }
+}
+const fluentTokensPlugin = {
+  name: "fluentTokensPlugin",
+  evaluateNode(node) {
+    switch (node.type) {
+      case "TemplateLiteral":
+        return evaluateTemplateLiteralWithTokens(node);
+      case "MemberExpression":
+        return evaluateTokensMemberExpression(node);
+      default:
+        return DEOPT;
+    }
+  }
+};
 function dedupeCSSRules(cssRulesByBucket) {
   return Object.fromEntries(
     Object.entries(cssRulesByBucket).map(([styleBucketName, cssBucketEntries]) => {
       if (styleBucketName === "m") {
-        return [
-          styleBucketName,
-          cssBucketEntries.filter(
-            (entryA, index, entries) => entries.findIndex((entryB) => entryA[0] === entryB[0]) === index
-          )
-        ];
+        const seen = /* @__PURE__ */ new Map();
+        for (const entry of cssBucketEntries) {
+          if (!seen.has(entry[0])) {
+            seen.set(entry[0], entry);
+          }
+        }
+        return [styleBucketName, Array.from(seen.values())];
       }
-      return [styleBucketName, [...new Set(cssBucketEntries)]];
+      return [styleBucketName, Array.from(new Set(cssBucketEntries))];
     })
   );
 }
 const shakerEvaluator = _shaker.default || _shaker;
+const RUNTIME_IDENTIFIERS = /* @__PURE__ */ new Map([
+  ["makeStyles", "__css"],
+  ["makeResetStyles", "__resetCSS"],
+  ["makeStaticStyles", "__staticCSS"]
+]);
 function buildCSSResetEntriesMetadata(cssResetEntries, cssRules, declaratorId) {
   const cssRulesByBucket = Array.isArray(cssRules) ? { d: cssRules } : cssRules;
   cssResetEntries[declaratorId] ??= [];
@@ -227,11 +638,15 @@ function buildCSSEntriesMetadata(cssEntries, classnamesMapping, cssRulesByBucket
   );
 }
 function concatCSSRulesByBucket(bucketA = {}, bucketB) {
-  Object.entries(bucketB).forEach(([cssBucketName, cssBucketEntries]) => {
-    bucketA[cssBucketName] = cssBucketEntries.concat(
-      bucketA[cssBucketName] || []
-    );
-  });
+  for (const cssBucketName in bucketB) {
+    const bucketName = cssBucketName;
+    const bucketBEntries = bucketB[bucketName] ?? [];
+    if (bucketA[bucketName]) {
+      bucketA[bucketName].push(...bucketBEntries);
+    } else {
+      bucketA[bucketName] = bucketBEntries;
+    }
+  }
   return bucketA;
 }
 function transformSync(sourceCode, options) {
@@ -241,109 +656,96 @@ function transformSync(sourceCode, options) {
     classNameHashSalt = "",
     generateMetadata = false,
     modules = ["@griffel/core", "@griffel/react", "@fluentui/react-components"],
-    evaluationRules = [
-      { action: shakerEvaluator },
-      {
-        test: /[/\\]node_modules[/\\]/,
-        action: "ignore"
-      }
-    ]
+    evaluationRules = [{ action: createHybridEvaluator(shakerEvaluator) }],
+    astEvaluationPlugins = [fluentTokensPlugin]
   } = options;
   if (!filename) {
     throw new Error('Transform error: "filename" option is required');
   }
   const parseResult = parseSync(filename, sourceCode);
-  parseResult.module.staticImports;
   if (parseResult.errors.length > 0) {
     throw new Error(`Failed to parse "${filename}": ${parseResult.errors.map((e) => e.message).join(", ")}`);
   }
+  if (parseResult.program.body.length > 0 && !parseResult.module.hasModuleSyntax) {
+    throw new Error(
+      `Transform error: "${filename}" is not an ES module. @griffel/transform only supports ES modules (files using import/export syntax).`
+    );
+  }
   const magicString = new MagicString(sourceCode);
   const programAst = parseResult.program;
-  const imports = [];
+  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))
+  );
+  if (!hasGriffelImports) {
+    return { code: sourceCode, usedProcessing: false, usedVMForEvaluation: false };
+  }
   const styleCalls = [];
   const cssEntries = {};
   const cssResetEntries = {};
   let cssRulesByBucket = {};
+  const scopeTracker = new ScopeTracker();
+  const matchedSpecifiers = /* @__PURE__ */ new Map();
   walk(programAst, {
+    scopeTracker,
     enter(node, parent) {
-      if (node.type === "ImportDeclaration") {
-        const moduleSource = node.source.value;
-        if (modules.includes(moduleSource)) {
-          const specifiers = node.specifiers.reduce((acc, spec) => {
-            if (spec.type === "ImportSpecifier") {
-              const importedName = spec.imported;
-              if (importedName.type === "Identifier" && (importedName.name === "makeStyles" || importedName.name === "makeResetStyles")) {
-                acc.push({
-                  imported: importedName.name,
-                  local: spec.local.name,
-                  start: spec.start,
-                  end: spec.end
-                });
-              }
-            }
-            return acc;
-          }, []);
-          if (specifiers.length > 0) {
-            imports.push({
-              source: moduleSource,
-              specifiers,
-              start: node.start,
-              end: node.end
-            });
-          }
+      if (node.type === "CallExpression" && node.callee.type === "Identifier") {
+        const declaration = scopeTracker.getDeclaration(node.callee.name);
+        if (declaration?.type !== "Import" || declaration.node.type !== "ImportSpecifier") {
+          return;
         }
-      }
-      if (node.type === "CallExpression") {
-        let functionKind = null;
-        let importId;
-        if (node.callee.type === "Identifier") {
-          const calleeName = node.callee.name;
-          for (const importInfo of imports) {
-            const specifier = importInfo.specifiers.find((s) => s.local === calleeName);
-            if (specifier) {
-              if (node.arguments.length !== 1) {
-                throw new Error(`${functionKind}() function accepts only a single param`);
-              }
-              functionKind = specifier.imported;
-              importId = specifier.local;
-              break;
-            }
-          }
+        const importSource = declaration.importNode.source.value;
+        if (!modules.includes(importSource)) {
+          return;
         }
-        if (functionKind && importId) {
-          let declaratorId = "unknownHook";
-          let current = parent;
-          while (current) {
-            if (!current) {
-              break;
-            }
-            if (current.type === "VariableDeclarator" && current.id.type === "Identifier") {
-              declaratorId = current.id.name;
-              break;
-            }
-            if ("parent" in current) {
-              current = current.parent;
-              continue;
-            }
+        const imported = declaration.node.imported;
+        if (imported.type !== "Identifier") {
+          return;
+        }
+        const importedName = imported.name;
+        if (!RUNTIME_IDENTIFIERS.has(importedName)) {
+          return;
+        }
+        const functionKind = importedName;
+        if (node.arguments.length !== 1) {
+          throw new Error(`${functionKind}() function accepts only a single param`);
+        }
+        matchedSpecifiers.set(declaration.node.start, {
+          start: declaration.node.start,
+          end: declaration.node.end,
+          functionKind
+        });
+        let declaratorId = "unknownHook";
+        let current = parent;
+        while (current) {
+          if (!current) {
+            break;
+          }
+          if (current.type === "VariableDeclarator" && current.id.type === "Identifier") {
+            declaratorId = current.id.name;
             break;
           }
-          const argument = node.arguments[0];
-          styleCalls.push({
-            declaratorId,
-            functionKind,
-            argumentStart: argument.start,
-            argumentEnd: argument.end,
-            argumentCode: sourceCode.slice(argument.start, argument.end),
-            argumentNode: argument,
-            callStart: node.start,
-            callEnd: node.end,
-            importId
-          });
+          if ("parent" in current) {
+            current = current.parent;
+            continue;
+          }
+          break;
         }
+        const argument = node.arguments[0];
+        styleCalls.push({
+          declaratorId,
+          functionKind,
+          argumentStart: argument.start,
+          argumentEnd: argument.end,
+          argumentCode: sourceCode.slice(argument.start, argument.end),
+          argumentNode: argument,
+          callStart: node.start,
+          callEnd: node.end,
+          importId: node.callee.name
+        });
       }
     }
   });
-  if (imports.length === 0 || styleCalls.length === 0) {
+  if (styleCalls.length === 0) {
     return {
       code: sourceCode,
       usedProcessing: false,
@@ -355,7 +757,9 @@ function transformSync(sourceCode, options) {
     filename,
     styleCalls,
     babelOptions,
-    evaluationRules
+    evaluationRules,
+    programAst,
+    astEvaluationPlugins
   );
   for (let i = 0; i < styleCalls.length; i++) {
     const styleCall = styleCalls[i];
@@ -364,17 +768,13 @@ function transformSync(sourceCode, options) {
       case "makeStyles":
         {
           const stylesBySlots = evaluationResult;
-          const [classnamesMapping, cssRulesByBucketA] = resolveStyleRulesForSlots(stylesBySlots, classNameHashSalt);
+          const [classnamesMapping, resolvedCSSRules] = resolveStyleRulesForSlots(stylesBySlots, classNameHashSalt);
+          const uniqueCSSRules = dedupeCSSRules(cssRulesByBucket);
           if (generateMetadata) {
-            buildCSSEntriesMetadata(
-              cssEntries,
-              classnamesMapping,
-              dedupeCSSRules(cssRulesByBucket),
-              styleCall.declaratorId
-            );
+            buildCSSEntriesMetadata(cssEntries, classnamesMapping, uniqueCSSRules, styleCall.declaratorId);
           }
           magicString.overwrite(styleCall.argumentStart, styleCall.argumentEnd, `${JSON.stringify(classnamesMapping)}`);
-          cssRulesByBucket = concatCSSRulesByBucket(cssRulesByBucket, cssRulesByBucketA);
+          cssRulesByBucket = concatCSSRulesByBucket(cssRulesByBucket, resolvedCSSRules);
         }
         break;
       case "makeResetStyles":
@@ -395,22 +795,25 @@ function transformSync(sourceCode, options) {
           );
         }
         break;
+      case "makeStaticStyles":
+        {
+          const styles = evaluationResult;
+          const stylesSet = Array.isArray(styles) ? styles : [styles];
+          const cssRules = resolveStaticStyleRules(stylesSet);
+          magicString.overwrite(styleCall.argumentStart, styleCall.argumentEnd, JSON.stringify({ d: cssRules }));
+          cssRulesByBucket = concatCSSRulesByBucket(cssRulesByBucket, { d: cssRules });
+        }
+        break;
     }
   }
-  for (const importInfo of imports) {
-    for (const specifier of importInfo.specifiers) {
-      if (specifier.imported === "makeStyles") {
-        magicString.overwrite(specifier.start, specifier.end, "__css");
-      } else if (specifier.imported === "makeResetStyles") {
-        magicString.overwrite(specifier.start, specifier.end, "__resetCSS");
-      }
-    }
+  for (const specifier of matchedSpecifiers.values()) {
+    magicString.overwrite(specifier.start, specifier.end, RUNTIME_IDENTIFIERS.get(specifier.functionKind));
   }
   for (const styleCall of styleCalls) {
     magicString.overwrite(
       styleCall.callStart,
       styleCall.callStart + styleCall.importId.length,
-      "__" + (styleCall.functionKind === "makeStyles" ? "css" : "resetCSS")
+      RUNTIME_IDENTIFIERS.get(styleCall.functionKind)
     );
   }
   return {
@@ -421,8 +824,12 @@ function transformSync(sourceCode, options) {
   };
 }
 export {
-  EvalCache,
-  Module2 as Module,
+  ASSET_TAG_CLOSE,
+  ASSET_TAG_OPEN,
+  DEOPT,
+  evalCache$1 as EvalCache,
+  Module,
+  fluentTokensPlugin,
   default2 as shakerEvaluator,
   transformSync
 };

package/transformSync.d.mts

@@ -1,4 +1,4 @@
-import { StrictOptions } from '@linaria/babel-preset';
+import { StrictOptions, AstEvaluatorPlugin } from './evaluation/types.mjs';
 import { CSSRulesByBucket } from '@griffel/core';
 export type TransformOptions = {
     filename: string;
@@ -17,6 +17,8 @@ export type TransformOptions = {
     babelOptions?: Pick<StrictOptions['babelOptions'], 'plugins' | 'presets'>;
     /** The set of rules that defines how the matched files will be transformed during the evaluation. */
     evaluationRules?: StrictOptions['rules'];
+    /** Plugins for extending AST evaluation with custom node handling. */
+    astEvaluationPlugins?: AstEvaluatorPlugin[];
 };
 export type TransformResult = {
     code: string;

package/types.d.mts

@@ -1,7 +1,7 @@
 import { Node } from 'oxc-parser';
 export interface StyleCall {
     declaratorId: string;
-    functionKind: 'makeStyles' | 'makeResetStyles';
+    functionKind: 'makeStyles' | 'makeResetStyles' | 'makeStaticStyles';
     argumentStart: number;
     argumentEnd: number;
     argumentCode: string;