@astryxdesign/cli 0.1.7 → 0.1.8-canary.08a0957

package/src/codemods/transforms/v0.1.0/drop-xds-prefix-imports.mjs

@@ -35,11 +35,19 @@
  *    including type references in generic type-argument positions such as
  *    `useMemo<XDSTableColumn<Issue>[]>(...)`
  * 3. Re-exports from @xds/core: export {XDSButton} from '@xds/core/Button'
+ * 4. Object-property keys inside a test-framework mock factory for an
+ *    `@xds/core` module: the partial-mock override in
+ *    `vi.mock('@xds/core/Text', async orig => ({...await orig(),
+ *    useXDSTruncation: () => ...}))` must be un-prefixed to `useTruncation`,
+ *    otherwise the key targets a name the renamed module no longer exports and
+ *    the mock silently overrides nothing.
  *
  * Does NOT touch:
  * - import source paths (`@xds/core/Button` stays -- subpath dirs are unchanged
  *   by the prefix migration)
  * - identifiers not bound to an @xds/core import
+ * - object-property keys outside an `@xds/core` mock factory (an unrelated
+ *   `{useXDSFoo: ...}` literal, or a mock of some other package, is untouched)
  * - the `XDSBaseProps`-style names only when they are NOT imported from core
  */
 
@@ -48,7 +56,8 @@ export const meta = {
   description:
     'Rewrites @xds/core imports and their usages from the prefixed names ' +
     '(XDSButton, useXDSTheme, XDSIconRegistry, XDSButtonProps) to their bare ' +
-    'names (Button, useTheme, IconRegistry, ButtonProps). Only renames ' +
+    'names (Button, useTheme, IconRegistry, ButtonProps), including override ' +
+    'keys in a vi.mock/jest.mock factory for an @xds/core module. Only renames ' +
     'bindings imported from @xds/core, leaving unrelated identifiers untouched.',
   pr: '#2880',
 };
@@ -74,6 +83,81 @@ function bareName(name) {
   return null;
 }
 
+// A test-framework mock of an `@xds/core` module (`vi.mock('@xds/core/Text',
+// factory)`). We only rewrite override keys inside such a factory, so scope the
+// detection tightly: callee must be `vi.mock`/`vi.doMock`/`jest.mock`/
+// `jest.doMock` (or a bare `mock`) AND the first argument must be a string
+// literal that resolves to `@xds/core` (bare or subpath).
+const MOCK_METHOD_NAMES = new Set(['mock', 'doMock']);
+const MOCK_OBJECT_NAMES = new Set(['vi', 'jest']);
+
+function isMockCallee(callee) {
+  if (
+    callee.type === 'MemberExpression' &&
+    !callee.computed &&
+    callee.object.type === 'Identifier' &&
+    MOCK_OBJECT_NAMES.has(callee.object.name) &&
+    callee.property.type === 'Identifier' &&
+    MOCK_METHOD_NAMES.has(callee.property.name)
+  ) {
+    return true;
+  }
+  return callee.type === 'Identifier' && callee.name === 'mock';
+}
+
+function isXdsCoreMockCall(node) {
+  if (node.type !== 'CallExpression' || !isMockCallee(node.callee))
+    return false;
+  const [arg] = node.arguments;
+  const value =
+    arg && (arg.type === 'StringLiteral' || arg.type === 'Literal')
+      ? arg.value
+      : null;
+  return typeof value === 'string' && XDS_CORE_SOURCE.test(value);
+}
+
+// Rename XDS-prefixed object-property KEYS (not values, not nested objects)
+// within the given AST subtree. Used only on a recognized @xds/core mock
+// factory, so the scope guard lives at the call site.
+function renameMockFactoryKeys(node, seen, onChange) {
+  if (!node || typeof node !== 'object') return;
+  if (Array.isArray(node)) {
+    for (const child of node) renameMockFactoryKeys(child, seen, onChange);
+    return;
+  }
+  if (seen.has(node)) return;
+  seen.add(node);
+
+  if (
+    (node.type === 'ObjectProperty' || node.type === 'Property') &&
+    !node.computed &&
+    node.key &&
+    node.key.type === 'Identifier'
+  ) {
+    const bare = bareName(node.key.name);
+    if (bare && bare !== node.key.name) {
+      node.key.name = bare;
+      onChange();
+    }
+  }
+
+  for (const key of Object.keys(node)) {
+    if (
+      key === 'loc' ||
+      key === 'start' ||
+      key === 'end' ||
+      key === 'range' ||
+      key === 'comments' ||
+      key === 'leadingComments' ||
+      key === 'trailingComments' ||
+      key === 'tokens'
+    ) {
+      continue;
+    }
+    renameMockFactoryKeys(node[key], seen, onChange);
+  }
+}
+
 export default function transformer(file, api) {
   const j = api.jscodeshift;
   const root = j(file.source);
@@ -190,11 +274,26 @@ export default function transformer(file, api) {
     }
   });
 
