@astryxdesign/cli 0.0.0-bootstrap.0 → 0.1.0-canary.08d4cf4

package/src/codemods/transforms/v0.0.6/migrate-badge-children-to-label.mjs

@@ -0,0 +1,91 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * Codemod: Migrate XDSBadge from children to label prop
+ *
+ * <XDSBadge variant="success">Active</XDSBadge>  → <XDSBadge variant="success" label="Active" />
+ * <XDSBadge>3</XDSBadge>                         → <XDSBadge label={3} />
+ * <XDSBadge>{count}</XDSBadge>                   → <XDSBadge label={count} />
+ * <XDSBadge>{"text"}</XDSBadge>                  → <XDSBadge label="text" />
+ *
+ * Handles strings, numbers, and expressions.
+ * Skips badges with multiple children or JSX element children.
+ */
+
+export const meta = {
+  title: 'Migrate XDSBadge children to label prop',
+  description:
+    'Converts <XDSBadge>content</XDSBadge> to <XDSBadge label={content} />.',
+  pr: '#706',
+};
+
+export default function transformer(file, api) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  let hasChanges = false;
+
+  root
+    .find(j.JSXElement, {
+      openingElement: {name: {name: 'XDSBadge'}},
+    })
+    .forEach((path) => {
+      const {children} = path.node;
+
+      // Skip if already self-closing or no children
+      if (children.length === 0) return;
+
+      // Filter out whitespace-only JSXText nodes
+      const meaningful = children.filter(
+        (c) => !(c.type === 'JSXText' && !c.value.trim()),
+      );
+
+      // Only transform single-child cases
+      if (meaningful.length !== 1) return;
+
+      const child = meaningful[0];
+      let labelValue;
+
+      if (child.type === 'JSXText') {
+        const text = child.value.trim();
+        if (!text) return;
+
+        // Check if it's a number
+        if (/^\d+$/.test(text)) {
+          // <XDSBadge>3</XDSBadge> → label={3}
+          labelValue = j.jsxExpressionContainer(
+            j.numericLiteral(parseInt(text, 10)),
+          );
+        } else {
+          // <XDSBadge>Active</XDSBadge> → label="Active"
+          labelValue = j.stringLiteral(text);
+        }
+      } else if (child.type === 'JSXExpressionContainer') {
+        if (child.expression.type === 'StringLiteral') {
+          // <XDSBadge>{"text"}</XDSBadge> → label="text"
+          labelValue = j.stringLiteral(child.expression.value);
+        } else if (child.expression.type === 'NumericLiteral') {
+          // <XDSBadge>{3}</XDSBadge> → label={3}
+          labelValue = j.jsxExpressionContainer(child.expression);
+        } else {
+          // <XDSBadge>{count}</XDSBadge> → label={count}
+          labelValue = j.jsxExpressionContainer(child.expression);
+        }
+      } else {
+        // Skip JSXElement children or other complex cases
+        return;
+      }
+
+      // Add label prop
+      path.node.openingElement.attributes.push(
+        j.jsxAttribute(j.jsxIdentifier('label'), labelValue),
+      );
+
+      // Self-close
+      path.node.children = [];
+      path.node.openingElement.selfClosing = true;
+      path.node.closingElement = null;
+      hasChanges = true;
+    });
+
+  return hasChanges ? root.toSource({quote: 'single'}) : undefined;
+}

package/src/codemods/transforms/v0.0.6/migrate-collapse-to-collapsible.mjs

