@griffel/transform 3.0.4 → 3.0.5

package/src/evaluation/astEvaluator.test.mts

@@ -0,0 +1,126 @@
+import { parseSync, type ObjectExpression, type Program } from 'oxc-parser';
+import { walk } from 'oxc-walker';
+import { describe, it, expect } from 'vitest';
+
+import { astEvaluator } from './astEvaluator.mjs';
+import { fluentTokensPlugin } from './fluentTokensPlugin.mjs';
+
+function getFirstObjectExpression(code: string): { node: ObjectExpression; program: Program } {
+  const result = parseSync('test.js', code);
+
+  if (result.errors.length > 0) {
+    throw new Error(`Parsing errors: ${result.errors.map(e => e.message).join(', ')}`);
+  }
+
+  let objectExpression: ObjectExpression | null = null;
+
+  walk(result.program, {
+    enter(node) {
+      if (node.type === 'ObjectExpression' && !objectExpression) {
+        objectExpression = node;
+      }
+    },
+  });
+
+  if (!objectExpression) {
+    throw new Error('No "ObjectExpression" found in the code');
+  }
+
+  return { node: objectExpression, program: result.program };
+}
+
+describe('staticEvaluator', () => {
+  it('evaluates simple object expressions', () => {
+    const code = 'const obj = { color: "red", size: 14 };';
+
+    const { node, program } = getFirstObjectExpression(code);
+    const evaluation = astEvaluator(node, program);
+
+    expect(evaluation.confident).toBe(true);
+    expect(evaluation.value).toEqual({ color: 'red', size: 14 });
+  });
+
+  it('evaluates nested object expressions', () => {
+    const code = 'const obj = { root: { color: "blue", padding: 0 }, secondary: { bg: "white" } };';
+
+    const { node, program } = getFirstObjectExpression(code);
+    const evaluation = astEvaluator(node, program);
+
+    expect(evaluation.confident).toBe(true);
+    expect(evaluation.value).toEqual({
+      root: { color: 'blue', padding: 0 },
+      secondary: { bg: 'white' },
+    });
+  });
+
+  it('handles mixed literal types', () => {
+    const code = 'const obj = { str: "hello", num: 42, bool: true, nil: null };';
+
+    const { node, program } = getFirstObjectExpression(code);
+    const evaluation = astEvaluator(node, program);
+
+    expect(evaluation.confident).toBe(true);
+    expect(evaluation.value).toEqual({
+      str: 'hello',
+      num: 42,
+      bool: true,
+      nil: null,
+    });
+  });
+
+  it('returns confident: false for unsupported expressions', () => {
+    const code = 'const obj = { computed: variable };';
+
+    const { node, program } = getFirstObjectExpression(code);
+    const evaluation = astEvaluator(node, program);
+
+    expect(evaluation.confident).toBe(false);
+    expect(evaluation.value).toBeUndefined();
+  });
+
+  it('returns confident: false for TemplateLiteral without plugins', () => {
+    const code = 'const obj = { margin: `${tokens.spacingVerticalS} 0` };';
+
+    const { node, program } = getFirstObjectExpression(code);
+    const evaluation = astEvaluator(node, program);
+
+    expect(evaluation.confident).toBe(false);
+    expect(evaluation.value).toBeUndefined();
+  });
+
+  it('returns confident: false for MemberExpression without plugins', () => {
+    const code = 'const obj = { color: tokens.colorNeutralForeground1Selected };';
+
+    const { node, program } = getFirstObjectExpression(code);
+    const evaluation = astEvaluator(node, program);
+
+    expect(evaluation.confident).toBe(false);
+    expect(evaluation.value).toBeUndefined();
+  });
+
+  describe('@fluentui/react-components integration', () => {
+    it('evaluates style object with tokens when fluentTokensPlugin is provided', () => {
+      const code = `
+export const useButtonStyles = makeStyles({
+    staticWrapper: {
+        margin: \`\${tokens.spacingVerticalS} 0\`,
+        display: 'inline-block',
+        color: tokens.colorNeutralForeground1Selected,
+    }
+});
+`;
+
+      const { node, program } = getFirstObjectExpression(code);
+      const evaluation = astEvaluator(node, program, [fluentTokensPlugin]);
+
+      expect(evaluation.confident).toBe(true);
+      expect(evaluation.value).toEqual({
+        staticWrapper: {
+          margin: 'var(--spacingVerticalS) 0',
+          display: 'inline-block',
+          color: 'var(--colorNeutralForeground1Selected)',
+        },
+      });
+    });
+  });
+});

