@csszyx/compiler 0.9.0 → 0.9.2

package/dist/index.cjs

@@ -1,12 +1,12 @@
 'use strict';
 
 const core = require('@csszyx/core');
-const transformCore = require('./shared/compiler.DZgazEy8.cjs');
+const transformCore = require('./shared/compiler.BfDLUvcf.cjs');
+const oxcParser = require('oxc-parser');
 const t = require('@babel/types');
 const node_crypto = require('node:crypto');
 const babel = require('@babel/core');
 const MagicString = require('magic-string');
-const oxcParser = require('oxc-parser');
 const native = require('@csszyx/core/native');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
@@ -84,6 +84,7 @@ function transformSourceCode(source, filename, options) {
   const rawClassNames = /* @__PURE__ */ new Set();
   const diagnostics = [];
   const recoveryTokens = /* @__PURE__ */ new Map();
+  const cssVariableMap = /* @__PURE__ */ new Map();
   if (!source.includes("sz")) {
     return {
       code: source,
@@ -94,7 +95,8 @@ function transformSourceCode(source, filename, options) {
       classes: collectedClasses,
       rawClassNames,
       diagnostics,
-      recoveryTokens
+      recoveryTokens,
+      cssVariableMap
     };
   }
   try {
@@ -756,7 +758,8 @@ function transformSourceCode(source, filename, options) {
       classes: collectedClasses,
       rawClassNames,
       diagnostics,
-      recoveryTokens
+      recoveryTokens,
+      cssVariableMap
     };
   } catch (e) {
     if (e instanceof ASTBudgetExceededError) {
@@ -772,7 +775,8 @@ function transformSourceCode(source, filename, options) {
       classes: collectedClasses,
       rawClassNames,
       diagnostics,
-      recoveryTokens
+      recoveryTokens,
+      cssVariableMap
     };
   }
 }
@@ -1324,6 +1328,271 @@ class CsszyxCompiler {
   }
 }
 
+const CSS_VAR_REFERENCE_RE = /var\(\s*(--[\w-]+)/g;
+function scanGlobalVarUsages(source, filename = "file.tsx", options = {}) {
+  if (!source.includes("--") && !source.includes("var(")) {
+    return [];
+  }
+  const parsed = oxcParser.parseSync(filename, source);
+  if (parsed.errors.length > 0) {
+    throw new Error(
+      `oxc-parser errors in ${filename}: ${parsed.errors.map((error) => error.message).join("; ")}`
+    );
+  }
+  const tokenFilter = options.tokens ? new Set(options.tokens) : null;
+  const constantStrings = collectStringConstants(parsed.program);
+  const diagnostics = [];
+  walk$1(parsed.program, (node, ancestors) => {
+    if (node.type === "CallExpression") {
+      collectStyleMethodDiagnostic(
+        node,
+        source,
+        filename,
+        constantStrings,
+        tokenFilter,
+        diagnostics
+      );
+      return;
+    }
+    if (node.type !== "JSXAttribute") {
+      return;
+    }
+    const attrName = jsxAttributeName(node);
+    if (attrName === "style") {
+      collectJsxStyleDiagnostics(
+        node,
+        source,
+        filename,
+        constantStrings,
+        tokenFilter,
+        diagnostics
+      );
+      return;
+    }
+    if (attrName === "className") {
+      collectClassNameDiagnostics(node, source, filename, tokenFilter, diagnostics);
+      return;
+    }
+    if (attrName === "sz" && ancestors.some((parent) => parent.type === "JSXAttribute")) {
+      return;
+    }
+  });
+  return diagnostics;
+}
+function collectStringConstants(root) {
+  const constants = /* @__PURE__ */ new Map();
+  walk$1(root, (node) => {
+    if (node.type !== "VariableDeclarator") {
+      return;
+    }
+    const id = node.id;
+    const init = node.init;
+    if (id?.type !== "Identifier" || !init) {
+      return;
+    }
+    const name = id.name;
+    const value = literalStringValue$1(init);
+    if (typeof name === "string" && value !== null) {
+      constants.set(name, value);
+    }
+  });
+  return constants;
+}
+function collectStyleMethodDiagnostic(node, source, filename, constants, tokenFilter, diagnostics) {
+  const method = memberMethodName(node.callee);
+  if (!method || !["setProperty", "getPropertyValue", "removeProperty"].includes(method)) {
+    return;
+  }
+  const firstArg = node.arguments?.[0];
+  const name = firstArg ? resolveString(firstArg, constants) : null;
+  if (!name?.startsWith("--") || !shouldReportToken(name, tokenFilter)) {
+    return;
+  }
+  const kind = method === "setProperty" ? "style-set-property" : method === "getPropertyValue" ? "style-get-property" : "style-remove-property";
+  diagnostics.push(createDiagnostic(kind, name, node, source, filename));
+}
+function collectJsxStyleDiagnostics(attr, source, filename, constants, tokenFilter, diagnostics) {
+  const expression = jsxExpression(attr);
+  if (expression?.type !== "ObjectExpression") {
+    return;
+  }
+  for (const prop of expression.properties ?? []) {
+    if (prop.type !== "Property") {
+      continue;
+    }
+    const name = propertyKeyString(prop, constants);
+    if (name?.startsWith("--") && shouldReportToken(name, tokenFilter)) {
+      diagnostics.push(createDiagnostic("jsx-style-key", name, prop, source, filename));
+    }
+  }
+}
+function collectClassNameDiagnostics(attr, source, filename, tokenFilter, diagnostics) {
+  for (const value of jsxAttributeStringValues(attr)) {
+    for (const name of extractVarReferences(value)) {
+      if (shouldReportToken(name, tokenFilter)) {
+        diagnostics.push(
+          createDiagnostic("class-string-var-reference", name, attr, source, filename)
+        );
+      }
+    }
+  }
+}
+function jsxAttributeName(attr) {
+  const name = attr.name;
+  return name?.type === "JSXIdentifier" ? name.name ?? null : null;
+}
+function jsxExpression(attr) {
+  const value = attr.value;
+  if (value?.type !== "JSXExpressionContainer") {
+    return null;
+  }
+  return value.expression ?? null;
+}
+function jsxAttributeStringValues(attr) {
+  const value = attr.value;
+  if (!value) {
+    return [];
+  }
+  const direct = literalStringValue$1(value);
+  if (direct !== null) {
+    return [direct];
+  }
+  const expression = jsxExpression(attr);
+  if (!expression) {
+    return [];
+  }
+  const exprValue = literalStringValue$1(expression);
+  if (exprValue !== null) {
+    return [exprValue];
+  }
+  if (expression.type === "TemplateLiteral") {
+    return templateStaticParts(expression);
+  }
+  return [];
+}
+function resolveString(node, constants) {
+  const literal = literalStringValue$1(node);
+  if (literal !== null) {
+    return literal;
+  }
+  if (node.type === "Identifier") {
+    const name = node.name;
+    return typeof name === "string" ? constants.get(name) ?? null : null;
+  }
+  return null;
+}
+function literalStringValue$1(node) {
+  if (node.type !== "Literal") {
+    return null;
+  }
+  const value = node.value;
+  return typeof value === "string" ? value : null;
+}
+function propertyKeyString(property, constants) {
+  const key = property.key;
+  const computed = property.computed === true;
+  if (!key) {
+    return null;
+  }
+  if (computed) {
+    return resolveString(key, constants);
+  }
+  if (key.type === "Identifier") {
+    const name = key.name;
+    return typeof name === "string" ? name : null;
+  }
+  return literalStringValue$1(key);
+}
+function memberMethodName(callee) {
+  if (callee?.type !== "MemberExpression") {
+    return null;
+  }
+  const property = callee.property;
+  if (!property) {
+    return null;
+  }
+  if (property.type === "Identifier") {
+    const name = property.name;
+    return typeof name === "string" ? name : null;
+  }
+  return literalStringValue$1(property);
+}
+function templateStaticParts(node) {
+  const quasis = node.quasis ?? [];
+  const parts = [];
+  for (const quasi of quasis) {
+    const value = quasi.value;
+    const cooked = value?.cooked;
+    const raw = value?.raw;
+    if (typeof cooked === "string") {
+      parts.push(cooked);
+    } else if (typeof raw === "string") {
+      parts.push(raw);
+    }
+  }
+  return parts;
+}
+function extractVarReferences(value) {
+  const refs = /* @__PURE__ */ new Set();
+  for (const match of value.matchAll(CSS_VAR_REFERENCE_RE)) {
+    refs.add(match[1]);
+  }
+  return [...refs].sort();
+}
+function shouldReportToken(name, tokenFilter) {
+  return tokenFilter === null || tokenFilter.has(name);
+}
+function createDiagnostic(kind, name, node, source, filename) {
+  return {
+    kind,
+    name,
+    location: offsetToLocation(source, node.start, filename),
+    message: `${name} is used outside csszyx-owned global variable alias rewrites (${kind}).`
+  };
+}
+function offsetToLocation(source, offset, filename) {
+  let line = 1;
+  let column = 1;
+  for (let index = 0; index < offset; index++) {
+    if (source.charCodeAt(index) === 10) {
+      line++;
+      column = 1;
+    } else {
+      column++;
+    }
+  }
+  return { filePath: filename, line, column };
+}
+function walk$1(node, visit, ancestors = []) {
+  if (!isOxcNode$1(node)) {
+    return;
+  }
+  visit(node, ancestors);
+  ancestors.push(node);
+  for (const key of Object.keys(node)) {
+    if (isAstMetadataKey$1(key)) {
+      continue;
+    }
+    const child = node[key];
+    if (Array.isArray(child)) {
+      for (const item of child) {
+        walk$1(item, visit, ancestors);
+      }
+    } else if (child && typeof child === "object") {
+      walk$1(child, visit, ancestors);
+    }
+  }
+  ancestors.pop();
+}
+function isOxcNode$1(value) {
+  return Boolean(
+    value && typeof value === "object" && typeof value.type === "string"
+  );
+}
+function isAstMetadataKey$1(key) {
+  return key === "loc" || key === "range" || key === "start" || key === "end" || key === "type";
+}
+
 function findLCA(nodeA, nodeB, parentMap) {
   const ancestorsA = /* @__PURE__ */ new Set();
   let current = nodeA;
@@ -1657,6 +1926,155 @@ function injectRecoveryToken(attributes, token) {
   };
 }
 
+const DEFAULT_MAX_DEPTH = 5;
+function planComponentVariableHoistsWithDiagnostics(nodes, usages, options = {}) {
+  const maxDepth = options.maxDepth ?? DEFAULT_MAX_DEPTH;
+  const nodeById = new Map(nodes.map((node) => [node.id, node]));
+  const groups = /* @__PURE__ */ new Map();
+  for (const usage of usages) {
+    const groupKey = `${usage.name}\0${usage.valueKey}`;
+    const group = groups.get(groupKey);
+    if (group) {
+      group.push(usage);
+    } else {
+      groups.set(groupKey, [usage]);
+    }
+  }
+  const plans = [];
+  const diagnostics = [];
+  for (const group of groups.values()) {
+    if (group.length < 2) {
+      continue;
+    }
+    const targetElementId = findLowestCommonAncestor(
+      group.map((usage) => usage.elementId),
+      nodeById
+    );
+    if (!targetElementId) {
+      diagnostics.push(buildHoistDiagnostic(group, "no-lca"));
+      continue;
+    }
+    const target = nodeById.get(targetElementId);
+    if (!target || target.canHost === false) {
+      diagnostics.push(buildHoistDiagnostic(group, "non-host-ancestor"));
+      continue;
+    }
+    if (group.some(
+      (usage) => distanceToAncestor(usage.elementId, targetElementId, nodeById) > maxDepth
+    )) {
+      diagnostics.push(buildHoistDiagnostic(group, "max-depth", maxDepth));
+      continue;
+    }
+    plans.push({
+      name: group[0].name,
+      valueKey: group[0].valueKey,
+      targetElementId,
+      usageIds: group.map((usage) => usage.id)
+    });
+  }
+  return { plans, diagnostics };
+}
+function buildHoistDiagnostic(group, reason, maxDepth) {
+  return {
+    name: group[0]?.name ?? "",
+    reason,
+    usageCount: group.length,
+    ...maxDepth === void 0 ? {} : { maxDepth }
+  };
+}
+function findLowestCommonAncestor(elementIds, nodeById) {
+  const [first, ...rest] = elementIds;
+  if (!first) {
+    return null;
+  }
+  let currentAncestors = ancestorChain(first, nodeById);
+  for (const elementId of rest) {
+    const nextAncestors = new Set(ancestorChain(elementId, nodeById));
+    currentAncestors = currentAncestors.filter((id) => nextAncestors.has(id));
+    if (currentAncestors.length === 0) {
+      return null;
+    }
+  }
+  return currentAncestors[0] ?? null;
+}
+function ancestorChain(elementId, nodeById) {
+  const chain = [];
+  let current = elementId;
+  while (current) {
+    const node = nodeById.get(current);
+    if (!node) {
+      break;
+    }
+    chain.push(current);
+    current = node.parentId;
+  }
+  return chain;
+}
+function distanceToAncestor(elementId, ancestorId, nodeById) {
+  let distance = 0;
+  let current = elementId;
+  while (current) {
+    if (current === ancestorId) {
+      return distance;
+    }
+    const node = nodeById.get(current);
+    if (!node) {
+      break;
+    }
+    current = node.parentId;
+    distance++;
+  }
+  return Number.POSITIVE_INFINITY;
+}
+
+function planCSSVariableNames(usages, options = {}) {
+  const componentNames = /* @__PURE__ */ new Map();
+  const scopedNamesByElement = /* @__PURE__ */ new Map();
+  const reservedNames = options.reservedNames ?? /* @__PURE__ */ new Set();
+  return usages.map((usage) => {
+    if (usage.tier === "component") {
+      const key2 = canonicalUsageKey(usage);
+      let name2 = componentNames.get(key2);
+      if (!name2) {
+        name2 = allocateVariableName("--c", componentNames.size, reservedNames);
+        componentNames.set(key2, name2);
+      }
+      return { ...usage, name: name2 };
+    }
+    const elementId = usage.elementId ?? "";
+    const elementNames = getOrCreate(scopedNamesByElement, elementId, () => /* @__PURE__ */ new Map());
+    const key = canonicalUsageKey(usage);
+    let name = elementNames.get(key);
+    if (!name) {
+      name = allocateVariableName("--s", elementNames.size, reservedNames);
+      elementNames.set(key, name);
+    }
+    return { ...usage, name };
+  });
+}
+function allocateVariableName(prefix, startIndex, reservedNames) {
+  let index = startIndex;
+  while (true) {
+    const name = `${prefix}${core.encode(index)}`;
+    if (!reservedNames.has(name)) {
+      return name;
+    }
+    index++;
+  }
+}
+function canonicalUsageKey(usage) {
+  return `${usage.variantChain ?? ""}\0${usage.propertyKey}`;
+}
+function getOrCreate(map, key, create) {
+  const existing = map.get(key);
+  if (existing) {
+    return existing;
+  }
+  const value = create();
+  map.set(key, value);
+  return value;
+}
+
 class OxcNotImplementedError extends Error {
   /**
    * @param slice The Phase D slice expected to implement this path.
@@ -1672,6 +2090,8 @@ function transformOxc(source, filename, options) {
   const rawClassNames = /* @__PURE__ */ new Set();
   const diagnostics = [];
   const recoveryTokens = /* @__PURE__ */ new Map();
+  const cssVariableMap = /* @__PURE__ */ new Map();
+  const globalVarAliases = normalizeGlobalVarAliases$1(options?.globalVarAliases);
   if (!source.includes("sz")) {
     return {
       code: source,
@@ -1682,7 +2102,8 @@ function transformOxc(source, filename, options) {
       classes,
       rawClassNames,
       diagnostics,
-      recoveryTokens
+      recoveryTokens,
+      cssVariableMap
     };
   }
   const effectiveFilename = filename ?? "file.tsx";
@@ -1697,6 +2118,18 @@ function transformOxc(source, filename, options) {
   const edits = new MagicString__default(source);
   const objectBindings = collectObjectBindings(parsed.program);
   const conditionalBindings = collectConditionalBindings(parsed.program);
+  const reservedCSSVariableNames = options?.mangleVars ? collectStaticStyleCustomPropertyNames(parsed.program) : void 0;
+  const componentHoists = options?.mangleVars ? planOxcComponentVariableHoists(
+    parsed.program,
+    effectiveFilename,
+    objectBindings,
+    source,
+    options.mangleVarHoistMaxDepth,
+    reservedCSSVariableNames
+  ) : null;
+  if (componentHoists) {
+    diagnostics.push(...componentHoists.diagnostics);
+  }
   let transformed = false;
   let usesRuntime = false;
   let usesMerge = false;
@@ -1722,6 +2155,24 @@ function transformOxc(source, filename, options) {
     let szRecoverAttr = null;
     let alreadyTagged = false;
     let lastAttr = null;
+    let appliedHoistedStyleProps = false;
+    const elementId = elementIdForOpening(openingNode);
+    const hoistedStyleProps = componentHoists?.stylePropsByTarget.get(elementId) ?? [];
+    const applyHoistedStyleProps = () => {
+      if (appliedHoistedStyleProps || hoistedStyleProps.length === 0) {
+        return;
+      }
+      applyStyleProps(
+        edits,
+        source,
+        styleAttr,
+        lastAttr,
+        hoistedStyleProps,
+        openingNode.name.end
+      );
+      appliedHoistedStyleProps = true;
+      transformed = true;
+    };
     for (const attrRaw of attrs) {
       if (attrRaw.type !== "JSXAttribute") {
         continue;
@@ -1782,6 +2233,7 @@ function transformOxc(source, filename, options) {
       }
     }
     if (szAttrs.length === 0) {
+      applyHoistedStyleProps();
       return;
     }
     const szDerived = [];
@@ -1818,7 +2270,9 @@ function transformOxc(source, filename, options) {
           effectiveFilename,
           objectBindings,
           source,
-          classes
+          classes,
+          globalVarAliases,
+          cssVariableMap
         );
         if (conditionalClassExpr) {
           if (classNameAttr || szAttrs.length > 1) {
@@ -1840,7 +2294,11 @@ function transformOxc(source, filename, options) {
         const bound = objectBindings.get(identifierName);
         if (bound) {
           const result2 = transformCore.transform(
-            astObjectToSzObject(bound, effectiveFilename, objectBindings)
+            applyGlobalVarAliasesToSzObject(
+              astObjectToSzObject(bound, effectiveFilename, objectBindings),
+              globalVarAliases,
+              cssVariableMap
+            )
           );
           for (const c of result2.className.split(/\s+/)) {
             if (c) {
@@ -1857,7 +2315,9 @@ function transformOxc(source, filename, options) {
             effectiveFilename,
             objectBindings,
             source,
-            classes
+            classes,
+            globalVarAliases,
+            cssVariableMap
           );
           if (conditionalClassExpr) {
             if (classNameAttr || szAttrs.length > 1) {
@@ -1879,7 +2339,9 @@ function transformOxc(source, filename, options) {
         const arrayClasses = astArrayToStaticClasses(
           expression,
           effectiveFilename,
-          objectBindings
+          objectBindings,
+          globalVarAliases,
+          cssVariableMap
         );
         if (arrayClasses === null) {
           collectArrayCandidateClasses(
@@ -1917,7 +2379,9 @@ function transformOxc(source, filename, options) {
             effectiveFilename,
             objectBindings,
             source,
-            classes
+            classes,
+            globalVarAliases,
+            cssVariableMap
           );
           if (conditionalSpreadClassExpr) {
             if (classNameAttr || szAttrs.length > 1) {
@@ -1937,9 +2401,15 @@ function transformOxc(source, filename, options) {
             expression,
             effectiveFilename,
             objectBindings,
-            source
+            source,
+            options,
+            componentHoists?.usageNamesByElement.get(elementId),
+            cssVariableMap,
+            reservedCSSVariableNames,
+            globalVarAliases
           );
           if (partial && szAttrs.length === 1) {
+            const mergedStyleProps = hoistedStyleProps.length > 0 ? [...hoistedStyleProps, ...partial.styleProps] : partial.styleProps;
             if (classNameAttr?.value?.type === "JSXExpressionContainer") {
               const classExpression = classNameAttr.value.expression;
               const classExpressionSource = source.slice(
@@ -1952,7 +2422,15 @@ function transformOxc(source, filename, options) {
                 `className={_szMerge(${classExpressionSource}, ${JSON.stringify(partial.className)})}`
               );
               edits.remove(whitespaceStart(source, szAttr.start), szAttr.end);
-              applyStyleProps(edits, source, styleAttr, lastAttr, partial.styleProps);
+              applyStyleProps(
+                edits,
+                source,
+                styleAttr,
+                lastAttr,
+                mergedStyleProps,
+                openingNode.name.end
+              );
+              appliedHoistedStyleProps = true;
               for (const c of partial.className.split(/\s+/)) {
                 if (c) {
                   classes.add(c);
@@ -1976,7 +2454,15 @@ function transformOxc(source, filename, options) {
             } else {
               edits.overwrite(szAttr.start, szAttr.end, partial.classNameAttr);
             }
-            applyStyleProps(edits, source, styleAttr, lastAttr, partial.styleProps);
+            applyStyleProps(
+              edits,
+              source,
+              styleAttr,
+              lastAttr,
+              mergedStyleProps,
+              openingNode.name.end
+            );
+            appliedHoistedStyleProps = true;
             for (const c of partial.className.split(/\s+/)) {
               if (c) {
                 classes.add(c);
@@ -1992,7 +2478,9 @@ function transformOxc(source, filename, options) {
         }
         throw err;
       }
-      const result = transformCore.transform(szObj);
+      const result = transformCore.transform(
+        applyGlobalVarAliasesToSzObject(szObj, globalVarAliases, cssVariableMap)
+      );
       for (const c of result.className.split(/\s+/)) {
         if (c) {
           szDerived.push(c);
@@ -2025,6 +2513,7 @@ function transformOxc(source, filename, options) {
       transformed = true;
       return;
     }
+    applyHoistedStyleProps();
     const existingRaw = classNameAttr ? stringLiteralValue(classNameAttr.value) : null;
     const mergedClasses = [
       ...existingRaw ? existingRaw.split(/\s+/).filter(Boolean) : [],
@@ -2059,7 +2548,8 @@ function transformOxc(source, filename, options) {
     classes,
     rawClassNames,
     diagnostics,
-    recoveryTokens
+    recoveryTokens,
+    cssVariableMap
   };
 }
 function stringLiteralValue(value) {
@@ -2168,7 +2658,7 @@ function astObjectToSzObject(node, filename, bindings) {
   }
   return result;
 }
-function astArrayToStaticClasses(node, filename, bindings) {
+function astArrayToStaticClasses(node, filename, bindings, globalVarAliases, cssVariableMap) {
   const out = [];
   for (const element of node.elements) {
     if (!element || isFalsyLiteral(element)) {
@@ -2185,7 +2675,13 @@ function astArrayToStaticClasses(node, filename, bindings) {
     }
     let result;
     try {
-      result = transformCore.transform(astObjectToSzObject(objectNode, filename, bindings));
+      result = transformCore.transform(
+        applyGlobalVarAliasesToSzObject(
+          astObjectToSzObject(objectNode, filename, bindings),
+          globalVarAliases,
+          cssVariableMap
+        )
+      );
     } catch (err) {
       if (err instanceof OxcNotImplementedError) {
         return null;
@@ -2282,7 +2778,7 @@ function resolveObjectExpression(node, bindings) {
   }
   return null;
 }
-function buildConditionalSpreadClassExpression(node, filename, bindings, source, classes) {
+function buildConditionalSpreadClassExpression(node, filename, bindings, source, classes, globalVarAliases, cssVariableMap) {
   let conditionalSpread = null;
   const otherProps = [];
   for (const prop of node.properties) {
@@ -2305,14 +2801,18 @@ function buildConditionalSpreadClassExpression(node, filename, bindings, source,
     otherProps,
     node,
     filename,
-    bindings
+    bindings,
+    globalVarAliases,
+    cssVariableMap
   );
   const alternate = compileConditionalSpreadBranch(
     conditionalSpread.alternate,
     otherProps,
     node,
     filename,
-    bindings
+    bindings,
+    globalVarAliases,
+    cssVariableMap
   );
   if (consequent === null || alternate === null) {
     return null;
@@ -2325,7 +2825,7 @@ function buildConditionalSpreadClassExpression(node, filename, bindings, source,
   const testSource = source.slice(conditionalSpread.test.start, conditionalSpread.test.end);
   return `${testSource} ? ${JSON.stringify(consequent)} : ${JSON.stringify(alternate)}`;
 }
-function compileConditionalSpreadBranch(branch, otherProps, sourceNode, filename, bindings) {
+function compileConditionalSpreadBranch(branch, otherProps, sourceNode, filename, bindings, globalVarAliases, cssVariableMap) {
   const branchObject = resolveObjectExpression(branch, bindings);
   if (!branchObject) {
     return null;
@@ -2337,7 +2837,13 @@ function compileConditionalSpreadBranch(branch, otherProps, sourceNode, filename
       filename,
       bindings
     );
-    return transformCore.transform({ ...branchValue, ...overrides }).className;
+    return transformCore.transform(
+      applyGlobalVarAliasesToSzObject(
+        { ...branchValue, ...overrides },
+        globalVarAliases,
+        cssVariableMap
+      )
+    ).className;
   } catch (err) {
     if (err instanceof OxcNotImplementedError) {
       return null;
@@ -2345,8 +2851,15 @@ function compileConditionalSpreadBranch(branch, otherProps, sourceNode, filename
     throw err;
   }
 }
-function buildPartialObjectTransform(node, filename, bindings, source) {
-  const partial = evaluatePartialObject(node, filename, bindings, source);
+function buildPartialObjectTransform(node, filename, bindings, source, options, hoistedNames, cssVariableMap, reservedNames, globalVarAliases = /* @__PURE__ */ new Map()) {
+  const partial = evaluatePartialObject(
+    node,
+    filename,
+    bindings,
+    source,
+    globalVarAliases,
+    cssVariableMap
+  );
   if (!partial || partial.dynamicProps.size === 0 && partial.conditionalClasses.length === 0) {
     return null;
   }
@@ -2355,11 +2868,17 @@ function buildPartialObjectTransform(node, filename, bindings, source) {
   }
   const classParts = [];
   if (Object.keys(partial.staticProps).length > 0) {
-    const { className: className2 } = transformCore.transform(partial.staticProps);
+    const { className: className2 } = transformCore.transform(
+      applyGlobalVarAliasesToSzObject(partial.staticProps, globalVarAliases, cssVariableMap)
+    );
     if (className2) {
       classParts.push(className2);
     }
   }
+  if (options?.mangleVars) {
+    applyHoistedVariableNames(partial, hoistedNames, cssVariableMap);
+    applyScopedVariablePlan(partial, hoistedNames, cssVariableMap, reservedNames);
+  }
   for (const [, info] of partial.dynamicProps) {
     classParts.push(buildCSSVarClassName(info));
   }
@@ -2368,12 +2887,351 @@ function buildPartialObjectTransform(node, filename, bindings, source) {
   }
   const className = classParts.filter(Boolean).join(" ");
   const classNameAttr = partial.conditionalClasses.length > 0 ? `className={${buildConditionalClassSource(classParts, partial.conditionalClasses, source)}}` : `className="${className}"`;
-  const styleProps = [...partial.dynamicProps.values()].map(
-    (info) => `${JSON.stringify(info.varName)}: ${generateStyleValueSource(info, source)}`
+  const styleProps = [...partial.dynamicProps.entries()].filter(([id]) => !hoistedNames?.has(id)).map(
+    ([, info]) => `${JSON.stringify(info.varName)}: ${generateStyleValueSource(info, source)}`
   );
   return { className, classNameAttr, styleProps, usesColorVar: partial.usesColorVar };
 }
-function evaluatePartialObject(node, filename, bindings, source, variantChain = "") {
+function applyHoistedVariableNames(partial, hoistedNames, cssVariableMap) {
+  if (!hoistedNames) {
+    return;
+  }
+  for (const [id, name] of hoistedNames) {
+    const info = partial.dynamicProps.get(id);
+    if (info) {
+      addCssVariableMapping(cssVariableMap, info.varName, name);
+      info.varName = name;
+    }
+  }
+}
+function applyScopedVariablePlan(partial, hoistedNames, cssVariableMap, reservedNames) {
+  const entries = [...partial.dynamicProps.entries()].filter(([id]) => !hoistedNames?.has(id));
+  const plan = planCSSVariableNames(
+    entries.map(([id]) => ({
+      id,
+      tier: "scoped",
+      elementId: "self",
+      propertyKey: id
+    })),
+    { reservedNames }
+  );
+  for (const planned of plan) {
+    const info = partial.dynamicProps.get(planned.id);
+    if (info) {
+      addCssVariableMapping(cssVariableMap, info.varName, planned.name);
+      info.varName = planned.name;
+    }
+  }
+}
+function addCssVariableMapping(cssVariableMap, original, mangled) {
+  if (!cssVariableMap) {
+    return;
+  }
+  const existing = cssVariableMap.get(original);
+  if (!existing) {
+    cssVariableMap.set(original, mangled);
+    return;
+  }
+  const values = Array.isArray(existing) ? existing : [existing];
+  if (!values.includes(mangled)) {
+    cssVariableMap.set(original, [...values, mangled]);
+  }
+}
+function normalizeGlobalVarAliases$1(input) {
+  if (!input) {
+    return /* @__PURE__ */ new Map();
+  }
+  const entries = input instanceof Map ? input.entries() : Array.isArray(input) ? input : Object.entries(input);
+  const aliases = /* @__PURE__ */ new Map();
+  for (const [original, alias] of entries) {
+    if (original.startsWith("--") && alias.startsWith("--")) {
+      aliases.set(original, alias);
+    }
+  }
+  return aliases;
+}
+function applyGlobalVarAliasesToSzObject(object, globalVarAliases, cssVariableMap) {
+  if (globalVarAliases.size === 0) {
+    return object;
+  }
+  const rewritten = {};
+  for (const [key, value] of Object.entries(object)) {
+    rewritten[key] = applyGlobalVarAliasesToSzValue(value, globalVarAliases, cssVariableMap);
+  }
+  return rewritten;
+}
+function applyGlobalVarAliasesToSzValue(value, globalVarAliases, cssVariableMap) {
+  if (typeof value === "string") {
+    const alias = globalVarAliases.get(value);
+    if (alias) {
+      addCssVariableMapping(cssVariableMap, value, alias);
+      return alias;
+    }
+    return value;
+  }
+  if (typeof value === "object") {
+    return applyGlobalVarAliasesToSzObject(value, globalVarAliases, cssVariableMap);
+  }
+  return value;
+}
+function planOxcComponentVariableHoists(root, filename, bindings, source, maxDepth, reservedNames) {
+  const nodes = [];
+  const candidates = [];
+  collectOxcHoistCandidates(root, null, nodes, candidates, filename, bindings, source);
+  if (candidates.length < 2) {
+    return {
+      stylePropsByTarget: /* @__PURE__ */ new Map(),
+      usageNamesByElement: /* @__PURE__ */ new Map(),
+      diagnostics: []
+    };
+  }
+  const plannedNames = planCSSVariableNames(
+    candidates.map((candidate) => ({
+      id: candidate.id,
+      tier: "component",
+      elementId: candidate.elementId,
+      propertyKey: candidate.propertyKey,
+      variantChain: candidate.variantChain || void 0
+    })),
+    { reservedNames }
+  );
+  const nameByUsage = new Map(plannedNames.map((entry) => [entry.id, entry.name]));
+  const candidateById = new Map(candidates.map((candidate) => [candidate.id, candidate]));
+  const hoistUsages = candidates.map((candidate) => ({
+    id: candidate.id,
+    elementId: candidate.elementId,
+    name: nameByUsage.get(candidate.id) ?? candidate.info.varName,
+    valueKey: candidate.valueKey
+  }));
+  const analysis = planComponentVariableHoistsWithDiagnostics(nodes, hoistUsages, {
+    maxDepth
+  });
+  const plans = analysis.plans;
+  const stylePropsByTarget = /* @__PURE__ */ new Map();
+  const usageNamesByElement = /* @__PURE__ */ new Map();
+  for (const plan of plans) {
+    const [firstUsageId] = plan.usageIds;
+    const firstCandidate = firstUsageId ? candidateById.get(firstUsageId) : void 0;
+    if (!firstCandidate) {
+      continue;
+    }
+    appendMapArray(
+      stylePropsByTarget,
+      plan.targetElementId,
+      `${JSON.stringify(plan.name)}: ${firstCandidate.valueSource}`
+    );
+    for (const usageId of plan.usageIds) {
+      const candidate = candidateById.get(usageId);
+      if (!candidate) {
+        continue;
+      }
+      getOrCreateMap(usageNamesByElement, candidate.elementId).set(
+        candidate.dynamicKey,
+        plan.name
+      );
+    }
+  }
+  return {
+    stylePropsByTarget,
+    usageNamesByElement,
+    diagnostics: analysis.diagnostics.map(formatHoistSkipDiagnostic)
+  };
+}
+function formatHoistSkipDiagnostic(diagnostic) {
+  const suffix = diagnostic.reason === "max-depth" && diagnostic.maxDepth !== void 0 ? ` (maxDepth ${diagnostic.maxDepth})` : "";
+  return `[csszyx] mangleVars skipped component CSS variable hoist for ${diagnostic.name} across ${diagnostic.usageCount} usages: ${diagnostic.reason}${suffix}`;
+}
+function collectOxcHoistCandidates(node, parentElementId, nodes, candidates, filename, bindings, source) {
+  if (node.type === "JSXElement") {
+    const element = node;
+    const opening = element.openingElement;
+    const elementId = elementIdForOpening(opening);
+    nodes.push({
+      id: elementId,
+      parentId: parentElementId,
+      canHost: canHostHoistedStyleProps(opening)
+    });
+    collectOpeningHoistCandidates(opening, elementId, candidates, filename, bindings, source);
+    for (const child of element.children) {
+      collectOxcHoistCandidates(
+        child,
+        elementId,
+        nodes,
+        candidates,
+        filename,
+        bindings,
+        source
+      );
+    }
+    return;
+  }
+  if (node.type === "JSXFragment") {
+    const fragment = node;
+    const elementId = `f${node.start}`;
+    nodes.push({ id: elementId, parentId: parentElementId, canHost: false });
+    for (const child of fragment.children) {
+      collectOxcHoistCandidates(
+        child,
+        elementId,
+        nodes,
+        candidates,
+        filename,
+        bindings,
+        source
+      );
+    }
+    return;
+  }
+  for (const key of Object.keys(node)) {
+    if (isAstMetadataKey(key)) {
+      continue;
+    }
+    const child = node[key];
+    if (Array.isArray(child)) {
+      for (const item of child) {
+        if (isOxcNode(item)) {
+          collectOxcHoistCandidates(
+            item,
+            parentElementId,
+            nodes,
+            candidates,
+            filename,
+            bindings,
+            source
+          );
+        }
+      }
+    } else if (isOxcNode(child)) {
+      collectOxcHoistCandidates(
+        child,
+        parentElementId,
+        nodes,
+        candidates,
+        filename,
+        bindings,
+        source
+      );
+    }
+  }
+}
+function collectOpeningHoistCandidates(opening, elementId, candidates, filename, bindings, source) {
+  for (const attrRaw of opening.attributes ?? []) {
+    if (attrRaw.type !== "JSXAttribute") {
+      continue;
+    }
+    const attr = attrRaw;
+    if (attr.name?.name !== "sz" || attr.value?.type !== "JSXExpressionContainer") {
+      continue;
+    }
+    const expression = attr.value.expression;
+    if (expression.type !== "ObjectExpression") {
+      continue;
+    }
+    const partial = evaluatePartialObject(
+      expression,
+      filename,
+      bindings,
+      source,
+      /* @__PURE__ */ new Map(),
+      void 0
+    );
+    if (!partial || partial.conditionalClasses.length > 0) {
+      continue;
+    }
+    for (const [dynamicKey, info] of partial.dynamicProps) {
+      candidates.push({
+        id: `${elementId}:${dynamicKey}`,
+        elementId,
+        dynamicKey,
+        propertyKey: dynamicKey,
+        variantChain: info.variantChain,
+        valueSource: generateStyleValueSource(info, source),
+        valueKey: buildDynamicValueKey(info, source),
+        info
+      });
+    }
+  }
+}
+function elementIdForOpening(opening) {
+  return `e${opening.start}`;
+}
+function canHostHoistedStyleProps(opening) {
+  if (!isDomJsxOpening(opening)) {
+    return false;
+  }
+  const styleAttr = findJsxAttribute(opening, "style");
+  return !styleAttr || styleAttr.value?.type === "JSXExpressionContainer";
+}
+function isDomJsxOpening(opening) {
+  if (opening.name.type !== "JSXIdentifier") {
+    return false;
+  }
+  const name = String(opening.name.name);
+  return name.length > 0 && name.charAt(0) === name.charAt(0).toLowerCase();
+}
+function findJsxAttribute(opening, name) {
+  for (const attrRaw of opening.attributes ?? []) {
+    if (attrRaw.type === "JSXAttribute") {
+      const attr = attrRaw;
+      if (attr.name?.name === name) {
+        return attr;
+      }
+    }
+  }
+  return null;
+}
+function collectStaticStyleCustomPropertyNames(node) {
+  const names = /* @__PURE__ */ new Set();
+  walk(node, (child) => {
+    if (child.type !== "JSXOpeningElement") {
+      return;
+    }
+    const styleAttr = findJsxAttribute(child, "style");
+    if (styleAttr?.value?.type !== "JSXExpressionContainer") {
+      return;
+    }
+    const expression = styleAttr.value.expression;
+    if (expression.type !== "ObjectExpression") {
+      return;
+    }
+    for (const propRaw of expression.properties ?? []) {
+      if (propRaw.type !== "Property") {
+        continue;
+      }
+      const key = propRaw.key;
+      const name = literalStringValue(key);
+      if (name?.startsWith("--")) {
+        names.add(name);
+      }
+    }
+  });
+  return names;
+}
+function literalStringValue(node) {
+  if (node.type !== "Literal") {
+    return null;
+  }
+  const value = node.value;
+  return typeof value === "string" ? value : null;
+}
+function appendMapArray(map, key, value) {
+  const existing = map.get(key);
+  if (existing) {
+    existing.push(value);
+  } else {
+    map.set(key, [value]);
+  }
+}
+function getOrCreateMap(map, key) {
+  const existing = map.get(key);
+  if (existing) {
+    return existing;
+  }
+  const value = /* @__PURE__ */ new Map();
+  map.set(key, value);
+  return value;
+}
+function evaluatePartialObject(node, filename, bindings, source, globalVarAliases, cssVariableMap, variantChain = "") {
   const staticProps = {};
   const dynamicProps = /* @__PURE__ */ new Map();
   const conditionalClasses = [];
@@ -2430,6 +3288,8 @@ function evaluatePartialObject(node, filename, bindings, source, variantChain =
         filename,
         bindings,
         source,
+        globalVarAliases,
+        cssVariableMap,
         nestedVariant
       );
       if (!nested) {
@@ -2450,8 +3310,20 @@ function evaluatePartialObject(node, filename, bindings, source, variantChain =
       const consequent = extractStaticLiteralValue(conditional.consequent);
       const alternate = extractStaticLiteralValue(conditional.alternate);
       if (consequent !== null && alternate !== null) {
-        const { className: consequentClasses } = transformCore.transform({ [key]: consequent });
-        const { className: alternateClasses } = transformCore.transform({ [key]: alternate });
+        const { className: consequentClasses } = transformCore.transform(
+          applyGlobalVarAliasesToSzObject(
+            { [key]: consequent },
+            globalVarAliases,
+            cssVariableMap
+          )
+        );
+        const { className: alternateClasses } = transformCore.transform(
+          applyGlobalVarAliasesToSzObject(
+            { [key]: alternate },
+            globalVarAliases,
+            cssVariableMap
+          )
+        );
         conditionalClasses.push({
           test: conditional.test,
           consequent: prefixVariantClasses(consequentClasses, variantChain),
@@ -2480,14 +3352,15 @@ function evaluatePartialObject(node, filename, bindings, source, variantChain =
   }
   return { staticProps, dynamicProps, conditionalClasses, usesColorVar };
 }
-function applyStyleProps(edits, source, styleAttr, lastAttr, styleProps) {
+function applyStyleProps(edits, source, styleAttr, lastAttr, styleProps, fallbackInsertOffset) {
   if (styleProps.length === 0) {
     return;
   }
   const propsSource = styleProps.join(", ");
   if (!styleAttr) {
-    if (lastAttr) {
-      edits.appendRight(lastAttr.end, ` style={{${propsSource}}}`);
+    const insertOffset = lastAttr?.end ?? fallbackInsertOffset;
+    if (insertOffset !== void 0) {
+      edits.appendRight(insertOffset, ` style={{${propsSource}}}`);
     }
     return;
   }
@@ -2513,6 +3386,67 @@ function generateStyleValueSource(info, source) {
       return `\`\${${expressionSource}}\``;
   }
 }
+function buildDynamicValueKey(info, source) {
+  const expressionSource = normalizeDynamicExpressionKey(
+    source.slice(info.expression.start, info.expression.end)
+  );
+  switch (info.category) {
+    case transformCore.PropertyCategory.SPACING:
+      return `spacing:${expressionSource}`;
+    case transformCore.PropertyCategory.COLOR:
+      return `color:${expressionSource}`;
+    case transformCore.PropertyCategory.ANGLE:
+      return `angle:${expressionSource}`;
+    case transformCore.PropertyCategory.DURATION:
+      return `duration:${expressionSource}`;
+    default:
+      return `pass:${expressionSource}`;
+  }
+}
+function normalizeDynamicExpressionKey(expressionSource) {
+  let normalized = expressionSource.trim();
+  while (hasRedundantOuterParens(normalized)) {
+    normalized = normalized.slice(1, -1).trim();
+  }
+  return normalized;
+}
+function hasRedundantOuterParens(expressionSource) {
+  if (!expressionSource.startsWith("(") || !expressionSource.endsWith(")")) {
+    return false;
+  }
+  let depth = 0;
+  let quote = null;
+  let escaped = false;
+  for (let index = 0; index < expressionSource.length; index++) {
+    const char = expressionSource[index];
+    if (quote) {
+      if (escaped) {
+        escaped = false;
+      } else if (char === "\\") {
+        escaped = true;
+      } else if (char === quote) {
+        quote = null;
+      }
+      continue;
+    }
+    if (char === '"' || char === "'" || char === "`") {
+      quote = char;
+      continue;
+    }
+    if (char === "(") {
+      depth++;
+    } else if (char === ")") {
+      depth--;
+      if (depth === 0 && index !== expressionSource.length - 1) {
+        return false;
+      }
+    }
+    if (depth < 0) {
+      return false;
+    }
+  }
+  return depth === 0;
+}
 function buildCSSVarClassName(info) {
   const variantPrefix = info.variantChain ? `${transformCore.getVariantPrefix(info.variantChain)}:` : "";
   return `${variantPrefix}${info.twPrefix}-(${info.varName})`;
@@ -2545,9 +3479,21 @@ function prefixVariantClasses(className, variantChain) {
 function isRuntimeExpression(node) {
   return node.type === "Identifier" || node.type === "MemberExpression" || node.type === "CallExpression" || node.type === "ConditionalExpression" || node.type === "TemplateLiteral" || node.type === "BinaryExpression" || node.type === "LogicalExpression";
 }
-function buildStaticConditionalClassExpression(node, filename, bindings, source, classes) {
-  const consequent = resolveStaticClassString(node.consequent, filename, bindings);
-  const alternate = resolveStaticClassString(node.alternate, filename, bindings);
+function buildStaticConditionalClassExpression(node, filename, bindings, source, classes, globalVarAliases, cssVariableMap) {
+  const consequent = resolveStaticClassString(
+    node.consequent,
+    filename,
+    bindings,
+    globalVarAliases,
+    cssVariableMap
+  );
+  const alternate = resolveStaticClassString(
+    node.alternate,
+    filename,
+    bindings,
+    globalVarAliases,
+    cssVariableMap
+  );
   if (consequent === null || alternate === null) {
     return null;
   }
@@ -2559,7 +3505,7 @@ function buildStaticConditionalClassExpression(node, filename, bindings, source,
   const testSource = source.slice(node.test.start, node.test.end);
   return `${testSource} ? ${JSON.stringify(consequent)} : ${JSON.stringify(alternate)}`;
 }
-function resolveStaticClassString(node, filename, bindings) {
+function resolveStaticClassString(node, filename, bindings, globalVarAliases, cssVariableMap) {
   const unwrapped = unwrapExpression(node);
   let objectNode = null;
   if (unwrapped.type === "ObjectExpression") {
@@ -2571,7 +3517,13 @@ function resolveStaticClassString(node, filename, bindings) {
     return null;
   }
   try {
-    return transformCore.transform(astObjectToSzObject(objectNode, filename, bindings)).className;
+    return transformCore.transform(
+      applyGlobalVarAliasesToSzObject(
+        astObjectToSzObject(objectNode, filename, bindings),
+        globalVarAliases,
+        cssVariableMap
+      )
+    ).className;
   } catch (err) {
     if (err instanceof OxcNotImplementedError) {
       return null;
@@ -2686,17 +3638,22 @@ function unwrapExpression(node) {
   }
   return current;
 }
+function isOxcNode(value) {
+  return Boolean(
+    value && typeof value === "object" && typeof value.type === "string"
+  );
+}
+function isAstMetadataKey(key) {
+  return key === "loc" || key === "range" || key === "start" || key === "end" || key === "type";
+}
 function walk(node, visit) {
-  if (!node || typeof node !== "object") {
+  if (!isOxcNode(node)) {
     return;
   }
   const typed = node;
-  if (typeof typed.type !== "string") {
-    return;
-  }
   visit(typed);
   for (const key of Object.keys(typed)) {
-    if (key === "loc" || key === "range" || key === "start" || key === "end" || key === "type") {
+    if (isAstMetadataKey(key)) {
       continue;
     }
     const child = typed[key];
@@ -2720,7 +3677,7 @@ class OxcRustNotImplementedError extends Error {
   }
 }
 function transformRust(source, filename, options) {
-  const [result] = transformRustBatch([{ filename, source }]);
+  const [result] = transformRustBatch([{ filename, source }], options);
   if (!result) {
     throw new OxcRustNotImplementedError("native transform returned no result");
   }
@@ -2747,7 +3704,12 @@ function transformRustBatch(files, options) {
       files.map((file, index) => ({
         filename: file.filename ?? `file-${index}.tsx`,
         source: file.source
-      }))
+      })),
+      {
+        mangleVars: options?.mangleVars === true,
+        mangleVarHoistMaxDepth: options?.mangleVarHoistMaxDepth,
+        globalVarAliases: normalizeGlobalVarAliases(options?.globalVarAliases)
+      }
     ).map(fromNativeResult);
   } catch (err) {
     if (err instanceof OxcRustNotImplementedError) {
@@ -2761,6 +3723,13 @@ function transformRustBatch(files, options) {
     throw err;
   }
 }
+function normalizeGlobalVarAliases(input) {
+  if (!input) {
+    return [];
+  }
+  const entries = input instanceof Map ? input.entries() : Array.isArray(input) ? input : Object.entries(input);
+  return [...entries].filter(([original, alias]) => original.startsWith("--") && alias.startsWith("--")).map(([original, alias]) => ({ original, alias }));
+}
 function fromNativeResult(result) {
   return {
     code: result.code,
@@ -2780,9 +3749,25 @@ function fromNativeResult(result) {
           path: data.path
         }
       ])
-    )
+    ),
+    cssVariableMap: aggregateCssVariableMap(result.cssVariableMap ?? [])
   };
 }
+function aggregateCssVariableMap(entries) {
+  const map = /* @__PURE__ */ new Map();
+  for (const entry of entries) {
+    const existing = map.get(entry.original);
+    if (!existing) {
+      map.set(entry.original, entry.mangled);
+      continue;
+    }
+    const values = Array.isArray(existing) ? existing : [existing];
+    if (!values.includes(entry.mangled)) {
+      map.set(entry.original, [...values, entry.mangled]);
+    }
+  }
+  return map;
+}
 
 const VERSION = "0.0.0";
 const DEFAULT_COMPILER_OPTIONS = {
@@ -2803,6 +3788,7 @@ exports.KNOWN_VARIANTS = transformCore.KNOWN_VARIANTS;
 exports.PROPERTY_CATEGORY_MAP = transformCore.PROPERTY_CATEGORY_MAP;
 exports.PROPERTY_MAP = transformCore.PROPERTY_MAP;
 exports.PropertyCategory = transformCore.PropertyCategory;
+exports.SPECIAL_VARIANTS = transformCore.SPECIAL_VARIANTS;
 exports.SUGGESTION_MAP = transformCore.SUGGESTION_MAP;
 exports.getCSSVariableName = transformCore.getCSSVariableName;
 exports.getPropertyCategory = transformCore.getPropertyCategory;
@@ -2824,6 +3810,7 @@ exports.injectRecoveryToken = injectRecoveryToken;
 exports.isValidRecoveryMode = isValidRecoveryMode;
 exports.mergeOptions = mergeOptions;
 exports.parseManifest = parseManifest;
+exports.scanGlobalVarUsages = scanGlobalVarUsages;
 exports.serializeManifest = serializeManifest;
 exports.transformOxc = transformOxc;
 exports.transformRust = transformRust;