@@ -0,0 +1,145 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file Codemod: Migrate XDSSideNav collapse props to collapsible
+ *
+ * Transforms:
+ * - isCollapsible → collapsible
+ * - isCollapsible + isCollapsed={x} + onCollapsedChange={y} → collapsible={{ isCollapsed: x, onCollapsedChange: y }}
+ * - isCollapsible + defaultIsCollapsed → collapsible={{ defaultIsCollapsed: true }}
+ * - isCollapsible + hasCollapseButton={false} → collapsible={{ hasButton: false }}
+ * - Combinations of the above
+ *
+ * Also removes deprecated AppShell collapse props:
+ * - isSideNavCollapsed
+ * - onSideNavCollapsedChange
+ * - defaultIsSideNavCollapsed
+ */
+
+export const meta = {
+  title: 'Migrate collapse props to collapsible',
+  description:
+    'Replaces `isCollapsible` + related props on XDSSideNav with the unified `collapsible` prop. Removes deprecated AppShell collapse props.',
+};
+
+const SIDENAV_COLLAPSE_PROPS = [
+  'isCollapsible',
+  'isCollapsed',
+  'onCollapsedChange',
+  'defaultIsCollapsed',
+  'hasCollapseButton',
+];
+
+const APPSHELL_DEPRECATED_PROPS = [
+  'isSideNavCollapsed',
+  'onSideNavCollapsedChange',
+  'defaultIsSideNavCollapsed',
+];
+
+export default function transformer(file, api) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  let hasChanges = false;
+
+  // --- XDSSideNav: migrate to collapsible prop ---
+  root
+    .find(j.JSXOpeningElement, {
+      name: {name: 'XDSSideNav'},
+    })
+    .forEach((path) => {
+      const attrs = path.node.attributes;
+
+      // Find isCollapsible
+      const isCollapsibleIdx = attrs.findIndex(
+        (a) => a.type === 'JSXAttribute' && a.name.name === 'isCollapsible',
+      );
+      if (isCollapsibleIdx === -1) return;
+
+      // Collect all collapse-related props
+      const collapseProps = {};
+      const indicesToRemove = [];
+
+      for (let i = 0; i < attrs.length; i++) {
+        const attr = attrs[i];
+        if (attr.type !== 'JSXAttribute') continue;
+        const name = attr.name.name;
+        if (!SIDENAV_COLLAPSE_PROPS.includes(name)) continue;
+
+        indicesToRemove.push(i);
+
+        if (name === 'isCollapsible') {
+          // Just a flag — value doesn't matter for the config
+          continue;
+        }
+
+        if (name === 'hasCollapseButton') {
+          // Map to hasButton
+          if (
+            attr.value &&
+            attr.value.type === 'JSXExpressionContainer' &&
+            attr.value.expression.value === false
+          ) {
+            collapseProps.hasButton = j.objectProperty(
+              j.identifier('hasButton'),
+              j.booleanLiteral(false),
+            );
+          }
+          continue;
+        }
+
+        // isCollapsed, onCollapsedChange, defaultIsCollapsed
+        const value = attr.value
+          ? attr.value.type === 'JSXExpressionContainer'
+            ? attr.value.expression
+            : attr.value
+          : j.booleanLiteral(true);
+        collapseProps[name] = j.objectProperty(
+          j.identifier(name),
+          value,
+        );
+      }
+
+      // Remove old props (reverse order to preserve indices)
+      indicesToRemove.sort((a, b) => b - a);
+      for (const idx of indicesToRemove) {
+        attrs.splice(idx, 1);
+      }
+
+      // Build the new collapsible prop
+      const configKeys = Object.keys(collapseProps);
+      if (configKeys.length === 0) {
+        // Simple: isCollapsible → collapsible (boolean shorthand)
+        attrs.push(j.jsxAttribute(j.jsxIdentifier('collapsible')));
+      } else {
+        // Object form
+        const properties = Object.values(collapseProps);
+        attrs.push(
+          j.jsxAttribute(
+            j.jsxIdentifier('collapsible'),
+            j.jsxExpressionContainer(j.objectExpression(properties)),
+          ),
+        );
+      }
+
+      hasChanges = true;
+    });
+
+  // --- XDSAppShell: remove deprecated collapse props ---
+  root
+    .find(j.JSXOpeningElement, {
+      name: {name: 'XDSAppShell'},
+    })
+    .forEach((path) => {
+      const attrs = path.node.attributes;
+      for (let i = attrs.length - 1; i >= 0; i--) {
+        const attr = attrs[i];
+        if (attr.type !== 'JSXAttribute') continue;
+        if (APPSHELL_DEPRECATED_PROPS.includes(attr.name.name)) {
+          attrs.splice(i, 1);
+          hasChanges = true;
+        }
+      }
+    });
+
+  return hasChanges ? root.toSource() : undefined;
+}

package/src/codemods/transforms/v0.0.6/migrate-radius-tokens.mjs