package/src/evaluation/batchEvaluator.mts

@@ -0,0 +1,79 @@
+import type { Program } from 'oxc-parser';
+
+import type { StyleCall } from '../types.mjs';
+import type { TransformResolver } from './module.mjs';
+import type { AstEvaluatorPlugin, EvalRule } from './types.mjs';
+import { astEvaluator } from './astEvaluator.mjs';
+import { vmEvaluator } from './vmEvaluator.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 function batchEvaluator(
+  sourceCode: string,
+  filename: string,
+  styleCalls: StyleCall[],
+  evaluationRules: EvalRule[],
+  resolveFilename: TransformResolver,
+  programAst: Program,
+  astEvaluationPlugins: AstEvaluatorPlugin[] = [],
+): {
+  usedVMForEvaluation: boolean;
+  evaluationResults: unknown[];
+} {
+  const evaluationResults: unknown[] = new Array(styleCalls.length);
+
+  // Track which indices need VM evaluation and build the expression code string
+  const vmIndices: number[] = [];
+  let expressionCode = '';
+
+  // First pass: try static evaluation for all calls
+  for (let i = 0; i < styleCalls.length; i++) {
+    const styleCall = styleCalls[i];
+    const staticResult = astEvaluator(styleCall.argumentNode, programAst, astEvaluationPlugins);
+
+    if (staticResult.confident) {
+      evaluationResults[i] = staticResult.value;
+      continue;
+    }
+
+    // Mark for VM evaluation
+    if (expressionCode.length > 0) {
+      expressionCode += ',';
+    }
+    expressionCode += styleCall.argumentCode;
+    vmIndices.push(i);
+  }
+
+  if (vmIndices.length === 0) {
+    return {
+      usedVMForEvaluation: false,
+      evaluationResults,
+    };
+  }
+
+  // Second pass: batch VM evaluation for complex expressions
+  const vmResult = vmEvaluator(sourceCode, filename, expressionCode, evaluationRules, resolveFilename);
+
+  if (!vmResult.confident) {
+    if (vmResult.error) {
+      throw vmResult.error;
+    } else {
+      throw new Error('Evaluation of a code fragment failed, this is a bug, please report it');
+    }
+  }
+
+  // Map VM results back to correct indices
+  const vmValues = vmResult.value as unknown[];
+
+  for (let i = 0; i < vmIndices.length; i++) {
+    evaluationResults[vmIndices[i]] = vmValues[i];
+  }
+
+  return {
+    usedVMForEvaluation: true,
+    evaluationResults,
+  };
+}

package/src/evaluation/evalCache.mts

@@ -0,0 +1,84 @@
+/**
+ * Evaluation cache for module results.
+ * Copied from @linaria/babel-preset v3.0.0-beta.19, adapted to use `debug` package.
+ */
+
+import { createHash } from 'node:crypto';
+import createDebug from 'debug';
+
+const debug = createDebug('griffel:eval-cache');
+
+const fileHashes = new Map<string, string>();
+const evalCache = new Map<string, unknown>();
+const fileKeys = new Map<string, string[]>();
+
+const hash = (text: string): string => createHash('sha1').update(text).digest('base64');
+
+let lastText = '';
+let lastHash = hash(lastText);
+
+const memoizedHash = (text: string): string => {
+  if (lastText !== text) {
+    lastHash = hash(text);
+    lastText = text;
+  }
+
+  return lastHash;
+};
+
+const toKey = (filename: string, exports: string[]): string =>
+  exports.length > 0 ? `${filename}:${exports.join(',')}` : filename;
+
+export const clear = (): void => {
+  fileHashes.clear();
+  evalCache.clear();
+  fileKeys.clear();
+};
+
+export const clearForFile = (filename: string): void => {
+  const keys = fileKeys.get(filename) ?? [];
+
+  if (keys.length === 0) {
+    return;
+  }
+
+  debug('clear-for-file', filename);
+  keys.forEach(key => {
+    fileHashes.delete(key);
+    evalCache.delete(key);
+  });
+  fileKeys.set(filename, []);
+};
+
+export const has = ([filename, ...exports]: string[], text: string): boolean => {
+  const key = toKey(filename, exports);
+  const textHash = memoizedHash(text);
+  debug('has', `${key} ${textHash}`);
+  return fileHashes.get(key) === textHash;
+};
+
+export const get = ([filename, ...exports]: string[], text: string): unknown => {
+  const key = toKey(filename, exports);
+  const textHash = memoizedHash(text);
+  debug('get', `${key} ${textHash}`);
+
+  if (fileHashes.get(key) !== textHash) {
+    return undefined;
+  }
+
+  return evalCache.get(key);
+};
+
+export const set = ([filename, ...exports]: string[], text: string, value: unknown): void => {
+  const key = toKey(filename, exports);
+  const textHash = memoizedHash(text);
+  debug('set', `${key} ${textHash}`);
+  fileHashes.set(key, textHash);
+  evalCache.set(key, value);
+
+  if (!fileKeys.has(filename)) {
+    fileKeys.set(filename, []);
+  }
+
+  fileKeys.get(filename)!.push(key);
+};