+  // 3. Un-prefix override keys inside @xds/core mock factories. Independent of
+  // the import bindings above: the override key is a factory object property,
+  // not a reference to an imported binding, so it must match the renamed export
+  // name of the mocked module regardless of what the file imports.
+  const seenMockNodes = new Set();
+  root.find(j.CallExpression).forEach(path => {
+    if (!isXdsCoreMockCall(path.node)) return;
+    // Only walk the factory argument(s), never the module-path string.
+    for (const arg of path.node.arguments.slice(1)) {
+      renameMockFactoryKeys(arg, seenMockNodes, () => {
+        hasChanges = true;
+      });
+    }
+  });
+
   if (localRenames.size === 0) {
     return hasChanges ? root.toSource() : undefined;
   }
 
-  // 3. Rename references to renamed local bindings
+  // 4. Rename references to renamed local bindings
   // Identifiers (type refs, value refs, etc.)
   root.find(j.Identifier).forEach(path => {
     const newName = localRenames.get(path.node.name);
@@ -231,7 +330,7 @@ export default function transformer(file, api) {
     }
   });
 
-  // 4. Rename TS type references in generic type-argument positions.
+  // 5. Rename TS type references in generic type-argument positions.
   //
   // `j.find(j.Identifier)` (and `j.find(j.TSTypeReference)`) do NOT visit
   // identifiers nested inside generic type arguments with the tsx/babel parser

package/src/codemods/transforms/v0.1.0/migrate-xds-module-specifiers.mjs

@@ -12,8 +12,9 @@
 export const meta = {
   title: 'Migrate module specifiers from @xds/* to @astryxdesign/*',
   description:
-    'Updates JS/TS import, export, dynamic import, and require module ' +
-    'specifiers from @xds/* to the @astryxdesign/* packages used by Astryx v0.1.0.',
+    'Updates JS/TS import, export, dynamic import, require, TS import-type, ' +
+    'and test-framework mock (vi.mock / jest.mock) module specifiers from ' +
+    '@xds/* to the @astryxdesign/* packages used by Astryx v0.1.0.',
   pr: '#3092',
   fileExtensions: ['.js', '.jsx', '.ts', '.tsx', '.mjs', '.cjs'],
 };
@@ -73,6 +74,30 @@ function isCollapsedThemeSource(value) {
   return false;
 }
 