@@ -0,0 +1,82 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file Codemod: Migrate semantic radius tokens to numeric scale
+ *
+ * Transforms:
+ * - '--radius-inner' → '--radius-0'
+ * - '--radius-content' → '--radius-1'
+ * - '--radius-element' → '--radius-2'
+ * - '--radius-container' → '--radius-3'
+ * - '--radius-page' → '--radius-4'
+ *
+ * Handles:
+ * - String literals (e.g. '--radius-container' or 'var(--radius-container)')
+ * - Template literal quasis containing the old tokens
+ * - Property access (e.g. radiusVars['--radius-container'])
+ */
+
+export const meta = {
+  title: 'Migrate semantic radius tokens to numeric scale',
+  description:
+    'Renames --radius-inner/content/element/container/page to --radius-0/1/2/3/4.',
+};
+
+const TOKEN_MAP = {
+  '--radius-inner': '--radius-0',
+  '--radius-content': '--radius-1',
+  '--radius-element': '--radius-2',
+  '--radius-container': '--radius-3',
+  '--radius-page': '--radius-4',
+};
+
+// Build a regex that matches any old token name (as a whole token, not substring)
+const OLD_TOKENS_PATTERN = new RegExp(
+  Object.keys(TOKEN_MAP)
+    .map((t) => t.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'))
+    .join('|'),
+  'g',
+);
+
+function replaceTokens(str) {
+  return str.replace(OLD_TOKENS_PATTERN, (match) => TOKEN_MAP[match] || match);
+}
+
+export default function transformer(file, api) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  let hasChanges = false;
+
+  // Replace in string literals (StringLiteral or Literal with string value)
+  const replaceInStringNode = (path) => {
+    if (typeof path.node.value !== 'string') return;
+    const original = path.node.value;
+    const replaced = replaceTokens(original);
+    if (replaced !== original) {
+      path.node.value = replaced;
+      hasChanges = true;
+    }
+  };
+
+  root.find(j.StringLiteral).forEach(replaceInStringNode);
+  root.find(j.Literal).forEach((path) => {
+    if (typeof path.node.value === 'string') {
+      replaceInStringNode(path);
+    }
+  });
+
+  // Replace in template literal quasis
+  root.find(j.TemplateLiteral).forEach((path) => {
+    for (const quasi of path.node.quasis) {
+      const original = quasi.value.raw;
+      const replaced = replaceTokens(original);
+      if (replaced !== original) {
+        quasi.value.raw = replaced;
+        quasi.value.cooked = replaceTokens(quasi.value.cooked);
+        hasChanges = true;
+      }
+    }
+  });
+
+  return hasChanges ? root.toSource() : undefined;
+}

package/src/codemods/transforms/v0.0.6/migrate-shadow-tokens.mjs