package/src/evaluation/fluentTokensPlugin.mts

@@ -0,0 +1,82 @@
+import type { MemberExpression, TemplateLiteral } from 'oxc-parser';
+
+import { DEOPT, type Deopt } from './astEvaluator.mjs';
+import type { AstEvaluatorPlugin } from './types.mjs';
+
+// zIndex tokens are not part of the theme and include default fallback values.
+// See: https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/zIndexes.ts
+const Z_INDEX_DEFAULTS: Record<string, number> = {
+  zIndexBackground: 0,
+  zIndexContent: 1,
+  zIndexOverlay: 1000,
+  zIndexPopup: 2000,
+  zIndexMessages: 3000,
+  zIndexFloating: 4000,
+  zIndexPriority: 5000,
+  zIndexDebug: 6000,
+};
+
+/**
+ * Evaluates template literals that contain Fluent UI design tokens.
+ * Transforms `${tokens.propertyName}` expressions into CSS custom properties: `var(--propertyName)`
+ */
+function evaluateTemplateLiteralWithTokens(node: TemplateLiteral): string | Deopt {
+  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
+      ) {
+        const name = expression.property.name;
+        const fallback = Z_INDEX_DEFAULTS[name];
+        result += fallback !== undefined ? `var(--${name}, ${fallback})` : `var(--${name})`;
+      } else {
+        return DEOPT;
+      }
+    }
+  }
+
+  return result;
+}
+
+/**
+ * Evaluates member expressions that reference Fluent UI design tokens.
+ * Transforms `tokens.propertyName` expressions into CSS custom properties: `var(--propertyName)`
+ */
+function evaluateTokensMemberExpression(node: MemberExpression): string | Deopt {
+  if (
+    node.object.type === 'Identifier' &&
+    node.object.name === 'tokens' &&
+    node.property.type === 'Identifier' &&
+    !node.computed
+  ) {
+    const name = node.property.name;
+    const fallback = Z_INDEX_DEFAULTS[name];
+    return fallback !== undefined ? `var(--${name}, ${fallback})` : `var(--${name})`;
+  } else {
+    return DEOPT;
+  }
+}
+
+export const fluentTokensPlugin: AstEvaluatorPlugin = {
+  name: 'fluentTokensPlugin',
+  evaluateNode(node) {
+    switch (node.type) {
+      case 'TemplateLiteral':
+        return evaluateTemplateLiteralWithTokens(node);
+      case 'MemberExpression':
+        return evaluateTokensMemberExpression(node);
+      default:
+        return DEOPT;
+    }
+  },
+};

package/src/evaluation/fluentTokensPlugin.test.mts