+// Test-framework mock calls take the mocked module path as their first
+// argument (`vi.mock('@xds/core/Text', factory)`). That path is a plain string
+// literal -- not an ImportDeclaration source -- so it slips past the import/
+// export handlers and, left unrewritten, the mock would target the stale
+// `@xds/*` path and stop intercepting the renamed `@astryxdesign/*` import.
+// Recognized callees: `vi.mock`, `vi.doMock`, `jest.mock`, `jest.doMock`, and
+// a bare `mock(...)` (destructured from the test runner).
+const MOCK_METHOD_NAMES = new Set(['mock', 'doMock']);
+const MOCK_OBJECT_NAMES = new Set(['vi', 'jest']);
+
+function isMockCall(callee) {
+  if (
+    callee.type === 'MemberExpression' &&
+    !callee.computed &&
+    callee.object.type === 'Identifier' &&
+    MOCK_OBJECT_NAMES.has(callee.object.name) &&
+    callee.property.type === 'Identifier' &&
+    MOCK_METHOD_NAMES.has(callee.property.name)
+  ) {
+    return true;
+  }
+  return callee.type === 'Identifier' && callee.name === 'mock';
+}
+
 function remapThemeExportNames(importPath, j) {
   let changed = false;
   importPath.node.specifiers = (importPath.node.specifiers || []).map(spec => {
@@ -118,12 +143,53 @@ export default function transformer(file, api) {
     const isRequire =
       path.node.callee.type === 'Identifier' &&
       path.node.callee.name === 'require';
-    if (!isDynamicImport && !isRequire) return;
-    const [arg] = path.node.arguments;
-    if (arg?.type === 'StringLiteral' || arg?.type === 'Literal') {
-      hasChanges = rewriteLiteral(arg) || hasChanges;
+    if (isDynamicImport || isRequire || isMockCall(path.node.callee)) {
+      const [arg] = path.node.arguments;
+      if (arg?.type === 'StringLiteral' || arg?.type === 'Literal') {
+        hasChanges = rewriteLiteral(arg) || hasChanges;
+      }
     }
   });
 
+  // TS `import(...)` TYPE specifiers -- e.g. the `import('@xds/core/Text')` in
+  // `typeof import('@xds/core/Text')` -- parse to a `TSImportType` node, not a
+  // dynamic-import CallExpression, so the handler above never reaches them.
+  // ast-types' traversal also doesn't descend into a `TSImportType` nested in a
+  // generic type-argument position (e.g. `orig<typeof import('@xds/core/Text')>()`),
+  // so `j.find(j.TSImportType)` misses it. Walk the raw AST to cover every
+  // position. Re-visiting a node the loop above handled is harmless: the
+  // literal is already rewritten, so the second pass is a no-op.
+  const seenTypeImportNodes = new Set();
+  const rewriteTSImportTypes = node => {
+    if (!node || typeof node !== 'object') return;
+    if (Array.isArray(node)) {
+      for (const child of node) rewriteTSImportTypes(child);
+      return;
+    }
+    if (seenTypeImportNodes.has(node)) return;
+    seenTypeImportNodes.add(node);
+
+    if (node.type === 'TSImportType' && node.argument) {
+      hasChanges = rewriteLiteral(node.argument) || hasChanges;
+    }
+
+    for (const key of Object.keys(node)) {
+      if (
+        key === 'loc' ||
+        key === 'start' ||
+        key === 'end' ||
+        key === 'range' ||
+        key === 'comments' ||
+        key === 'leadingComments' ||
+        key === 'trailingComments' ||
+        key === 'tokens'
+      ) {
+        continue;
+      }
+      rewriteTSImportTypes(node[key]);
+    }
+  };
+  rewriteTSImportTypes(root.get().node);
+
   return hasChanges ? root.toSource() : undefined;
 }

package/src/codemods/transforms/v0.1.8/__tests__/rename-avatar-size-scale.test.mjs

@@ -0,0 +1,161 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+import {describe, it, expect} from 'vitest';
+
+async function applyTransform(source) {
+  const {default: transform} = await import('../rename-avatar-size-scale.mjs');
+  const jscodeshift = (await import('jscodeshift')).default;
+  const j = jscodeshift.withParser('tsx');
+  const api = {jscodeshift: j, stats: () => {}, report: () => {}};
+  const file = {source, path: 'test.tsx'};
+  const result = transform(file, api);
+  return result ?? source;
+}
+
+describe('rename-avatar-size-scale', () => {
+  it('renames every named size on an Avatar JSX size attribute', async () => {
+    const input = `import {Avatar} from '@astryxdesign/core';
+const a = <Avatar name="A" size="tiny" />;
+const b = <Avatar name="B" size="xsmall" />;
+const c = <Avatar name="C" size="small" />;
+const d = <Avatar name="D" size="medium" />;
+const e = <Avatar name="E" size="large" />;`;
+    const output = await applyTransform(input);
+    expect(output).toContain(`size='xsm'`);
+    expect(output).toContain(`size='sm'`);
+    expect(output).toContain(`size='md'`);
+    expect(output).toContain(`size='lg'`);
+    expect(output).toContain(`size='xl'`);
+    for (const old of ['tiny', 'xsmall', 'small', 'medium', 'large']) {
+      expect(output).not.toContain(`size="${old}"`);
+    }
+  });
+
+  it('renames size on AvatarGroup', async () => {
+    const input = `import {AvatarGroup} from '@astryxdesign/core';
+const x = <AvatarGroup size="medium">{kids}</AvatarGroup>;`;
+    const output = await applyTransform(input);
+    expect(output).toContain(`size='lg'`);
+  });
+
+  it('leaves numeric sizes untouched', async () => {
+    const input = `import {Avatar} from '@astryxdesign/core';
+const x = <Avatar name="A" size={48} />;`;
+    const output = await applyTransform(input);
+    expect(output).toContain('size={48}');
+  });
+
+  it('is alias-aware', async () => {
+    const input = `import {Avatar as Face} from '@astryxdesign/core';
+const x = <Face name="A" size="small" />;`;
+    const output = await applyTransform(input);
+    expect(output).toContain(`size='md'`);
+  });
+
+  it('renames the subpath and legacy import sources', async () => {
+    const sub = `import {Avatar} from '@astryxdesign/core/Avatar';
+const x = <Avatar name="A" size="large" />;`;
+    expect(await applyTransform(sub)).toContain(`size='xl'`);
+    const legacy = `import {Avatar} from '@xds/core';
+const x = <Avatar name="A" size="tiny" />;`;
+    expect(await applyTransform(legacy)).toContain(`size='xsm'`);
+  });
+
+  it('renames a size inside a ternary on an Avatar element', async () => {
+    const input = `import {Avatar} from '@astryxdesign/core';
+const x = <Avatar name="A" size={big ? 'large' : 'small'} />;`;
+    const output = await applyTransform(input);
+    expect(output).toContain(`big ? 'xl' : 'md'`);
+  });
+
+  it('renames the UNIQUE names tiny/xsmall in Storybook options and size args', async () => {
+    const input = `import {Avatar} from '@astryxdesign/core';
+const meta = {
+  argTypes: {size: {control: 'select', options: ['tiny', 'xsmall']}},
+  args: {size: 'tiny'},
+};`;
+    const output = await applyTransform(input);
+    expect(output).toContain(`['xsm', 'sm']`);
+    expect(output).toContain(`size: 'xsm'`);
+  });
+
+  it('renames a FULL Storybook options array (unique name unlocks ambiguous members)', async () => {
+    // The presence of a unique name (tiny/xsmall) proves the whole array is the
+    // Avatar size enum, so small/medium/large in it are safe to rename too.
+    const input = `import {Avatar} from '@astryxdesign/core';
+const meta = {
+  argTypes: {size: {control: 'select', options: ['tiny', 'xsmall', 'small', 'medium', 'large']}},
+};`;
+    const output = await applyTransform(input);
+    expect(output).toContain(`['xsm', 'sm', 'md', 'lg', 'xl']`);
+  });
+
+  it('renames a standalone Avatar-size array literal used with .map()', async () => {
+    const input = `import {AvatarGroup} from '@astryxdesign/core';
+const sizes = (['tiny', 'xsmall', 'small', 'medium', 'large'] as const).map(s => s);`;
+    const output = await applyTransform(input);
+    expect(output).toContain(`['xsm', 'sm', 'md', 'lg', 'xl']`);
+  });
+
+  it('does NOT rename an array of ambiguous words with no unique Avatar name', async () => {
+    // Without tiny/xsmall, the array could be anything (priorities, densities),
+    // so ambiguous members are left untouched.
+    const input = `import {Avatar} from '@astryxdesign/core';
+const densities = ['small', 'medium', 'large'] as const;`;
+    const output = await applyTransform(input);
+    expect(output).toContain(`['small', 'medium', 'large']`);
+  });
+
+  it('renames a UNIQUE name in a size-typed union literal', async () => {
+    const input = `import {Avatar} from '@astryxdesign/core';
+type Props = {size: 'tiny' | 'xsmall'};`;
+    const output = await applyTransform(input);
+    expect(output).toContain(`'xsm' | 'sm'`);
+  });
+
+  // --- Precision guards: ambiguous common words must NOT be corrupted in
+  // --- context-blind positions, even in files that import Avatar. ---
+
+  it('does NOT rename ambiguous names in an unrelated union type', async () => {
+    const input = `import {Avatar} from '@astryxdesign/core';
+type TaskPriority = 'urgent' | 'high' | 'medium' | 'low' | 'none';`;
+    const output = await applyTransform(input);
+    expect(output).toContain(`'medium'`);
+    expect(output).not.toContain(`'lg'`);
+  });
+
+  it('does NOT rename an ambiguous name in a non-size object property', async () => {
+    const input = `import {Avatar} from '@astryxdesign/core';
+const cfg = {priority: 'medium', density: 'large'};`;
+    const output = await applyTransform(input);
+    expect(output).toContain(`priority: 'medium'`);
+    expect(output).toContain(`density: 'large'`);
+  });
+
+  it('does NOT rename an ambiguous name in a size-keyed object property (component unknown)', async () => {
+    // A `size: 'small'` object entry could belong to any component; renaming it
+    // blind would be unsafe, so it is left for manual migration.
+    const input = `import {Avatar} from '@astryxdesign/core';
+const args = {size: 'small'};`;
+    const output = await applyTransform(input);
+    expect(output).toContain(`size: 'small'`);
+  });
+
+  it('does not touch files that never import Avatar/AvatarGroup', async () => {
+    const input = `import {Badge} from '@astryxdesign/core';
+const x = <Badge size="small" />;
+type P = 'tiny' | 'xsmall';`;
+    const output = await applyTransform(input);
+    expect(output).toContain(`size="small"`);
+    expect(output).toContain(`'tiny' | 'xsmall'`);
+  });
+
+  it('does not rename an unrelated non-size string in an Avatar file', async () => {
+    const input = `import {Avatar} from '@astryxdesign/core';
+const label = 'small';
+const x = <Avatar name="A" size="small" />;`;
+    const output = await applyTransform(input);
+    expect(output).toContain(`const label = 'small'`);
+    expect(output).toContain(`size='md'`);
+  });
+});

package/src/codemods/transforms/v0.1.8/index.mjs

@@ -0,0 +1,19 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file v0.1.8 transform manifest
+ *
+ * Lists all codemods for the v0.1.8 release in the order they should run.
+ */
+
+import renameAvatarSizeScale, {
+  meta as renameAvatarSizeScaleMeta,
+} from './rename-avatar-size-scale.mjs';
+
+export default [
+  {
+    name: 'rename-avatar-size-scale',
+    transform: renameAvatarSizeScale,
+    meta: renameAvatarSizeScaleMeta,
+  },
+];

package/src/codemods/transforms/v0.1.8/rename-avatar-size-scale.mjs

@@ -0,0 +1,234 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file Codemod: Rename Avatar named sizes to Icon's abbreviated scale
+ * @see https://github.com/facebook/astryx/issues/2672
+ *
+ * As of v0.1.8, Avatar and AvatarGroup use the same abbreviated size scale as
+ * Icon (`xsm`/`sm`/`md`/`lg`/`xl`) instead of full words. Pixel values are
+ * unchanged — only the names move:
+ *
+ *   tiny (20px)   → xsm
+ *   xsmall (24px) → sm
+ *   small (36px)  → md   ← also the new default (was `small`)
+ *   medium (48px) → lg
+ *   large (128px) → xl
+ *
+ * The default size shifts from `small` to `md`, but that is the SAME 36px, so
+ * call sites that relied on the default need no change.
+ *
+ * ## Precision
+ *
+ * `small`, `medium`, and `large` are common English words that appear as
+ * unrelated string/type literals (priorities, statuses, breakpoints, …). To
+ * avoid corrupting those, the three AMBIGUOUS names are renamed ONLY in a
+ * precise context: a `size` JSX attribute on a component that resolves to an
+ * Avatar/AvatarGroup import (alias-aware).
+ *
+ * `tiny` and `xsmall` are unique to Avatar's scale, so they are additionally
+ * renamed in context-blind positions (object properties keyed `size`/`*Size`,
+ * Storybook `options` arrays, and size-typed union literals) within files that
+ * import Avatar/AvatarGroup.
+ */
+
+export const meta = {
+  title: 'Rename Avatar named sizes tiny/xsmall/small/medium/large → xsm/sm/md/lg/xl',
+  description:
+    'Avatar and AvatarGroup adopt Icon\'s abbreviated size scale ' +
+    '(xsm/sm/md/lg/xl). Pixel values are unchanged; the default moves from ' +
+    '`small` to `md` (both 36px). The ambiguous names small/medium/large are ' +
+    'only renamed on Avatar/AvatarGroup `size` JSX attributes; the unique ' +
+    'names tiny/xsmall are also renamed in size-keyed props, Storybook ' +
+    'options, and union types in files importing Avatar/AvatarGroup.',
+  pr: '#2672',
+};
+
+/** Import sources that provide the Astryx Avatar/AvatarGroup components. */
+const IMPORT_SOURCES = new Set([
+  '@astryxdesign/core',
+  '@astryxdesign/core/Avatar',
+  '@astryxdesign/core/AvatarGroup',
+  '@xds/core',
+  '@xds/core/Avatar',
+  '@xds/core/AvatarGroup',
+]);
+
+/** Component names whose `size` prop is renamed. */
+const TARGET_IMPORTED_NAMES = new Set(['Avatar', 'AvatarGroup']);
+
+/** Old → new size-name mapping. */
+const RENAMES = new Map([
+  ['tiny', 'xsm'],
+  ['xsmall', 'sm'],
+  ['small', 'md'],
+  ['medium', 'lg'],
+  ['large', 'xl'],
+]);
+
+/**
+ * Ambiguous names — common words that must ONLY be renamed in a precise
+ * context. `tiny`/`xsmall` are omitted because they are unique to Avatar's
+ * scale; their presence in a collection proves it is an Avatar size enum.
+ */
+const AMBIGUOUS = new Set(['small', 'medium', 'large']);
+
+/** Names that appear only in Avatar's scale — safe signals of Avatar sizing. */
+const UNIQUE = new Set(['tiny', 'xsmall']);
+
+/**
+ * Rename a string-literal node if its value is an old size name.
+ * Unwraps `'small' as const`. In non-precise contexts, ambiguous names are
+ * skipped. Returns true when a rename occurred.
+ */
+function renameValue(node, {precise = false} = {}) {
+  if (!node) return false;
+  const target = node.type === 'TSAsExpression' ? node.expression : node;
+  const isString =
+    target.type === 'StringLiteral' || target.type === 'Literal';
+  if (!isString || typeof target.value !== 'string') return false;
+  const replacement = RENAMES.get(target.value);
+  if (!replacement) return false;
+  if (!precise && AMBIGUOUS.has(target.value)) return false;
+  target.value = replacement;
+  if (target.raw) target.raw = undefined;
+  return true;
+}
+
+/** Extract a plain string value from a literal-ish node, or null. */
+function literalString(node) {
+  const target = node?.type === 'TSAsExpression' ? node.expression : node;
+  if (
+    target &&
+    (target.type === 'StringLiteral' || target.type === 'Literal') &&
+    typeof target.value === 'string'
+  ) {
+    return target.value;
+  }
+  return null;
+}
+
+export default function transformer(file, api) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  let hasChanges = false;
+
+  // Track alias-aware local names for the target components.
+  const targetLocals = new Set();
+  root.find(j.ImportDeclaration).forEach((path) => {
+    if (!IMPORT_SOURCES.has(path.node.source.value)) return;
+    for (const spec of path.node.specifiers ?? []) {
+      if (
+        spec.type === 'ImportSpecifier' &&
+        TARGET_IMPORTED_NAMES.has(spec.imported.name)
+      ) {
+        targetLocals.add(spec.local.name);
+      }
+    }
+  });
+
+  if (targetLocals.size === 0) return undefined;
+
+  function renameArrayElements(node) {
+    let arr = node;
+    if (arr.type === 'TSAsExpression') arr = arr.expression;
+    if (arr.type !== 'ArrayExpression') return;
+    // If the array contains a name unique to Avatar's scale (tiny/xsmall), the
+    // whole collection is unambiguously the Avatar size enum, so it is safe to
+    // rename the ambiguous members too. Otherwise stay conservative.
+    const precise = arr.elements.some((el) => UNIQUE.has(literalString(el)));
+    for (const el of arr.elements) {
+      if (renameValue(el, {precise})) hasChanges = true;
+    }
+  }
+
+  // 1. `size` JSX attributes on target components — PRECISE (component known),
+  //    so all five names, including the ambiguous ones, are renamed here.
+  root.find(j.JSXOpeningElement).forEach((path) => {
+    const name = path.node.name;
+    const componentName = name.type === 'JSXIdentifier' ? name.name : null;
+    if (!componentName || !targetLocals.has(componentName)) return;
+
+    for (const attr of path.node.attributes) {
+      if (attr.type !== 'JSXAttribute' || attr.name?.name !== 'size') continue;
+      const value = attr.value;
+
+      // size="small"
+      if (renameValue(value, {precise: true})) {
+        hasChanges = true;
+        continue;
+      }
+      if (
+        value &&
+        value.type === 'JSXExpressionContainer' &&
+        value.expression
+      ) {
+        // size={'small'}
+        if (renameValue(value.expression, {precise: true})) {
+          hasChanges = true;
+          continue;
+        }
+        // size={cond ? 'small' : 'large'}
+        if (value.expression.type === 'ConditionalExpression') {
+          if (renameValue(value.expression.consequent, {precise: true}))
+            hasChanges = true;
+          if (renameValue(value.expression.alternate, {precise: true}))
+            hasChanges = true;
+        }
+      }
+    }
+  });
+
+  // 2. Object properties keyed `size` (or `*Size`) + Storybook `options`
+  //    arrays — NON-PRECISE (the component isn't known here), so only the
+  //    unique names tiny/xsmall are renamed.
+  const PropertyType = j.ObjectProperty ?? j.Property;
+  root.find(PropertyType).forEach((path) => {
+    const key = path.node.key;
+    const keyName =
+      key.type === 'Identifier'
+        ? key.name
+        : key.type === 'StringLiteral' || key.type === 'Literal'
+          ? key.value
+          : null;
+    if (typeof keyName !== 'string') return;
+
+    const lower = keyName.toLowerCase();
+    if (lower !== 'size' && !lower.endsWith('size')) return;
+
+    const value = path.node.value;
+    // size: 'tiny'
+    if (renameValue(value)) {
+      hasChanges = true;
+      return;
+    }
+    // size: { control: 'select', options: ['tiny', ...] }
+    if (value.type === 'ObjectExpression') {
+      const optionsProp = value.properties.find(
+        (p) => p.key && (p.key.name === 'options' || p.key.value === 'options'),
+      );
+      if (optionsProp) renameArrayElements(optionsProp.value);
+    }
+    // size: ['tiny', 'xsmall', ...]
+    renameArrayElements(value);
+  });
+
+  // 3. Union-type literals — NON-PRECISE, so only the unique names tiny/xsmall
+  //    are renamed. This avoids corrupting unrelated unions that happen to use
+  //    common words like 'medium' (e.g. a priority or breakpoint type) in a
+  //    file that also imports Avatar.
+  root.find(j.TSLiteralType).forEach((path) => {
+    if (renameValue(path.node.literal)) hasChanges = true;
+  });
+
+  // 4. Standalone array literals whose members are exactly the Avatar size
+  //    scale (identified by the presence of a unique name like tiny/xsmall) —
+  //    e.g. `(['tiny', 'xsmall', 'small', 'medium', 'large'] as const).map(...)`
+  //    used to render every size. The unique name proves the whole array is the
+  //    Avatar enum, so its ambiguous members can be renamed safely.
+  root.find(j.ArrayExpression).forEach((path) => {
+    renameArrayElements(path.node);
+  });
+
+  if (!hasChanges) return undefined;
+  return root.toSource({quote: 'single'});
+}