@@ -0,0 +1,111 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file Codemod: Migrate elevation tokens to shadow semantic naming
+ *
+ * Outer shadows (semantic categories):
+ *   --elevation-base   → --shadow-base
+ *   --elevation-menu   → --shadow-menu
+ *   --elevation-hover  → --shadow-hover
+ *   --elevation-dialog → --shadow-dialog
+ *
+ * Also handles brief numeric naming (shadow-1/2/3/4):
+ *   --shadow-1 → --shadow-base
+ *   --shadow-2 → --shadow-menu
+ *   --shadow-3 → --shadow-hover
+ *   --shadow-4 → --shadow-dialog
+ *
+ * Inset shadows (semantic states):
+ *   --elevation-input-hover         → --inset-shadow-border-hover
+ *   --elevation-input-hover-success → --inset-shadow-border-positive
+ *   --elevation-input-hover-warning → --inset-shadow-border-warning
+ *   --elevation-input-hover-error   → --inset-shadow-border-negative
+ *
+ * JS identifier renames:
+ *   elevationDefaults → shadowDefaults
+ *   elevationVars     → shadowVars
+ *   elevationRaw      → shadowRaw
+ *   ElevationVarName  → ShadowVarName
+ */
+
+export const meta = {
+  title: 'Migrate elevation tokens to shadow semantic naming',
+  description:
+    'Renames --elevation-* to --shadow-base/menu/hover/dialog and --inset-shadow-border-*. Also migrates --shadow-1/2/3/4 from the brief numeric naming period.',
+};
+
+const TOKEN_MAP = {
+  '--elevation-input-hover-success': '--inset-shadow-border-positive',
+  '--elevation-input-hover-warning': '--inset-shadow-border-warning',
+  '--elevation-input-hover-error': '--inset-shadow-border-negative',
+  '--elevation-input-hover': '--inset-shadow-border-hover',
+  '--elevation-base': '--shadow-base',
+  '--elevation-menu': '--shadow-menu',
+  '--elevation-hover': '--shadow-hover',
+  '--elevation-dialog': '--shadow-dialog',
+  '--shadow-1': '--shadow-base',
+  '--shadow-2': '--shadow-menu',
+  '--shadow-3': '--shadow-hover',
+  '--shadow-4': '--shadow-dialog',
+};
+
+const IDENTIFIER_MAP = {
+  elevationDefaults: 'shadowDefaults',
+  elevationVars: 'shadowVars',
+  elevationRaw: 'shadowRaw',
+  ElevationVarName: 'ShadowVarName',
+};
+
+const OLD_TOKENS_PATTERN = new RegExp(
+  Object.keys(TOKEN_MAP)
+    .sort((a, b) => b.length - a.length)
+    .map((t) => t.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'))
+    .join('|'),
+  'g',
+);
+
+function replaceTokens(str) {
+  return str.replace(OLD_TOKENS_PATTERN, (match) => TOKEN_MAP[match] || match);
+}
+
+export default function transformer(file, api) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  let hasChanges = false;
+
+  const replaceInStringNode = (path) => {
+    if (typeof path.node.value !== 'string') return;
+    const original = path.node.value;
+    const replaced = replaceTokens(original);
+    if (replaced !== original) {
+      path.node.value = replaced;
+      hasChanges = true;
+    }
+  };
+
+  root.find(j.StringLiteral).forEach(replaceInStringNode);
+  root.find(j.Literal).forEach((path) => {
+    if (typeof path.node.value === 'string') replaceInStringNode(path);
+  });
+
+  root.find(j.TemplateLiteral).forEach((path) => {
+    for (const quasi of path.node.quasis) {
+      const originalRaw = quasi.value.raw;
+      const replacedRaw = replaceTokens(originalRaw);
+      if (replacedRaw !== originalRaw) {
+        quasi.value.raw = replacedRaw;
+        quasi.value.cooked = replaceTokens(quasi.value.cooked);
+        hasChanges = true;
+      }
+    }
+  });
+
+  root.find(j.Identifier).forEach((path) => {
+    if (Object.hasOwn(IDENTIFIER_MAP, path.node.name)) {
+      path.node.name = IDENTIFIER_MAP[path.node.name];
+      hasChanges = true;
+    }
+  });
+
+  return hasChanges ? root.toSource() : undefined;
+}

package/src/codemods/transforms/v0.0.6/migrate-skeleton-radius.mjs