@@ -0,0 +1,130 @@
+import { parseSync, type Node, type Program } from 'oxc-parser';
+import { walk } from 'oxc-walker';
+import { describe, it, expect } from 'vitest';
+
+import { DEOPT } from './astEvaluator.mjs';
+import { fluentTokensPlugin } from './fluentTokensPlugin.mjs';
+import type { AstEvaluatorContext } from './types.mjs';
+
+function getFirstNodeOfType(code: string, type: string): { node: Node; program: Program } {
+  const result = parseSync('test.js', code);
+
+  if (result.errors.length > 0) {
+    throw new Error(`Parsing errors: ${result.errors.map(e => e.message).join(', ')}`);
+  }
+
+  let found: Node | null = null;
+
+  walk(result.program, {
+    enter(node) {
+      if (node.type === type && !found) {
+        found = node;
+      }
+    },
+  });
+
+  if (!found) {
+    throw new Error(`No "${type}" found in the code`);
+  }
+
+  return { node: found, program: result.program };
+}
+
+function makeContext(program: Program): AstEvaluatorContext {
+  return {
+    programAst: program,
+    evaluateNode: () => DEOPT,
+  };
+}
+
+describe('fluentTokensPlugin', () => {
+  describe('MemberExpression', () => {
+    it('evaluates tokens.propertyName to var(--propertyName)', () => {
+      const code = 'const x = tokens.colorBrandBackground;';
+      const { node, program } = getFirstNodeOfType(code, 'MemberExpression');
+
+      const result = fluentTokensPlugin.evaluateNode(node, makeContext(program));
+      expect(result).toBe('var(--colorBrandBackground)');
+    });
+
+    it('returns DEOPT for non-tokens member expression', () => {
+      const code = 'const x = foo.bar;';
+      const { node, program } = getFirstNodeOfType(code, 'MemberExpression');
+
+      expect(fluentTokensPlugin.evaluateNode(node, makeContext(program))).toBe(DEOPT);
+    });
+
+    it('returns DEOPT for computed member expression on tokens', () => {
+      const code = 'const x = tokens["colorBrandBackground"];';
+      const { node, program } = getFirstNodeOfType(code, 'MemberExpression');
+
+      expect(fluentTokensPlugin.evaluateNode(node, makeContext(program))).toBe(DEOPT);
+    });
+
+    it('evaluates zIndex tokens with fallback values', () => {
+      const code = 'const x = tokens.zIndexPopup;';
+      const { node, program } = getFirstNodeOfType(code, 'MemberExpression');
+
+      expect(fluentTokensPlugin.evaluateNode(node, makeContext(program))).toBe('var(--zIndexPopup, 2000)');
+    });
+
+    it('evaluates all zIndex tokens with correct fallbacks', () => {
+      const cases: [string, string][] = [
+        ['tokens.zIndexBackground', 'var(--zIndexBackground, 0)'],
+        ['tokens.zIndexContent', 'var(--zIndexContent, 1)'],
+        ['tokens.zIndexOverlay', 'var(--zIndexOverlay, 1000)'],
+        ['tokens.zIndexPopup', 'var(--zIndexPopup, 2000)'],
+        ['tokens.zIndexMessages', 'var(--zIndexMessages, 3000)'],
+        ['tokens.zIndexFloating', 'var(--zIndexFloating, 4000)'],
+        ['tokens.zIndexPriority', 'var(--zIndexPriority, 5000)'],
+        ['tokens.zIndexDebug', 'var(--zIndexDebug, 6000)'],
+      ];
+
+      for (const [expr, expected] of cases) {
+        const { node, program } = getFirstNodeOfType(`const x = ${expr};`, 'MemberExpression');
+        expect(fluentTokensPlugin.evaluateNode(node, makeContext(program))).toBe(expected);
+      }
+    });
+  });
+
+  describe('TemplateLiteral', () => {
+    it('evaluates template literal with tokens expression', () => {
+      const code = 'const x = `${tokens.spacingVerticalS} 0`;';
+      const { node, program } = getFirstNodeOfType(code, 'TemplateLiteral');
+
+      const result = fluentTokensPlugin.evaluateNode(node, makeContext(program));
+      expect(result).toBe('var(--spacingVerticalS) 0');
+    });
+
+    it('evaluates simple template literal without expressions', () => {
+      const code = 'const x = `hello world`;';
+      const { node, program } = getFirstNodeOfType(code, 'TemplateLiteral');
+
+      const result = fluentTokensPlugin.evaluateNode(node, makeContext(program));
+      expect(result).toBe('hello world');
+    });
+
+    it('returns DEOPT for non-tokens expression in template literal', () => {
+      const code = 'const x = `${foo.bar} 0`;';
+      const { node, program } = getFirstNodeOfType(code, 'TemplateLiteral');
+
+      expect(fluentTokensPlugin.evaluateNode(node, makeContext(program))).toBe(DEOPT);
+    });
+
+    it('evaluates template literal with zIndex token including fallback', () => {
+      const code = 'const x = `${tokens.zIndexOverlay}`;';
+      const { node, program } = getFirstNodeOfType(code, 'TemplateLiteral');
+
+      expect(fluentTokensPlugin.evaluateNode(node, makeContext(program))).toBe('var(--zIndexOverlay, 1000)');
+    });
+  });
+
+  describe('unsupported node types', () => {
+    it('returns DEOPT for Identifier', () => {
+      const code = 'const x = foo;';
+      const { node, program } = getFirstNodeOfType(code, 'Identifier');
+
+      expect(fluentTokensPlugin.evaluateNode(node, makeContext(program))).toBe(DEOPT);
+    });
+  });
+});