@@ -0,0 +1,77 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file Codemod: Migrate XDSSkeleton radius prop to numeric scale
+ *
+ * Transforms:
+ * - radius="inner" → radius={0}
+ * - radius="content" → radius={1}
+ * - radius="element" → radius={2}
+ * - radius="container" → radius={3}
+ */
+
+export const meta = {
+  title: 'Migrate XDSSkeleton radius prop to numeric scale',
+  description:
+    'Replaces semantic radius prop values (inner, content, element, container) with numeric equivalents (0, 1, 2, 3).',
+};
+
+const RADIUS_MAP = {
+  inner: 0,
+  content: 1,
+  element: 2,
+  container: 3,
+};
+
+export default function transformer(file, api) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  let hasChanges = false;
+
+  root
+    .find(j.JSXOpeningElement, {
+      name: {name: 'XDSSkeleton'},
+    })
+    .forEach((path) => {
+      const attrs = path.node.attributes;
+      for (const attr of attrs) {
+        if (attr.type !== 'JSXAttribute') continue;
+        if (attr.name.name !== 'radius') continue;
+
+        // Handle radius="container" (JSX string attribute — Literal or StringLiteral)
+        if (
+          attr.value &&
+          (attr.value.type === 'StringLiteral' ||
+            attr.value.type === 'Literal') &&
+          typeof attr.value.value === 'string'
+        ) {
+          const oldValue = attr.value.value;
+          if (oldValue in RADIUS_MAP) {
+            attr.value = j.jsxExpressionContainer(
+              j.numericLiteral(RADIUS_MAP[oldValue]),
+            );
+            hasChanges = true;
+          }
+        }
+
+        // Handle radius={"container"} (expression container with string)
+        if (
+          attr.value &&
+          attr.value.type === 'JSXExpressionContainer' &&
+          (attr.value.expression.type === 'StringLiteral' ||
+            attr.value.expression.type === 'Literal') &&
+          typeof attr.value.expression.value === 'string'
+        ) {
+          const oldValue = attr.value.expression.value;
+          if (oldValue in RADIUS_MAP) {
+            attr.value = j.jsxExpressionContainer(
+              j.numericLiteral(RADIUS_MAP[oldValue]),
+            );
+            hasChanges = true;
+          }
+        }
+      }
+    });
+
+  return hasChanges ? root.toSource() : undefined;
+}

package/src/codemods/transforms/v0.0.6/migrate-token-names.mjs

@@ -0,0 +1,158 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file Codemod: Migrate renamed design tokens from v0.0.6 naming audit
+ *
+ * Renames all tokens updated in the naming audit:
+ *
+ * Color — semantic clarity:
+ * - '--color-accent-deemphasized' → '--color-accent-muted'
+ * - '--color-accent-text' → '--color-text-link'
+ * - '--color-deemphasized' → '--color-muted'
+ * - '--color-positive' → '--color-success'
+ * - '--color-positive-deemphasized' → '--color-success-muted'
+ * - '--color-negative' → '--color-error'
+ * - '--color-negative-deemphasized' → '--color-error-muted'
+ * - '--color-educational' → '--color-info'
+ * - '--color-educational-deemphasized' → '--color-info-muted'
+ * - '--color-warning-deemphasized' → '--color-warning-muted'
+ *
+ * Color — noun-first grammar:
+ * - '--color-hover-overlay' → '--color-overlay-hover'
+ * - '--color-pressed-overlay' → '--color-overlay-pressed'
+ * - '--color-disabled-overlay' → '--color-overlay-disabled'
+ * - '--color-focus-outline' → '--color-ring-focus'
+ * - '--color-focus-outline-error' → '--color-ring-focus-error'
+ * - '--color-focus-outline-success' → '--color-ring-focus-success'
+ * - '--color-focus-outline-warning' → '--color-ring-focus-warning'
+ *
+ * Color — border/divider:
+ * - '--color-divider' → '--color-border'
+ * - '--color-divider-high-contrast' → '--color-border-strong'
+ * - '--color-divider-emphasized' → '--color-border-emphasized'
+ *
+ * Color — effects:
+ * - '--color-glimmer' → '--color-skeleton'
+ * - '--color-shadow-elevation' → '--color-shadow'
+ *
+ * Color — media:
+ * - '--color-text-on-media' → '--color-text-on-dark-media'
+ * - '--color-icon-on-media' → '--color-icon-on-dark-media'
+ *
+ * Color — removals (replaced by existing tokens):
+ * - '--color-text-placeholder' → '--color-text-secondary'
+ * - '--color-icon-tertiary' → '--color-icon-secondary'
+ *
+ * Inset shadow (Tailwind alignment):
+ * - '--insetshadow-border-*' → '--inset-shadow-border-*'
+ *
+ * Easing (Tailwind alignment):
+ * - '--easing-standard' → '--ease-standard'
+ *
+ * Note: --color-accent is NOT renamed (kept as-is to avoid ambiguity
+ * with --color-text-primary and --color-icon-primary).
+ *
+ * Handles:
+ * - String literals (e.g. '--color-accent' or 'var(--color-accent)')
+ * - Template literal quasis containing old tokens
+ * - Property access (e.g. colorVars['--color-accent'])
+ */
+
+export const meta = {
+  title: 'Migrate renamed design tokens',
+  description:
+    'Renames color tokens from the v0.0.6 naming audit (positive→success, negative→error, divider→border, etc.).',
+};
+
+// Ordered longest-first to prevent partial matches
+// (e.g. --color-educational-deemphasized must match before --color-educational)
+const TOKEN_MAP = {
+  '--color-educational-deemphasized': '--color-info-muted',
+  '--color-divider-high-contrast': '--color-border-strong',
+  '--color-focus-outline-success': '--color-ring-focus-success',
+  '--color-focus-outline-warning': '--color-ring-focus-warning',
+  '--color-negative-deemphasized': '--color-error-muted',
+  '--color-positive-deemphasized': '--color-success-muted',
+  '--color-warning-deemphasized': '--color-warning-muted',
+  '--color-accent-deemphasized': '--color-accent-muted',
+  '--color-focus-outline-error': '--color-ring-focus-error',
+  '--color-divider-emphasized': '--color-border-emphasized',
+  '--color-disabled-overlay': '--color-overlay-disabled',
+  '--color-shadow-elevation': '--color-shadow',
+  '--color-text-placeholder': '--color-text-secondary',
+  '--color-pressed-overlay': '--color-overlay-pressed',
+  '--color-focus-outline': '--color-ring-focus',
+  '--color-hover-overlay': '--color-overlay-hover',
+  '--color-icon-on-media': '--color-icon-on-dark-media',
+  '--color-icon-tertiary': '--color-icon-secondary',
+  '--color-text-on-media': '--color-text-on-dark-media',
+  '--color-deemphasized': '--color-muted',
+  '--color-accent-text': '--color-text-link',
+  '--color-educational': '--color-info',
+  '--color-negative': '--color-error',
+  '--color-positive': '--color-success',
+  '--color-divider': '--color-border',
+  '--color-glimmer': '--color-skeleton',
+  // Inset shadow: insetshadow → inset-shadow (Tailwind alignment)
+  '--insetshadow-border-positive': '--inset-shadow-border-positive',
+  '--insetshadow-border-negative': '--inset-shadow-border-negative',
+  '--insetshadow-border-warning': '--inset-shadow-border-warning',
+  '--insetshadow-border-accent': '--inset-shadow-border-accent',
+  '--insetshadow-border-hover': '--inset-shadow-border-hover',
+  // Easing: easing → ease (Tailwind alignment)
+  '--easing-standard': '--ease-standard',
+};
+
+// Build a regex that matches any old token name, longest first.
+// Uses negative lookahead for word-like chars to avoid partial matches
+// (e.g. --color-accent must not match inside --color-accent-deemphasized).
+const OLD_TOKENS_PATTERN = new RegExp(
+  Object.keys(TOKEN_MAP)
+    .sort((a, b) => b.length - a.length)
+    .map((t) => t.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'))
+    .join('|') + '(?![a-zA-Z0-9_-])',
+  'g',
+);
+
+function replaceTokens(str) {
+  return str.replace(OLD_TOKENS_PATTERN, (match) => TOKEN_MAP[match] || match);
+}
+
+export default function transformer(file, api) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  let hasChanges = false;
+
+  // Replace in string literals (StringLiteral or Literal with string value)
+  const replaceInStringNode = (path) => {
+    if (typeof path.node.value !== 'string') return;
+    const original = path.node.value;
+    const replaced = replaceTokens(original);
+    if (replaced !== original) {
+      path.node.value = replaced;
+      hasChanges = true;
+    }
+  };
+
+  root.find(j.StringLiteral).forEach(replaceInStringNode);
+  root.find(j.Literal).forEach((path) => {
+    if (typeof path.node.value === 'string') {
+      replaceInStringNode(path);
+    }
+  });
+
+  // Replace in template literal quasis
+  root.find(j.TemplateLiteral).forEach((path) => {
+    for (const quasi of path.node.quasis) {
+      const original = quasi.value.raw;
+      const replaced = replaceTokens(original);
+      if (replaced !== original) {
+        quasi.value.raw = replaced;
+        quasi.value.cooked = replaceTokens(quasi.value.cooked);
+        hasChanges = true;
+      }
+    }
+  });
+
+  return hasChanges ? root.toSource() : undefined;
+}