@sanity/ui-codemod 1.0.0-alpha.4 → 1.0.0-alpha.5

package/dist/_chunks-es/flex.mods.js

@@ -1,4 +1,151 @@
+import { getComponentLocalNames, insertTodoWarning } from "./transformComponent.js";
+import { readFileSync, existsSync } from "node:fs";
+import { resolve, dirname, join } from "node:path";
 import { LAYOUT_MODS } from "./layout-mods.js";
+const parseCache = /* @__PURE__ */ new Map();
+function parseModule(j, filePath) {
+  const cached = parseCache.get(filePath);
+  if (cached)
+    return cached;
+  try {
+    const source = readFileSync(filePath, "utf8"), root = j(source);
+    return parseCache.set(filePath, root), root;
+  } catch {
+    return null;
+  }
+}
+const EXTENSIONS = [".tsx", ".ts", ".jsx", ".js"];
+function resolveRelativeModulePath(fromFilePath, moduleSpecifier) {
+  if (!moduleSpecifier.startsWith("."))
+    return null;
+  const base = resolve(dirname(fromFilePath), moduleSpecifier);
+  for (const ext of EXTENSIONS) {
+    const filePath = `${base}${ext}`;
+    if (existsSync(filePath))
+      return filePath;
+  }
+  for (const ext of EXTENSIONS) {
+    const indexPath = join(base, `index${ext}`);
+    if (existsSync(indexPath))
+      return indexPath;
+  }
+  return existsSync(base) ? base : null;
+}
+function findVariableInit(j, root, name) {
+  let init = null;
+  return root.find(j.VariableDeclarator).forEach((path) => {
+    const { id } = path.node;
+    id.type === "Identifier" && id.name === name && path.node.init && (init = path.node.init);
+  }), init;
+}
+function getExportSpecifierName(exported) {
+  return exported.type === "Identifier" || exported.type === "JSXIdentifier" ? exported.name : null;
+}
+function getNamedExportInit(j, exportName, filePath, visited = /* @__PURE__ */ new Set()) {
+  if (visited.has(filePath))
+    return null;
+  visited.add(filePath);
+  const root = parseModule(j, filePath);
+  if (!root)
+    return null;
+  for (const path of root.find(j.ExportNamedDeclaration).paths()) {
+    const { declaration, specifiers, source } = path.node, reexportSource = typeof source?.value == "string" ? source.value : null;
+    if (declaration?.type === "VariableDeclaration") {
+      for (const declarator of declaration.declarations)
+        if (declarator.type === "VariableDeclarator" && declarator.id.type === "Identifier" && declarator.id.name === exportName && declarator.init)
+          return { init: declarator.init, modulePath: filePath };
+    }
+    for (const spec of specifiers ?? []) {
+      if (spec.type !== "ExportSpecifier")
+        continue;
+      const exported = getExportSpecifierName(spec.exported);
+      if (!exported || exported !== exportName)
+        continue;
+      const local = spec.local?.type === "Identifier" ? spec.local.name : exported;
+      if (reexportSource) {
+        const resolvedPath = resolveRelativeModulePath(filePath, reexportSource);
+        if (resolvedPath) {
+          const followed = getNamedExportInit(j, local, resolvedPath, visited);
+          if (followed)
+            return followed;
+        }
+        continue;
+      }
+      const init = findVariableInit(j, root, local);
+      if (init)
+        return { init, modulePath: filePath };
+    }
+  }
+  return null;
+}
+function getStyledComponentName(node) {
+  if (!node || typeof node != "object" || !("type" in node))
+    return null;
+  const current = node;
+  if (current.type === "TaggedTemplateExpression")
+    return getStyledComponentName(current.tag);
+  if (current.type === "CallExpression") {
+    const callee = current.callee;
+    if (callee && typeof callee == "object" && "type" in callee && callee.type === "Identifier" && "name" in callee && callee.name === "styled") {
+      const arg = current.arguments?.[0];
+      return arg && typeof arg == "object" && "type" in arg && arg.type === "Identifier" && "name" in arg ? arg.name : null;
+    }
+    return getStyledComponentName(callee);
+  }
+  return current.type === "MemberExpression" && current.object ? getStyledComponentName(current.object) : null;
+}
+function getSameFileStyledComponentAliases(j, root, localNames) {
+  const aliases = /* @__PURE__ */ new Set(), names = new Set(localNames);
+  return root.find(j.VariableDeclarator).forEach((path) => {
+    const { id, init } = path.node;
+    if (!init || id.type !== "Identifier")
+      return;
+    const baseComponent = getStyledComponentName(init);
+    baseComponent && names.has(baseComponent) && aliases.add(id.name);
+  }), aliases;
+}
+function getImportedStyledComponentAliases(j, root, componentName, filePath, options) {
+  const aliases = /* @__PURE__ */ new Set();
+  return filePath && root.find(j.ImportDeclaration).forEach((path) => {
+    const source = path.node.source.value;
+    if (typeof source != "string")
+      return;
+    const resolvedPath = resolveRelativeModulePath(filePath, source);
+    if (resolvedPath)
+      for (const spec of path.node.specifiers ?? []) {
+        if (spec.type !== "ImportSpecifier" || "importKind" in spec && spec.importKind === "type" || spec.imported.type !== "Identifier")
+          continue;
+        const exportName = spec.imported.name, localName = spec.local?.type === "Identifier" ? spec.local.name : exportName, namedExport = getNamedExportInit(j, exportName, resolvedPath);
+        if (!namedExport)
+          continue;
+        const sourceRoot = parseModule(j, namedExport.modulePath);
+        if (!sourceRoot)
+          continue;
+        const exportLocalNames = getComponentLocalNames(j, sourceRoot, componentName, options), baseComponent = getStyledComponentName(namedExport.init);
+        baseComponent && exportLocalNames.has(baseComponent) && aliases.add(localName);
+      }
+  }), aliases;
+}
+function getStyledComponentAliases(j, root, componentName, filePath, localNames, options) {
+  const sameFile = getSameFileStyledComponentAliases(j, root, localNames), imported = getImportedStyledComponentAliases(j, root, componentName, filePath, options);
+  return /* @__PURE__ */ new Set([...sameFile, ...imported]);
+}
+const DEFAULT_WARNING = "Please double check styled-component migration below";
+function transformStyledComponents(j, root, aliases, filter, options = {}) {
+  const names = new Set(aliases), { callback, warning = DEFAULT_WARNING } = options;
+  let hasChanges = !1;
+  return root.find(j.JSXOpeningElement).forEach((path) => {
+    const name = path.node.name;
+    if (name.type !== "JSXIdentifier" || !names.has(name.name))
+      return;
+    const attrs = path.node.attributes ?? [];
+    if (!filter(attrs)) {
+      insertTodoWarning(j, path, warning) && (hasChanges = !0);
+      return;
+    }
+    callback?.(path) && (hasChanges = !0);
+  }), hasChanges;
+}
 const FLEX_MODS = {
   ...LAYOUT_MODS,
   align: {
@@ -69,6 +216,8 @@ const FLEX_MODS = {
   }
 };
 export {
-  FLEX_MODS
+  FLEX_MODS,
+  getStyledComponentAliases,
+  transformStyledComponents
 };
 //# sourceMappingURL=flex.mods.js.map

package/dist/_chunks-es/flex.mods.js.map

@@ -1 +1 @@
-{"version":3,"file":"flex.mods.js","sources":["../../src/transforms/latest/flex/flex.mods.ts"],"sourcesContent":["import {LAYOUT_MODS} from '../../../constants/latest/layout-mods'\nimport type {AttributeMods} from '../../../types/AttributeMods'\n\n/** @internal */\nexport const FLEX_MODS: AttributeMods = {\n  ...LAYOUT_MODS,\n  align: {\n    type: 'rename-only',\n    name: 'alignItems',\n  },\n  direction: {\n    type: 'rename-only',\n    name: 'flexDirection',\n  },\n  gridAutoColumns: {\n    type: 'style-only',\n    style: 'gridAutoColumns',\n  },\n  gridAutoFlow: {\n    type: 'style-only',\n    style: 'gridAutoFlow',\n  },\n  gridAutoRows: {\n    type: 'style-only',\n    style: 'gridAutoRows',\n  },\n  gridTemplateColumns: {\n    type: 'style-mapped',\n    style: 'gridTemplateColumns',\n    mapping: {\n      0: '0px',\n      1: 'repeat(1, 1fr)',\n      2: 'repeat(2, 1fr)',\n      3: 'repeat(3, 1fr)',\n      4: 'repeat(4, 1fr)',\n      5: 'repeat(5, 1fr)',\n      6: 'repeat(6, 1fr)',\n      7: 'repeat(7, 1fr)',\n      8: 'repeat(8, 1fr)',\n      9: 'repeat(9, 1fr)',\n      10: 'repeat(10, 1fr)',\n      11: 'repeat(11, 1fr)',\n      12: 'repeat(12, 1fr)',\n    },\n  },\n  gridTemplateRows: {\n    type: 'style-mapped',\n    style: 'gridTemplateRows',\n    mapping: {\n      0: '0px',\n      1: 'repeat(1, 1fr)',\n      2: 'repeat(2, 1fr)',\n      3: 'repeat(3, 1fr)',\n      4: 'repeat(4, 1fr)',\n      5: 'repeat(5, 1fr)',\n      6: 'repeat(6, 1fr)',\n      7: 'repeat(7, 1fr)',\n      8: 'repeat(8, 1fr)',\n      9: 'repeat(9, 1fr)',\n      10: 'repeat(10, 1fr)',\n      11: 'repeat(11, 1fr)',\n      12: 'repeat(12, 1fr)',\n    },\n  },\n  wrap: {\n    type: 'rename-only',\n    name: 'flexWrap',\n  },\n  justify: {\n    type: 'rename-only',\n    name: 'justifyContent',\n  },\n}\n"],"names":[],"mappings":";AAIO,MAAM,YAA2B;AAAA,EACtC,GAAG;AAAA,EACH,OAAO;AAAA,IACL,MAAM;AAAA,IACN,MAAM;AAAA,EAAA;AAAA,EAER,WAAW;AAAA,IACT,MAAM;AAAA,IACN,MAAM;AAAA,EAAA;AAAA,EAER,iBAAiB;AAAA,IACf,MAAM;AAAA,IACN,OAAO;AAAA,EAAA;AAAA,EAET,cAAc;AAAA,IACZ,MAAM;AAAA,IACN,OAAO;AAAA,EAAA;AAAA,EAET,cAAc;AAAA,IACZ,MAAM;AAAA,IACN,OAAO;AAAA,EAAA;AAAA,EAET,qBAAqB;AAAA,IACnB,MAAM;AAAA,IACN,OAAO;AAAA,IACP,SAAS;AAAA,MACP,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IAAA;AAAA,EACN;AAAA,EAEF,kBAAkB;AAAA,IAChB,MAAM;AAAA,IACN,OAAO;AAAA,IACP,SAAS;AAAA,MACP,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IAAA;AAAA,EACN;AAAA,EAEF,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,MAAM;AAAA,EAAA;AAAA,EAER,SAAS;AAAA,IACP,MAAM;AAAA,IACN,MAAM;AAAA,EAAA;AAEV;"}
+{"version":3,"file":"flex.mods.js","sources":["../../src/utils/parseModule.ts","../../src/utils/resolveRelativeModulePath.ts","../../src/utils/getNamedExportInit.ts","../../src/utils/getStyledComponentName.ts","../../src/utils/getStyledComponentAliases.ts","../../src/utils/transformStyledComponents.ts","../../src/transforms/latest/flex/flex.mods.ts"],"sourcesContent":["import {readFileSync} from 'node:fs'\n\nimport type {API, Collection} from 'jscodeshift'\n\nconst parseCache = new Map<string, Collection>()\n\nexport function parseModule(j: API['jscodeshift'], filePath: string): Collection | null {\n  const cached = parseCache.get(filePath)\n\n  if (cached) {\n    return cached\n  }\n\n  try {\n    const source = readFileSync(filePath, 'utf8')\n    const root = j(source)\n\n    parseCache.set(filePath, root)\n\n    return root\n  } catch {\n    return null\n  }\n}\n\n/** @internal */\nexport function clearModuleParseCache(): void {\n  parseCache.clear()\n}\n","import {existsSync} from 'node:fs'\nimport {dirname, join, resolve} from 'node:path'\n\nconst EXTENSIONS = ['.tsx', '.ts', '.jsx', '.js'] as const\n\nexport function resolveRelativeModulePath(\n  fromFilePath: string,\n  moduleSpecifier: string,\n): string | null {\n  if (!moduleSpecifier.startsWith('.')) {\n    return null\n  }\n\n  const base = resolve(dirname(fromFilePath), moduleSpecifier)\n\n  for (const ext of EXTENSIONS) {\n    const filePath = `${base}${ext}`\n\n    if (existsSync(filePath)) {\n      return filePath\n    }\n  }\n\n  for (const ext of EXTENSIONS) {\n    const indexPath = join(base, `index${ext}`)\n\n    if (existsSync(indexPath)) {\n      return indexPath\n    }\n  }\n\n  if (existsSync(base)) {\n    return base\n  }\n\n  return null\n}\n","import type {API, Expression, ExportSpecifier} from 'jscodeshift'\n\nimport {parseModule} from './parseModule'\nimport {resolveRelativeModulePath} from './resolveRelativeModulePath'\n\nexport type NamedExportInit = {\n  init: Expression\n  modulePath: string\n}\n\nfunction findVariableInit(\n  j: API['jscodeshift'],\n  root: ReturnType<API['jscodeshift']>,\n  name: string,\n): Expression | null {\n  let init: Expression | null = null\n\n  root.find(j.VariableDeclarator).forEach((path) => {\n    const {id} = path.node\n\n    if (id.type === 'Identifier' && id.name === name && path.node.init) {\n      init = path.node.init\n    }\n  })\n\n  return init\n}\n\nfunction getExportSpecifierName(exported: ExportSpecifier['exported']): string | null {\n  if (exported.type === 'Identifier' || exported.type === 'JSXIdentifier') {\n    return exported.name\n  }\n\n  return null\n}\n\nexport function getNamedExportInit(\n  j: API['jscodeshift'],\n  exportName: string,\n  filePath: string,\n  visited: Set<string> = new Set(),\n): NamedExportInit | null {\n  if (visited.has(filePath)) {\n    return null\n  }\n\n  visited.add(filePath)\n\n  const root = parseModule(j, filePath)\n\n  if (!root) {\n    return null\n  }\n\n  for (const path of root.find(j.ExportNamedDeclaration).paths()) {\n    const {declaration, specifiers, source} = path.node\n    const reexportSource = typeof source?.value === 'string' ? source.value : null\n\n    if (declaration?.type === 'VariableDeclaration') {\n      for (const declarator of declaration.declarations) {\n        if (declarator.type !== 'VariableDeclarator') {\n          continue\n        }\n\n        if (\n          declarator.id.type === 'Identifier' &&\n          declarator.id.name === exportName &&\n          declarator.init\n        ) {\n          return {init: declarator.init, modulePath: filePath}\n        }\n      }\n    }\n\n    for (const spec of specifiers ?? []) {\n      if (spec.type !== 'ExportSpecifier') {\n        continue\n      }\n\n      const exported = getExportSpecifierName(spec.exported)\n\n      if (!exported || exported !== exportName) {\n        continue\n      }\n\n      const local = spec.local?.type === 'Identifier' ? spec.local.name : exported\n\n      if (reexportSource) {\n        const resolvedPath = resolveRelativeModulePath(filePath, reexportSource)\n\n        if (resolvedPath) {\n          const followed = getNamedExportInit(j, local, resolvedPath, visited)\n\n          if (followed) {\n            return followed\n          }\n        }\n\n        continue\n      }\n\n      const init = findVariableInit(j, root, local)\n\n      if (init) {\n        return {init, modulePath: filePath}\n      }\n    }\n  }\n\n  return null\n}\n","export function getStyledComponentName(node: unknown): string | null {\n  if (!node || typeof node !== 'object' || !('type' in node)) {\n    return null\n  }\n\n  const current = node as {\n    type: string\n    callee?: unknown\n    tag?: unknown\n    object?: unknown\n    arguments?: unknown[]\n  }\n\n  if (current.type === 'TaggedTemplateExpression') {\n    return getStyledComponentName(current.tag)\n  }\n\n  if (current.type === 'CallExpression') {\n    const callee = current.callee\n\n    if (\n      callee &&\n      typeof callee === 'object' &&\n      'type' in callee &&\n      callee.type === 'Identifier' &&\n      'name' in callee &&\n      callee.name === 'styled'\n    ) {\n      const arg = current.arguments?.[0]\n\n      if (\n        arg &&\n        typeof arg === 'object' &&\n        'type' in arg &&\n        arg.type === 'Identifier' &&\n        'name' in arg\n      ) {\n        return arg.name as string\n      }\n\n      return null\n    }\n\n    return getStyledComponentName(callee)\n  }\n\n  if (current.type === 'MemberExpression' && current.object) {\n    return getStyledComponentName(current.object)\n  }\n\n  return null\n}\n","import type {API, Collection} from 'jscodeshift'\n\nimport type {BaseOptions} from '../types/BaseOptions'\nimport {getComponentLocalNames} from './getComponentLocalNames'\nimport {getNamedExportInit} from './getNamedExportInit'\nimport {getStyledComponentName} from './getStyledComponentName'\nimport {parseModule} from './parseModule'\nimport {resolveRelativeModulePath} from './resolveRelativeModulePath'\n\nexport function getSameFileStyledComponentAliases(\n  j: API['jscodeshift'],\n  root: Collection,\n  localNames: Iterable<string>,\n): Set<string> {\n  const aliases = new Set<string>()\n  const names = new Set(localNames)\n\n  root.find(j.VariableDeclarator).forEach((path) => {\n    const {id, init} = path.node\n\n    if (!init || id.type !== 'Identifier') {\n      return\n    }\n\n    const baseComponent = getStyledComponentName(init)\n\n    if (baseComponent && names.has(baseComponent)) {\n      aliases.add(id.name)\n    }\n  })\n\n  return aliases\n}\n\nexport function getImportedStyledComponentAliases(\n  j: API['jscodeshift'],\n  root: Collection,\n  componentName: string,\n  filePath: string | undefined,\n  options?: BaseOptions,\n): Set<string> {\n  const aliases = new Set<string>()\n\n  if (!filePath) {\n    return aliases\n  }\n\n  root.find(j.ImportDeclaration).forEach((path) => {\n    const source = path.node.source.value\n\n    if (typeof source !== 'string') {\n      return\n    }\n\n    const resolvedPath = resolveRelativeModulePath(filePath, source)\n\n    if (!resolvedPath) {\n      return\n    }\n\n    for (const spec of path.node.specifiers ?? []) {\n      if (spec.type !== 'ImportSpecifier') {\n        continue\n      }\n\n      if ('importKind' in spec && spec.importKind === 'type') {\n        continue\n      }\n\n      if (spec.imported.type !== 'Identifier') {\n        continue\n      }\n\n      const exportName = spec.imported.name\n      const localName = spec.local?.type === 'Identifier' ? spec.local.name : exportName\n      const namedExport = getNamedExportInit(j, exportName, resolvedPath)\n\n      if (!namedExport) {\n        continue\n      }\n\n      const sourceRoot = parseModule(j, namedExport.modulePath)\n\n      if (!sourceRoot) {\n        continue\n      }\n\n      const exportLocalNames = getComponentLocalNames(j, sourceRoot, componentName, options)\n      const baseComponent = getStyledComponentName(namedExport.init)\n\n      if (baseComponent && exportLocalNames.has(baseComponent)) {\n        aliases.add(localName)\n      }\n    }\n  })\n\n  return aliases\n}\n\nexport function getStyledComponentAliases(\n  j: API['jscodeshift'],\n  root: Collection,\n  componentName: string,\n  filePath: string | undefined,\n  localNames: Set<string>,\n  options?: BaseOptions,\n): Set<string> {\n  const sameFile = getSameFileStyledComponentAliases(j, root, localNames)\n  const imported = getImportedStyledComponentAliases(j, root, componentName, filePath, options)\n\n  return new Set([...sameFile, ...imported])\n}\n","import type {API, ASTPath, JSXAttribute, JSXOpeningElement, JSXSpreadAttribute} from 'jscodeshift'\n\nimport {insertTodoWarning} from './insertTodoWarning'\n\nconst DEFAULT_WARNING = 'Please double check styled-component migration below'\n\n/**\n * Runs callback on JSX styled-component if `filter` passes. Otherwise, adds\n * a TODO on the component JSX instance when manual review is needed.\n * Returns whether the AST was updated.\n */\nexport function transformStyledComponents(\n  j: API['jscodeshift'],\n  root: ReturnType<API['jscodeshift']>,\n  aliases: Iterable<string>,\n  filter: (attrs: (JSXAttribute | JSXSpreadAttribute)[]) => boolean,\n  options: {\n    callback?: (path: ASTPath<JSXOpeningElement>) => boolean | void\n    warning?: string\n  } = {},\n): boolean {\n  const names = new Set(aliases)\n  const {callback, warning = DEFAULT_WARNING} = options\n  let hasChanges = false\n\n  root.find(j.JSXOpeningElement).forEach((path) => {\n    const name = path.node.name\n\n    if (name.type !== 'JSXIdentifier' || !names.has(name.name)) {\n      return\n    }\n\n    const attrs = path.node.attributes ?? []\n\n    if (!filter(attrs)) {\n      if (insertTodoWarning(j, path, warning)) {\n        hasChanges = true\n      }\n\n      return\n    }\n\n    if (callback?.(path)) {\n      hasChanges = true\n    }\n  })\n\n  return hasChanges\n}\n","import {LAYOUT_MODS} from '../../../constants/latest/layout-mods'\nimport type {AttributeMods} from '../../../types/AttributeMods'\n\n/** @internal */\nexport const FLEX_MODS: AttributeMods = {\n  ...LAYOUT_MODS,\n  align: {\n    type: 'rename-only',\n    name: 'alignItems',\n  },\n  direction: {\n    type: 'rename-only',\n    name: 'flexDirection',\n  },\n  gridAutoColumns: {\n    type: 'style-only',\n    style: 'gridAutoColumns',\n  },\n  gridAutoFlow: {\n    type: 'style-only',\n    style: 'gridAutoFlow',\n  },\n  gridAutoRows: {\n    type: 'style-only',\n    style: 'gridAutoRows',\n  },\n  gridTemplateColumns: {\n    type: 'style-mapped',\n    style: 'gridTemplateColumns',\n    mapping: {\n      0: '0px',\n      1: 'repeat(1, 1fr)',\n      2: 'repeat(2, 1fr)',\n      3: 'repeat(3, 1fr)',\n      4: 'repeat(4, 1fr)',\n      5: 'repeat(5, 1fr)',\n      6: 'repeat(6, 1fr)',\n      7: 'repeat(7, 1fr)',\n      8: 'repeat(8, 1fr)',\n      9: 'repeat(9, 1fr)',\n      10: 'repeat(10, 1fr)',\n      11: 'repeat(11, 1fr)',\n      12: 'repeat(12, 1fr)',\n    },\n  },\n  gridTemplateRows: {\n    type: 'style-mapped',\n    style: 'gridTemplateRows',\n    mapping: {\n      0: '0px',\n      1: 'repeat(1, 1fr)',\n      2: 'repeat(2, 1fr)',\n      3: 'repeat(3, 1fr)',\n      4: 'repeat(4, 1fr)',\n      5: 'repeat(5, 1fr)',\n      6: 'repeat(6, 1fr)',\n      7: 'repeat(7, 1fr)',\n      8: 'repeat(8, 1fr)',\n      9: 'repeat(9, 1fr)',\n      10: 'repeat(10, 1fr)',\n      11: 'repeat(11, 1fr)',\n      12: 'repeat(12, 1fr)',\n    },\n  },\n  wrap: {\n    type: 'rename-only',\n    name: 'flexWrap',\n  },\n  justify: {\n    type: 'rename-only',\n    name: 'justifyContent',\n  },\n}\n"],"names":[],"mappings":"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"}

package/dist/transforms/latest/box/box.js

@@ -1,154 +1,8 @@
 import "jscodeshift";
-import { getComponentLocalNames, insertTodoWarning, transformComponent, shouldTransformComponent, transformImport, transformAttributes, getStaticAttributeExpression } from "../../../_chunks-es/transformComponent.js";
-import { readFileSync, existsSync } from "node:fs";
-import { resolve, dirname, join } from "node:path";
+import { transformComponent, getComponentLocalNames, shouldTransformComponent, transformImport, transformAttributes, getStaticAttributeExpression } from "../../../_chunks-es/transformComponent.js";
+import { getStyledComponentAliases, FLEX_MODS, transformStyledComponents } from "../../../_chunks-es/flex.mods.js";
 import { replaceElement, BOX_MODS } from "../../../_chunks-es/box.mods.js";
-import { FLEX_MODS } from "../../../_chunks-es/flex.mods.js";
 import { GRID_MODS } from "../../../_chunks-es/grid.mods.js";
-const parseCache = /* @__PURE__ */ new Map();
-function parseModule(j, filePath) {
-  const cached = parseCache.get(filePath);
-  if (cached)
-    return cached;
-  try {
-    const source = readFileSync(filePath, "utf8"), root = j(source);
-    return parseCache.set(filePath, root), root;
-  } catch {
-    return null;
-  }
-}
-const EXTENSIONS = [".tsx", ".ts", ".jsx", ".js"];
-function resolveRelativeModulePath(fromFilePath, moduleSpecifier) {
-  if (!moduleSpecifier.startsWith("."))
-    return null;
-  const base = resolve(dirname(fromFilePath), moduleSpecifier);
-  for (const ext of EXTENSIONS) {
-    const filePath = `${base}${ext}`;
-    if (existsSync(filePath))
-      return filePath;
-  }
-  for (const ext of EXTENSIONS) {
-    const indexPath = join(base, `index${ext}`);
-    if (existsSync(indexPath))
-      return indexPath;
-  }
-  return existsSync(base) ? base : null;
-}
-function findVariableInit(j, root, name) {
-  let init = null;
-  return root.find(j.VariableDeclarator).forEach((path) => {
-    const { id } = path.node;
-    id.type === "Identifier" && id.name === name && path.node.init && (init = path.node.init);
-  }), init;
-}
-function getExportSpecifierName(exported) {
-  return exported.type === "Identifier" || exported.type === "JSXIdentifier" ? exported.name : null;
-}
-function getNamedExportInit(j, exportName, filePath, visited = /* @__PURE__ */ new Set()) {
-  if (visited.has(filePath))
-    return null;
-  visited.add(filePath);
-  const root = parseModule(j, filePath);
-  if (!root)
-    return null;
-  for (const path of root.find(j.ExportNamedDeclaration).paths()) {
-    const { declaration, specifiers, source } = path.node, reexportSource = typeof source?.value == "string" ? source.value : null;
-    if (declaration?.type === "VariableDeclaration") {
-      for (const declarator of declaration.declarations)
-        if (declarator.type === "VariableDeclarator" && declarator.id.type === "Identifier" && declarator.id.name === exportName && declarator.init)
-          return { init: declarator.init, modulePath: filePath };
-    }
-    for (const spec of specifiers ?? []) {
-      if (spec.type !== "ExportSpecifier")
-        continue;
-      const exported = getExportSpecifierName(spec.exported);
-      if (!exported || exported !== exportName)
-        continue;
-      const local = spec.local?.type === "Identifier" ? spec.local.name : exported;
-      if (reexportSource) {
-        const resolvedPath = resolveRelativeModulePath(filePath, reexportSource);
-        if (resolvedPath) {
-          const followed = getNamedExportInit(j, local, resolvedPath, visited);
-          if (followed)
-            return followed;
-        }
-        continue;
-      }
-      const init = findVariableInit(j, root, local);
-      if (init)
-        return { init, modulePath: filePath };
-    }
-  }
-  return null;
-}
-function getStyledComponentName(node) {
-  if (!node || typeof node != "object" || !("type" in node))
-    return null;
-  const current = node;
-  if (current.type === "TaggedTemplateExpression")
-    return getStyledComponentName(current.tag);
-  if (current.type === "CallExpression") {
-    const callee = current.callee;
-    if (callee && typeof callee == "object" && "type" in callee && callee.type === "Identifier" && "name" in callee && callee.name === "styled") {
-      const arg = current.arguments?.[0];
-      return arg && typeof arg == "object" && "type" in arg && arg.type === "Identifier" && "name" in arg ? arg.name : null;
-    }
-    return getStyledComponentName(callee);
-  }
-  return current.type === "MemberExpression" && current.object ? getStyledComponentName(current.object) : null;
-}
-function getSameFileStyledComponentAliases(j, root, localNames) {
-  const aliases = /* @__PURE__ */ new Set(), names = new Set(localNames);
-  return root.find(j.VariableDeclarator).forEach((path) => {
-    const { id, init } = path.node;
-    if (!init || id.type !== "Identifier")
-      return;
-    const baseComponent = getStyledComponentName(init);
-    baseComponent && names.has(baseComponent) && aliases.add(id.name);
-  }), aliases;
-}
-function getImportedStyledComponentAliases(j, root, componentName, filePath, options) {
-  const aliases = /* @__PURE__ */ new Set();
-  return filePath && root.find(j.ImportDeclaration).forEach((path) => {
-    const source = path.node.source.value;
-    if (typeof source != "string")
-      return;
-    const resolvedPath = resolveRelativeModulePath(filePath, source);
-    if (resolvedPath)
-      for (const spec of path.node.specifiers ?? []) {
-        if (spec.type !== "ImportSpecifier" || "importKind" in spec && spec.importKind === "type" || spec.imported.type !== "Identifier")
-          continue;
-        const exportName = spec.imported.name, localName = spec.local?.type === "Identifier" ? spec.local.name : exportName, namedExport = getNamedExportInit(j, exportName, resolvedPath);
-        if (!namedExport)
-          continue;
-        const sourceRoot = parseModule(j, namedExport.modulePath);
-        if (!sourceRoot)
-          continue;
-        const exportLocalNames = getComponentLocalNames(j, sourceRoot, componentName, options), baseComponent = getStyledComponentName(namedExport.init);
-        baseComponent && exportLocalNames.has(baseComponent) && aliases.add(localName);
-      }
-  }), aliases;
-}
-function getStyledComponentAliases(j, root, componentName, filePath, localNames, options) {
-  const sameFile = getSameFileStyledComponentAliases(j, root, localNames), imported = getImportedStyledComponentAliases(j, root, componentName, filePath, options);
-  return /* @__PURE__ */ new Set([...sameFile, ...imported]);
-}
-const DEFAULT_WARNING = "Please double check styled-component migration below";
-function transformStyledComponents(j, root, aliases, filter, options = {}) {
-  const names = new Set(aliases), { callback, warning = DEFAULT_WARNING } = options;
-  let hasChanges = !1;
-  return root.find(j.JSXOpeningElement).forEach((path) => {
-    const name = path.node.name;
-    if (name.type !== "JSXIdentifier" || !names.has(name.name))
-      return;
-    const attrs = path.node.attributes ?? [];
-    if (!filter(attrs)) {
-      insertTodoWarning(j, path, warning) && (hasChanges = !0);
-      return;
-    }
-    callback?.(path) && (hasChanges = !0);
-  }), hasChanges;
-}
 const BOX_TODO_WARNING = "Please double check the Box migration below", FLEX_TODO_WARNING = "Please double check the Flex migration below", GRID_TODO_WARNING = "Please double check the Grid migration below", STYLED_TODO_WARNING = "Please double check styled(Box) migration below";
 function transform(fileInfo, api, options) {
   const { fromPackage, toPackage } = options || {};

package/dist/transforms/latest/box/box.js.map

@@ -1 +1 @@
-{"version":3,"file":"box.js","sources":["../../../../src/utils/parseModule.ts","../../../../src/utils/resolveRelativeModulePath.ts","../../../../src/utils/getNamedExportInit.ts","../../../../src/utils/getStyledComponentName.ts","../../../../src/utils/getStyledComponentAliases.ts","../../../../src/utils/transformStyledComponents.ts","../../../../src/transforms/latest/box/box.ts"],"sourcesContent":["import {readFileSync} from 'node:fs'\n\nimport type {API, Collection} from 'jscodeshift'\n\nconst parseCache = new Map<string, Collection>()\n\nexport function parseModule(j: API['jscodeshift'], filePath: string): Collection | null {\n  const cached = parseCache.get(filePath)\n\n  if (cached) {\n    return cached\n  }\n\n  try {\n    const source = readFileSync(filePath, 'utf8')\n    const root = j(source)\n\n    parseCache.set(filePath, root)\n\n    return root\n  } catch {\n    return null\n  }\n}\n\n/** @internal */\nexport function clearModuleParseCache(): void {\n  parseCache.clear()\n}\n","import {existsSync} from 'node:fs'\nimport {dirname, join, resolve} from 'node:path'\n\nconst EXTENSIONS = ['.tsx', '.ts', '.jsx', '.js'] as const\n\nexport function resolveRelativeModulePath(\n  fromFilePath: string,\n  moduleSpecifier: string,\n): string | null {\n  if (!moduleSpecifier.startsWith('.')) {\n    return null\n  }\n\n  const base = resolve(dirname(fromFilePath), moduleSpecifier)\n\n  for (const ext of EXTENSIONS) {\n    const filePath = `${base}${ext}`\n\n    if (existsSync(filePath)) {\n      return filePath\n    }\n  }\n\n  for (const ext of EXTENSIONS) {\n    const indexPath = join(base, `index${ext}`)\n\n    if (existsSync(indexPath)) {\n      return indexPath\n    }\n  }\n\n  if (existsSync(base)) {\n    return base\n  }\n\n  return null\n}\n","import type {API, Expression, ExportSpecifier} from 'jscodeshift'\n\nimport {parseModule} from './parseModule'\nimport {resolveRelativeModulePath} from './resolveRelativeModulePath'\n\nexport type NamedExportInit = {\n  init: Expression\n  modulePath: string\n}\n\nfunction findVariableInit(\n  j: API['jscodeshift'],\n  root: ReturnType<API['jscodeshift']>,\n  name: string,\n): Expression | null {\n  let init: Expression | null = null\n\n  root.find(j.VariableDeclarator).forEach((path) => {\n    const {id} = path.node\n\n    if (id.type === 'Identifier' && id.name === name && path.node.init) {\n      init = path.node.init\n    }\n  })\n\n  return init\n}\n\nfunction getExportSpecifierName(exported: ExportSpecifier['exported']): string | null {\n  if (exported.type === 'Identifier' || exported.type === 'JSXIdentifier') {\n    return exported.name\n  }\n\n  return null\n}\n\nexport function getNamedExportInit(\n  j: API['jscodeshift'],\n  exportName: string,\n  filePath: string,\n  visited: Set<string> = new Set(),\n): NamedExportInit | null {\n  if (visited.has(filePath)) {\n    return null\n  }\n\n  visited.add(filePath)\n\n  const root = parseModule(j, filePath)\n\n  if (!root) {\n    return null\n  }\n\n  for (const path of root.find(j.ExportNamedDeclaration).paths()) {\n    const {declaration, specifiers, source} = path.node\n    const reexportSource = typeof source?.value === 'string' ? source.value : null\n\n    if (declaration?.type === 'VariableDeclaration') {\n      for (const declarator of declaration.declarations) {\n        if (declarator.type !== 'VariableDeclarator') {\n          continue\n        }\n\n        if (\n          declarator.id.type === 'Identifier' &&\n          declarator.id.name === exportName &&\n          declarator.init\n        ) {\n          return {init: declarator.init, modulePath: filePath}\n        }\n      }\n    }\n\n    for (const spec of specifiers ?? []) {\n      if (spec.type !== 'ExportSpecifier') {\n        continue\n      }\n\n      const exported = getExportSpecifierName(spec.exported)\n\n      if (!exported || exported !== exportName) {\n        continue\n      }\n\n      const local = spec.local?.type === 'Identifier' ? spec.local.name : exported\n\n      if (reexportSource) {\n        const resolvedPath = resolveRelativeModulePath(filePath, reexportSource)\n\n        if (resolvedPath) {\n          const followed = getNamedExportInit(j, local, resolvedPath, visited)\n\n          if (followed) {\n            return followed\n          }\n        }\n\n        continue\n      }\n\n      const init = findVariableInit(j, root, local)\n\n      if (init) {\n        return {init, modulePath: filePath}\n      }\n    }\n  }\n\n  return null\n}\n","export function getStyledComponentName(node: unknown): string | null {\n  if (!node || typeof node !== 'object' || !('type' in node)) {\n    return null\n  }\n\n  const current = node as {\n    type: string\n    callee?: unknown\n    tag?: unknown\n    object?: unknown\n    arguments?: unknown[]\n  }\n\n  if (current.type === 'TaggedTemplateExpression') {\n    return getStyledComponentName(current.tag)\n  }\n\n  if (current.type === 'CallExpression') {\n    const callee = current.callee\n\n    if (\n      callee &&\n      typeof callee === 'object' &&\n      'type' in callee &&\n      callee.type === 'Identifier' &&\n      'name' in callee &&\n      callee.name === 'styled'\n    ) {\n      const arg = current.arguments?.[0]\n\n      if (\n        arg &&\n        typeof arg === 'object' &&\n        'type' in arg &&\n        arg.type === 'Identifier' &&\n        'name' in arg\n      ) {\n        return arg.name as string\n      }\n\n      return null\n    }\n\n    return getStyledComponentName(callee)\n  }\n\n  if (current.type === 'MemberExpression' && current.object) {\n    return getStyledComponentName(current.object)\n  }\n\n  return null\n}\n","import type {API, Collection} from 'jscodeshift'\n\nimport type {BaseOptions} from '../types/BaseOptions'\nimport {getComponentLocalNames} from './getComponentLocalNames'\nimport {getNamedExportInit} from './getNamedExportInit'\nimport {getStyledComponentName} from './getStyledComponentName'\nimport {parseModule} from './parseModule'\nimport {resolveRelativeModulePath} from './resolveRelativeModulePath'\n\nexport function getSameFileStyledComponentAliases(\n  j: API['jscodeshift'],\n  root: Collection,\n  localNames: Iterable<string>,\n): Set<string> {\n  const aliases = new Set<string>()\n  const names = new Set(localNames)\n\n  root.find(j.VariableDeclarator).forEach((path) => {\n    const {id, init} = path.node\n\n    if (!init || id.type !== 'Identifier') {\n      return\n    }\n\n    const baseComponent = getStyledComponentName(init)\n\n    if (baseComponent && names.has(baseComponent)) {\n      aliases.add(id.name)\n    }\n  })\n\n  return aliases\n}\n\nexport function getImportedStyledComponentAliases(\n  j: API['jscodeshift'],\n  root: Collection,\n  componentName: string,\n  filePath: string | undefined,\n  options?: BaseOptions,\n): Set<string> {\n  const aliases = new Set<string>()\n\n  if (!filePath) {\n    return aliases\n  }\n\n  root.find(j.ImportDeclaration).forEach((path) => {\n    const source = path.node.source.value\n\n    if (typeof source !== 'string') {\n      return\n    }\n\n    const resolvedPath = resolveRelativeModulePath(filePath, source)\n\n    if (!resolvedPath) {\n      return\n    }\n\n    for (const spec of path.node.specifiers ?? []) {\n      if (spec.type !== 'ImportSpecifier') {\n        continue\n      }\n\n      if ('importKind' in spec && spec.importKind === 'type') {\n        continue\n      }\n\n      if (spec.imported.type !== 'Identifier') {\n        continue\n      }\n\n      const exportName = spec.imported.name\n      const localName = spec.local?.type === 'Identifier' ? spec.local.name : exportName\n      const namedExport = getNamedExportInit(j, exportName, resolvedPath)\n\n      if (!namedExport) {\n        continue\n      }\n\n      const sourceRoot = parseModule(j, namedExport.modulePath)\n\n      if (!sourceRoot) {\n        continue\n      }\n\n      const exportLocalNames = getComponentLocalNames(j, sourceRoot, componentName, options)\n      const baseComponent = getStyledComponentName(namedExport.init)\n\n      if (baseComponent && exportLocalNames.has(baseComponent)) {\n        aliases.add(localName)\n      }\n    }\n  })\n\n  return aliases\n}\n\nexport function getStyledComponentAliases(\n  j: API['jscodeshift'],\n  root: Collection,\n  componentName: string,\n  filePath: string | undefined,\n  localNames: Set<string>,\n  options?: BaseOptions,\n): Set<string> {\n  const sameFile = getSameFileStyledComponentAliases(j, root, localNames)\n  const imported = getImportedStyledComponentAliases(j, root, componentName, filePath, options)\n\n  return new Set([...sameFile, ...imported])\n}\n","import type {API, ASTPath, JSXAttribute, JSXOpeningElement, JSXSpreadAttribute} from 'jscodeshift'\n\nimport {insertTodoWarning} from './insertTodoWarning'\n\nconst DEFAULT_WARNING = 'Please double check styled-component migration below'\n\n/**\n * Runs callback on JSX styled-component if `filter` passes. Otherwise, adds\n * a TODO on the component JSX instance when manual review is needed.\n * Returns whether the AST was updated.\n */\nexport function transformStyledComponents(\n  j: API['jscodeshift'],\n  root: ReturnType<API['jscodeshift']>,\n  aliases: Iterable<string>,\n  filter: (attrs: (JSXAttribute | JSXSpreadAttribute)[]) => boolean,\n  options: {\n    callback?: (path: ASTPath<JSXOpeningElement>) => boolean | void\n    warning?: string\n  } = {},\n): boolean {\n  const names = new Set(aliases)\n  const {callback, warning = DEFAULT_WARNING} = options\n  let hasChanges = false\n\n  root.find(j.JSXOpeningElement).forEach((path) => {\n    const name = path.node.name\n\n    if (name.type !== 'JSXIdentifier' || !names.has(name.name)) {\n      return\n    }\n\n    const attrs = path.node.attributes ?? []\n\n    if (!filter(attrs)) {\n      if (insertTodoWarning(j, path, warning)) {\n        hasChanges = true\n      }\n\n      return\n    }\n\n    if (callback?.(path)) {\n      hasChanges = true\n    }\n  })\n\n  return hasChanges\n}\n","import {type API, type FileInfo, type JSXSpreadAttribute, type JSXAttribute} from 'jscodeshift'\n\nimport type {BaseOptions} from '../../../types/BaseOptions'\nimport {getComponentLocalNames} from '../../../utils/getComponentLocalNames'\nimport {getStaticAttributeExpression} from '../../../utils/getStaticAttributeExpression'\nimport {getStyledComponentAliases} from '../../../utils/getStyledComponentAliases'\nimport {replaceElement} from '../../../utils/replaceElement'\nimport {shouldTransformComponent} from '../../../utils/shouldTransformComponent'\nimport {transformAttributes} from '../../../utils/transformAttributes'\nimport {transformComponent} from '../../../utils/transformComponent'\nimport {transformImport} from '../../../utils/transformImport'\nimport {transformStyledComponents} from '../../../utils/transformStyledComponents'\nimport {FLEX_MODS} from '../flex/flex.mods'\nimport {GRID_MODS} from '../grid/grid.mods'\nimport {BOX_MODS} from './box.mods'\n\nconst BOX_TODO_WARNING = 'Please double check the Box migration below'\nconst FLEX_TODO_WARNING = 'Please double check the Flex migration below'\nconst GRID_TODO_WARNING = 'Please double check the Grid migration below'\nconst STYLED_TODO_WARNING = 'Please double check styled(Box) migration below'\n\n/** @internal */\nexport default function transform(\n  fileInfo: FileInfo,\n  api: API,\n  options?: BaseOptions,\n): string | undefined {\n  const {fromPackage, toPackage} = options || {}\n\n  return transformComponent(fileInfo, api, ({j, root, markChanged}) => {\n    const localNames = getComponentLocalNames(j, root, 'Box', options)\n    const styledAliases = getStyledComponentAliases(\n      j,\n      root,\n      'Box',\n      fileInfo.path,\n      localNames,\n      options,\n    )\n\n    if (!shouldTransformComponent(j, root, 'Box', localNames, options, styledAliases)) {\n      return\n    }\n\n    const matchesDisplayValue = (\n      attrs: (JSXAttribute | JSXSpreadAttribute)[],\n      suffix: string,\n      exclude: string[],\n    ) => {\n      const display = getStaticAttributeExpression(j, attrs, 'display') || []\n      const values = Array.isArray(display) ? display : [display]\n      let matchesExclude\n\n      for (const excluded of exclude) {\n        if (values.some((value) => typeof value === 'string' && value.endsWith(excluded))) {\n          matchesExclude = true\n          break\n        }\n      }\n\n      if (matchesExclude) {\n        return false\n      }\n\n      return values.some((value) => typeof value === 'string' && value.endsWith(suffix))\n    }\n\n    const replaceWithFlex = (attrs: (JSXAttribute | JSXSpreadAttribute)[]) =>\n      matchesDisplayValue(attrs, 'flex', ['block', 'inline', 'grid'])\n\n    const replaceWithGrid = (attrs: (JSXAttribute | JSXSpreadAttribute)[]) =>\n      matchesDisplayValue(attrs, 'grid', ['block', 'inline', 'flex'])\n\n    if (transformImport(j, root, 'Box', fromPackage, toPackage)) {\n      markChanged()\n    }\n\n    if (\n      replaceElement(\n        j,\n        root,\n        replaceWithFlex,\n        {\n          element: 'Box',\n          localNames,\n        },\n        {\n          element: 'Flex',\n          callback: (path) => transformAttributes(j, path, FLEX_MODS, FLEX_TODO_WARNING),\n        },\n      )\n    ) {\n      markChanged()\n    }\n\n    if (\n      replaceElement(\n        j,\n        root,\n        replaceWithGrid,\n        {\n          element: 'Box',\n          localNames,\n          callback: (path) => transformAttributes(j, path, BOX_MODS, BOX_TODO_WARNING),\n        },\n        {\n          element: 'Grid',\n          callback: (path) => transformAttributes(j, path, GRID_MODS, GRID_TODO_WARNING),\n        },\n      )\n    ) {\n      markChanged()\n    }\n\n    if (\n      transformStyledComponents(\n        j,\n        root,\n        styledAliases,\n        (attrs) => !replaceWithFlex(attrs) && !replaceWithGrid(attrs),\n        {\n          warning: STYLED_TODO_WARNING,\n          callback: (path) => transformAttributes(j, path, BOX_MODS, BOX_TODO_WARNING),\n        },\n      )\n    ) {\n      markChanged()\n    }\n  })\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"box.js","sources":["../../../../src/transforms/latest/box/box.ts"],"sourcesContent":["import {type API, type FileInfo, type JSXSpreadAttribute, type JSXAttribute} from 'jscodeshift'\n\nimport type {BaseOptions} from '../../../types/BaseOptions'\nimport {getComponentLocalNames} from '../../../utils/getComponentLocalNames'\nimport {getStaticAttributeExpression} from '../../../utils/getStaticAttributeExpression'\nimport {getStyledComponentAliases} from '../../../utils/getStyledComponentAliases'\nimport {replaceElement} from '../../../utils/replaceElement'\nimport {shouldTransformComponent} from '../../../utils/shouldTransformComponent'\nimport {transformAttributes} from '../../../utils/transformAttributes'\nimport {transformComponent} from '../../../utils/transformComponent'\nimport {transformImport} from '../../../utils/transformImport'\nimport {transformStyledComponents} from '../../../utils/transformStyledComponents'\nimport {FLEX_MODS} from '../flex/flex.mods'\nimport {GRID_MODS} from '../grid/grid.mods'\nimport {BOX_MODS} from './box.mods'\n\nconst BOX_TODO_WARNING = 'Please double check the Box migration below'\nconst FLEX_TODO_WARNING = 'Please double check the Flex migration below'\nconst GRID_TODO_WARNING = 'Please double check the Grid migration below'\nconst STYLED_TODO_WARNING = 'Please double check styled(Box) migration below'\n\n/** @internal */\nexport default function transform(\n  fileInfo: FileInfo,\n  api: API,\n  options?: BaseOptions,\n): string | undefined {\n  const {fromPackage, toPackage} = options || {}\n\n  return transformComponent(fileInfo, api, ({j, root, markChanged}) => {\n    const localNames = getComponentLocalNames(j, root, 'Box', options)\n    const styledAliases = getStyledComponentAliases(\n      j,\n      root,\n      'Box',\n      fileInfo.path,\n      localNames,\n      options,\n    )\n\n    if (!shouldTransformComponent(j, root, 'Box', localNames, options, styledAliases)) {\n      return\n    }\n\n    const matchesDisplayValue = (\n      attrs: (JSXAttribute | JSXSpreadAttribute)[],\n      suffix: string,\n      exclude: string[],\n    ) => {\n      const display = getStaticAttributeExpression(j, attrs, 'display') || []\n      const values = Array.isArray(display) ? display : [display]\n      let matchesExclude\n\n      for (const excluded of exclude) {\n        if (values.some((value) => typeof value === 'string' && value.endsWith(excluded))) {\n          matchesExclude = true\n          break\n        }\n      }\n\n      if (matchesExclude) {\n        return false\n      }\n\n      return values.some((value) => typeof value === 'string' && value.endsWith(suffix))\n    }\n\n    const replaceWithFlex = (attrs: (JSXAttribute | JSXSpreadAttribute)[]) =>\n      matchesDisplayValue(attrs, 'flex', ['block', 'inline', 'grid'])\n\n    const replaceWithGrid = (attrs: (JSXAttribute | JSXSpreadAttribute)[]) =>\n      matchesDisplayValue(attrs, 'grid', ['block', 'inline', 'flex'])\n\n    if (transformImport(j, root, 'Box', fromPackage, toPackage)) {\n      markChanged()\n    }\n\n    if (\n      replaceElement(\n        j,\n        root,\n        replaceWithFlex,\n        {\n          element: 'Box',\n          localNames,\n        },\n        {\n          element: 'Flex',\n          callback: (path) => transformAttributes(j, path, FLEX_MODS, FLEX_TODO_WARNING),\n        },\n      )\n    ) {\n      markChanged()\n    }\n\n    if (\n      replaceElement(\n        j,\n        root,\n        replaceWithGrid,\n        {\n          element: 'Box',\n          localNames,\n          callback: (path) => transformAttributes(j, path, BOX_MODS, BOX_TODO_WARNING),\n        },\n        {\n          element: 'Grid',\n          callback: (path) => transformAttributes(j, path, GRID_MODS, GRID_TODO_WARNING),\n        },\n      )\n    ) {\n      markChanged()\n    }\n\n    if (\n      transformStyledComponents(\n        j,\n        root,\n        styledAliases,\n        (attrs) => !replaceWithFlex(attrs) && !replaceWithGrid(attrs),\n        {\n          warning: STYLED_TODO_WARNING,\n          callback: (path) => transformAttributes(j, path, BOX_MODS, BOX_TODO_WARNING),\n        },\n      )\n    ) {\n      markChanged()\n    }\n  })\n}\n"],"names":[],"mappings":";;;;;AAgBA,MAAM,mBAAmB,+CACnB,oBAAoB,gDACpB,oBAAoB,gDACpB,sBAAsB;AAG5B,SAAwB,UACtB,UACA,KACA,SACoB;AACpB,QAAM,EAAC,aAAa,UAAA,IAAa,WAAW,CAAA;AAE5C,SAAO,mBAAmB,UAAU,KAAK,CAAC,EAAC,GAAG,MAAM,kBAAiB;AACnE,UAAM,aAAa,uBAAuB,GAAG,MAAM,OAAO,OAAO,GAC3D,gBAAgB;AAAA,MACpB;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT;AAAA,MACA;AAAA,IAAA;AAGF,QAAI,CAAC,yBAAyB,GAAG,MAAM,OAAO,YAAY,SAAS,aAAa;AAC9E;AAGF,UAAM,sBAAsB,CAC1B,OACA,QACA,YACG;AACH,YAAM,UAAU,6BAA6B,GAAG,OAAO,SAAS,KAAK,CAAA,GAC/D,SAAS,MAAM,QAAQ,OAAO,IAAI,UAAU,CAAC,OAAO;AAC1D,UAAI;AAEJ,iBAAW,YAAY;AACrB,YAAI,OAAO,KAAK,CAAC,UAAU,OAAO,SAAU,YAAY,MAAM,SAAS,QAAQ,CAAC,GAAG;AACjF,2BAAiB;AACjB;AAAA,QACF;AAGF,aAAI,iBACK,KAGF,OAAO,KAAK,CAAC,UAAU,OAAO,SAAU,YAAY,MAAM,SAAS,MAAM,CAAC;AAAA,IACnF,GAEM,kBAAkB,CAAC,UACvB,oBAAoB,OAAO,QAAQ,CAAC,SAAS,UAAU,MAAM,CAAC,GAE1D,kBAAkB,CAAC,UACvB,oBAAoB,OAAO,QAAQ,CAAC,SAAS,UAAU,MAAM,CAAC;AAE5D,oBAAgB,GAAG,MAAM,OAAO,aAAa,SAAS,KACxD,eAIA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,QACE,SAAS;AAAA,QACT;AAAA,MAAA;AAAA,MAEF;AAAA,QACE,SAAS;AAAA,QACT,UAAU,CAAC,SAAS,oBAAoB,GAAG,MAAM,WAAW,iBAAiB;AAAA,MAAA;AAAA,IAC/E,KAGF,eAIA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,QACE,SAAS;AAAA,QACT;AAAA,QACA,UAAU,CAAC,SAAS,oBAAoB,GAAG,MAAM,UAAU,gBAAgB;AAAA,MAAA;AAAA,MAE7E;AAAA,QACE,SAAS;AAAA,QACT,UAAU,CAAC,SAAS,oBAAoB,GAAG,MAAM,WAAW,iBAAiB;AAAA,MAAA;AAAA,IAC/E,KAGF,eAIA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA,CAAC,UAAU,CAAC,gBAAgB,KAAK,KAAK,CAAC,gBAAgB,KAAK;AAAA,MAC5D;AAAA,QACE,SAAS;AAAA,QACT,UAAU,CAAC,SAAS,oBAAoB,GAAG,MAAM,UAAU,gBAAgB;AAAA,MAAA;AAAA,IAC7E,KAGF,YAAA;AAAA,EAEJ,CAAC;AACH;"}

package/dist/transforms/latest/flex/flex.js

@@ -1,16 +1,24 @@
 import "jscodeshift";
 import { transformComponent, getComponentLocalNames, shouldTransformComponent, transformImport, transformAttributes } from "../../../_chunks-es/transformComponent.js";
-import { FLEX_MODS } from "../../../_chunks-es/flex.mods.js";
+import { getStyledComponentAliases, transformStyledComponents, FLEX_MODS } from "../../../_chunks-es/flex.mods.js";
 const TODO_WARNING = "Please double check the Flex migration below";
 function transform(fileInfo, api, options) {
   const { fromPackage, toPackage } = options || {};
   return transformComponent(fileInfo, api, ({ j, root, markChanged }) => {
-    const localNames = getComponentLocalNames(j, root, "Flex", options);
-    shouldTransformComponent(j, root, "Flex", localNames, options) && (transformImport(j, root, "Flex", fromPackage, toPackage) && markChanged(), root.find(j.JSXOpeningElement, {
-      name: { type: "JSXIdentifier", name: "Flex" }
-    }).forEach((path) => {
-      transformAttributes(j, path, FLEX_MODS, TODO_WARNING) && markChanged();
-    }));
+    const localNames = getComponentLocalNames(j, root, "Flex", options), styledAliases = getStyledComponentAliases(
+      j,
+      root,
+      "Flex",
+      fileInfo.path,
+      localNames,
+      options
+    );
+    shouldTransformComponent(j, root, "Flex", localNames, options, styledAliases) && (transformImport(j, root, "Flex", fromPackage, toPackage) && markChanged(), root.find(j.JSXOpeningElement).forEach((path) => {
+      const name = path.node.name;
+      name.type !== "JSXIdentifier" || !localNames.has(name.name) || transformAttributes(j, path, FLEX_MODS, TODO_WARNING) && markChanged();
+    }), transformStyledComponents(j, root, styledAliases, () => !0, {
+      callback: (path) => transformAttributes(j, path, FLEX_MODS, TODO_WARNING)
+    }) && markChanged());
   });
 }
 export {

package/dist/transforms/latest/flex/flex.js.map

@@ -1 +1 @@
-{"version":3,"file":"flex.js","sources":["../../../../src/transforms/latest/flex/flex.ts"],"sourcesContent":["import {type API, type FileInfo} from 'jscodeshift'\n\nimport type {BaseOptions} from '../../../types/BaseOptions'\nimport {getComponentLocalNames} from '../../../utils/getComponentLocalNames'\nimport {shouldTransformComponent} from '../../../utils/shouldTransformComponent'\nimport {transformAttributes} from '../../../utils/transformAttributes'\nimport {transformComponent} from '../../../utils/transformComponent'\nimport {transformImport} from '../../../utils/transformImport'\nimport {FLEX_MODS} from './flex.mods'\n\nconst TODO_WARNING = 'Please double check the Flex migration below'\n\n/** @internal */\nexport default function transform(\n  fileInfo: FileInfo,\n  api: API,\n  options: BaseOptions,\n): string | undefined {\n  const {fromPackage, toPackage} = options || {}\n\n  return transformComponent(fileInfo, api, ({j, root, markChanged}) => {\n    const localNames = getComponentLocalNames(j, root, 'Flex', options)\n\n    if (!shouldTransformComponent(j, root, 'Flex', localNames, options)) {\n      return\n    }\n\n    if (transformImport(j, root, 'Flex', fromPackage, toPackage)) {\n      markChanged()\n    }\n\n    root\n      .find(j.JSXOpeningElement, {\n        name: {type: 'JSXIdentifier', name: 'Flex'},\n      })\n      .forEach((path) => {\n        if (transformAttributes(j, path, FLEX_MODS, TODO_WARNING)) {\n          markChanged()\n        }\n      })\n  })\n}\n"],"names":[],"mappings":";;;AAUA,MAAM,eAAe;AAGrB,SAAwB,UACtB,UACA,KACA,SACoB;AACpB,QAAM,EAAC,aAAa,UAAA,IAAa,WAAW,CAAA;AAE5C,SAAO,mBAAmB,UAAU,KAAK,CAAC,EAAC,GAAG,MAAM,kBAAiB;AACnE,UAAM,aAAa,uBAAuB,GAAG,MAAM,QAAQ,OAAO;AAE7D,6BAAyB,GAAG,MAAM,QAAQ,YAAY,OAAO,MAI9D,gBAAgB,GAAG,MAAM,QAAQ,aAAa,SAAS,KACzD,YAAA,GAGF,KACG,KAAK,EAAE,mBAAmB;AAAA,MACzB,MAAM,EAAC,MAAM,iBAAiB,MAAM,OAAA;AAAA,IAAM,CAC3C,EACA,QAAQ,CAAC,SAAS;AACb,0BAAoB,GAAG,MAAM,WAAW,YAAY,KACtD,YAAA;AAAA,IAEJ,CAAC;AAAA,EACL,CAAC;AACH;"}
+{"version":3,"file":"flex.js","sources":["../../../../src/transforms/latest/flex/flex.ts"],"sourcesContent":["import {type API, type FileInfo} from 'jscodeshift'\n\nimport type {BaseOptions} from '../../../types/BaseOptions'\nimport {getComponentLocalNames} from '../../../utils/getComponentLocalNames'\nimport {getStyledComponentAliases} from '../../../utils/getStyledComponentAliases'\nimport {shouldTransformComponent} from '../../../utils/shouldTransformComponent'\nimport {transformAttributes} from '../../../utils/transformAttributes'\nimport {transformComponent} from '../../../utils/transformComponent'\nimport {transformImport} from '../../../utils/transformImport'\nimport {transformStyledComponents} from '../../../utils/transformStyledComponents'\nimport {FLEX_MODS} from './flex.mods'\n\nconst TODO_WARNING = 'Please double check the Flex migration below'\n\n/** @internal */\nexport default function transform(\n  fileInfo: FileInfo,\n  api: API,\n  options: BaseOptions,\n): string | undefined {\n  const {fromPackage, toPackage} = options || {}\n\n  return transformComponent(fileInfo, api, ({j, root, markChanged}) => {\n    const localNames = getComponentLocalNames(j, root, 'Flex', options)\n    const styledAliases = getStyledComponentAliases(\n      j,\n      root,\n      'Flex',\n      fileInfo.path,\n      localNames,\n      options,\n    )\n\n    if (!shouldTransformComponent(j, root, 'Flex', localNames, options, styledAliases)) {\n      return\n    }\n\n    if (transformImport(j, root, 'Flex', fromPackage, toPackage)) {\n      markChanged()\n    }\n\n    root.find(j.JSXOpeningElement).forEach((path) => {\n      const name = path.node.name\n\n      if (name.type !== 'JSXIdentifier' || !localNames.has(name.name)) {\n        return\n      }\n\n      if (transformAttributes(j, path, FLEX_MODS, TODO_WARNING)) {\n        markChanged()\n      }\n    })\n\n    if (\n      transformStyledComponents(j, root, styledAliases, () => true, {\n        callback: (path) => transformAttributes(j, path, FLEX_MODS, TODO_WARNING),\n      })\n    ) {\n      markChanged()\n    }\n  })\n}\n"],"names":[],"mappings":";;;AAYA,MAAM,eAAe;AAGrB,SAAwB,UACtB,UACA,KACA,SACoB;AACpB,QAAM,EAAC,aAAa,UAAA,IAAa,WAAW,CAAA;AAE5C,SAAO,mBAAmB,UAAU,KAAK,CAAC,EAAC,GAAG,MAAM,kBAAiB;AACnE,UAAM,aAAa,uBAAuB,GAAG,MAAM,QAAQ,OAAO,GAC5D,gBAAgB;AAAA,MACpB;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT;AAAA,MACA;AAAA,IAAA;AAGG,6BAAyB,GAAG,MAAM,QAAQ,YAAY,SAAS,aAAa,MAI7E,gBAAgB,GAAG,MAAM,QAAQ,aAAa,SAAS,KACzD,YAAA,GAGF,KAAK,KAAK,EAAE,iBAAiB,EAAE,QAAQ,CAAC,SAAS;AAC/C,YAAM,OAAO,KAAK,KAAK;AAEnB,WAAK,SAAS,mBAAmB,CAAC,WAAW,IAAI,KAAK,IAAI,KAI1D,oBAAoB,GAAG,MAAM,WAAW,YAAY,KACtD,YAAA;AAAA,IAEJ,CAAC,GAGC,0BAA0B,GAAG,MAAM,eAAe,MAAM,IAAM;AAAA,MAC5D,UAAU,CAAC,SAAS,oBAAoB,GAAG,MAAM,WAAW,YAAY;AAAA,IAAA,CACzE,KAED,YAAA;AAAA,EAEJ,CAAC;AACH;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui-codemod",
-  "version": "1.0.0-alpha.4",
+  "version": "1.0.0-alpha.5",
   "description": "",
   "keywords": [],
   "license": "ISC",

package/src/transforms/latest/box/box.test.ts

@@ -1,13 +1,6 @@
-import {mkdtempSync, readFileSync, rmSync, writeFileSync} from 'node:fs'
-import {tmpdir} from 'node:os'
-import {join} from 'node:path'
+import {expect} from 'vitest'
 
-import {afterEach, describe, expect, it} from 'vitest'
-
-const applyTransform = require('jscodeshift/dist/testUtils').applyTransform
-
-import {clearModuleParseCache} from '../../../utils/parseModule'
-import {defineInlineTest} from '../../../utils/testUtils'
+import {defineCrossFileTest, defineInlineTest} from '../../../utils/testUtils'
 import transform from './box'
 
 defineInlineTest(
@@ -246,157 +239,104 @@ defineInlineTest(
   'warns and does not transform attributes if styled Box should be replaced',
 )
 
-const tempDirs: string[] = []
-
-afterEach(() => {
-  clearModuleParseCache()
-
-  for (const dir of tempDirs.splice(0)) {
-    rmSync(dir, {recursive: true, force: true})
-  }
-})
-
-describe('cross-file styled aliases', () => {
-  it('transforms attributes on imported styled Box wrappers', () => {
-    const dir = mkdtempSync(join(tmpdir(), 'ui-codemod-box-crossfile-'))
-
-    tempDirs.push(dir)
-
-    writeFileSync(
-      join(dir, 'Component.styled.tsx'),
-      `
-        import {Box} from '@sanity/ui'
-
-        export const RootBox = styled(Box)(({theme}) => ({}))
-      `,
-    )
-
-    writeFileSync(
-      join(dir, 'Component.tsx'),
-      `
-        import {RootBox} from './Component.styled'
-
-        export function Component() {
-          return <RootBox alignItems="center" />
-        }
-      `,
-    )
+defineCrossFileTest(
+  transform,
+  {},
+  `
+    import {Box} from '@sanity/ui'
 
-    const importerPath = join(dir, 'Component.tsx')
-    const source = readFileSync(importerPath, 'utf8')
-    const output = applyTransform(transform, {}, {source, path: importerPath}, {parser: 'tsx'})
+    export const RootBox = styled(Box)(({theme}) => ({}))
+  `,
+  `
+    import {RootBox} from './Component.styled'
 
+    export function Component() {
+      return <RootBox alignItems="center" />
+    }
+  `,
+  (output) => {
     expect(output).toContain('alignItems: "center"')
     expect(output).not.toContain('<RootBox alignItems="center" />')
-  })
-
-  it('adds todo warning when imported styled Box wrapper should be replaced', () => {
-    const dir = mkdtempSync(join(tmpdir(), 'ui-codemod-box-crossfile-todo-'))
-
-    tempDirs.push(dir)
-
-    writeFileSync(
-      join(dir, 'Component.styled.tsx'),
-      `
-        import {Box} from '@sanity/ui'
-
-        export const RootBox = styled(Box)(({theme}) => ({}))
-      `,
-    )
-
-    writeFileSync(
-      join(dir, 'Component.tsx'),
-      `
-        import {RootBox} from './Component.styled'
+  },
+  'transforms attributes on imported styled Box wrappers',
+)
 
-        export function Component() {
-          return <RootBox display="flex" alignItems="center" />
-        }
-      `,
-    )
+defineCrossFileTest(
+  transform,
+  {},
+  `
+    import {Box} from '@sanity/ui'
 
-    const importerPath = join(dir, 'Component.tsx')
-    const source = readFileSync(importerPath, 'utf8')
-    const output = applyTransform(transform, {}, {source, path: importerPath}, {parser: 'tsx'})
+    export const RootBox = styled(Box)(({theme}) => ({}))
+  `,
+  `
+    import {RootBox} from './Component.styled'
 
+    export function Component() {
+      return <RootBox display="flex" alignItems="center" />
+    }
+  `,
+  (output) => {
     expect(output).toContain('UI-CODEMOD TODO: Please double check styled(Box) migration below')
     expect(output).toContain('<RootBox display="flex" alignItems="center" />')
     expect(output).not.toContain('const RootBox = styled(Box)')
-  })
-
-  it('does not rewrite unrelated Box from another package', () => {
-    const dir = mkdtempSync(join(tmpdir(), 'ui-codemod-box-crossfile-unrelated-'))
-
-    tempDirs.push(dir)
-
-    writeFileSync(
-      join(dir, 'Component.styled.tsx'),
-      `
-        import {Box} from '@sanity/ui'
-
-        export const RootBox = styled(Box)(({theme}) => ({}))
-      `,
-    )
-
-    writeFileSync(
-      join(dir, 'Component.tsx'),
-      `
-        import {Box} from 'another-package'
-        import {RootBox} from './Component.styled'
-
-        export function Component() {
-          return (
-            <>
-              <RootBox alignItems="center" />
-              <Box display="flex" />
-            </>
-          )
-        }
-      `,
-    )
-
-    const importerPath = join(dir, 'Component.tsx')
-    const source = readFileSync(importerPath, 'utf8')
-    const output = applyTransform(transform, {}, {source, path: importerPath}, {parser: 'tsx'})
+  },
+  'adds todo warning when imported styled Box wrapper should be replaced',
+)
 
+defineCrossFileTest(
+  transform,
+  {},
+  `
+    import {Box} from '@sanity/ui'
+
+    export const RootBox = styled(Box)(({theme}) => ({}))
+  `,
+  `
+    import {Box} from 'another-package'
+    import {RootBox} from './Component.styled'
+
+    export function Component() {
+      return (
+        <>
+          <RootBox alignItems="center" />
+          <Box display="flex" />
+        </>
+      )
+    }
+  `,
+  (output) => {
     expect(output).toContain('alignItems: "center"')
     expect(output).not.toContain('<RootBox alignItems="center" />')
     expect(output).toContain('<Box display="flex" />')
     expect(output).not.toContain('<Flex')
-  })
-
-  it('transforms styled Box wrappers imported through barrel re-exports', () => {
-    const dir = mkdtempSync(join(tmpdir(), 'ui-codemod-box-crossfile-barrel-'))
-
-    tempDirs.push(dir)
-
-    writeFileSync(
-      join(dir, 'Component.styled.tsx'),
-      `
-        import {Box} from '@sanity/ui'
-
-        export const RootBox = styled(Box)(({theme}) => ({}))
-      `,
-    )
-
-    writeFileSync(join(dir, 'index.ts'), `export {RootBox} from './Component.styled'`)
-
-    writeFileSync(
-      join(dir, 'Component.tsx'),
-      `
-        import {RootBox} from './index'
+  },
+  'does not rewrite unrelated Box from another package',
+)
 
-        export function Component() {
-          return <RootBox alignItems="center" />
-        }
-      `,
-    )
+defineCrossFileTest(
+  transform,
+  {},
+  `
+    import {Box} from '@sanity/ui'
 
-    const importerPath = join(dir, 'Component.tsx')
-    const source = readFileSync(importerPath, 'utf8')
-    const output = applyTransform(transform, {}, {source, path: importerPath}, {parser: 'tsx'})
+    export const RootBox = styled(Box)(({theme}) => ({}))
+  `,
+  `
+    import {RootBox} from './index'
 
+    export function Component() {
+      return <RootBox alignItems="center" />
+    }
+  `,
+  (output) => {
     expect(output).toContain('alignItems: "center"')
     expect(output).not.toContain('<RootBox alignItems="center" />')
-  })
-})
+  },
+  'transforms styled Box wrappers imported through barrel re-exports',
+  {
+    extraFiles: {
+      'index.ts': `export {RootBox} from './Component.styled'`,
+    },
+  },
+)

package/src/transforms/latest/flex/flex.test.ts

@@ -1,4 +1,6 @@
-import {defineInlineTest} from '../../../utils/testUtils'
+import {expect} from 'vitest'
+
+import {defineCrossFileTest, defineInlineTest} from '../../../utils/testUtils'
 import transform from './flex'
 
 defineInlineTest(
@@ -78,3 +80,78 @@ defineInlineTest(
   `,
   'moves grid props to style and updates mapped values',
 )
+
+defineCrossFileTest(
+  transform,
+  {},
+  `
+    import {Flex} from '@sanity/ui'
+
+    export const RootFlex = styled(Flex)(({theme}) => ({}))
+  `,
+  `
+    import {RootFlex} from './Component.styled'
+
+    export function Component() {
+      return <RootFlex align="center" />
+    }
+  `,
+  (output) => {
+    expect(output).toContain('<RootFlex alignItems="center" />')
+  },
+  'transforms attributes on imported styled Flex wrappers',
+)
+
+defineCrossFileTest(
+  transform,
+  {},
+  `
+    import {Flex} from '@sanity/ui'
+
+    export const RootFlex = styled(Flex)(({theme}) => ({}))
+  `,
+  `
+    import {Flex} from 'another-package'
+    import {RootFlex} from './Component.styled'
+
+    export function Component() {
+      return (
+        <>
+          <RootFlex align="center" />
+          <Flex direction="column" />
+        </>
+      )
+    }
+  `,
+  (output) => {
+    expect(output).toContain('<RootFlex alignItems="center" />')
+    expect(output).toContain('<Flex direction="column" />')
+  },
+  'does not transform attributes on unrelated Flex from another package',
+)
+
+defineCrossFileTest(
+  transform,
+  {},
+  `
+    import {Flex} from '@sanity/ui'
+
+    export const RootFlex = styled(Flex)(({theme}) => ({}))
+  `,
+  `
+    import {RootFlex} from './index'
+
+    export function Component() {
+      return <RootFlex align="center" />
+    }
+  `,
+  (output) => {
+    expect(output).toContain('<RootFlex alignItems="center" />')
+  },
+  'transforms styled Flex wrappers imported through barrel re-exports',
+  {
+    extraFiles: {
+      'index.ts': `export {RootFlex} from './Component.styled'`,
+    },
+  },
+)

package/src/transforms/latest/flex/flex.ts

@@ -2,10 +2,12 @@ import {type API, type FileInfo} from 'jscodeshift'
 
 import type {BaseOptions} from '../../../types/BaseOptions'
 import {getComponentLocalNames} from '../../../utils/getComponentLocalNames'
+import {getStyledComponentAliases} from '../../../utils/getStyledComponentAliases'
 import {shouldTransformComponent} from '../../../utils/shouldTransformComponent'
 import {transformAttributes} from '../../../utils/transformAttributes'
 import {transformComponent} from '../../../utils/transformComponent'
 import {transformImport} from '../../../utils/transformImport'
+import {transformStyledComponents} from '../../../utils/transformStyledComponents'
 import {FLEX_MODS} from './flex.mods'
 
 const TODO_WARNING = 'Please double check the Flex migration below'
@@ -20,8 +22,16 @@ export default function transform(
 
   return transformComponent(fileInfo, api, ({j, root, markChanged}) => {
     const localNames = getComponentLocalNames(j, root, 'Flex', options)
+    const styledAliases = getStyledComponentAliases(
+      j,
+      root,
+      'Flex',
+      fileInfo.path,
+      localNames,
+      options,
+    )
 
-    if (!shouldTransformComponent(j, root, 'Flex', localNames, options)) {
+    if (!shouldTransformComponent(j, root, 'Flex', localNames, options, styledAliases)) {
       return
     }
 
@@ -29,14 +39,24 @@ export default function transform(
       markChanged()
     }
 
-    root
-      .find(j.JSXOpeningElement, {
-        name: {type: 'JSXIdentifier', name: 'Flex'},
-      })
-      .forEach((path) => {
-        if (transformAttributes(j, path, FLEX_MODS, TODO_WARNING)) {
-          markChanged()
-        }
+    root.find(j.JSXOpeningElement).forEach((path) => {
+      const name = path.node.name
+
+      if (name.type !== 'JSXIdentifier' || !localNames.has(name.name)) {
+        return
+      }
+
+      if (transformAttributes(j, path, FLEX_MODS, TODO_WARNING)) {
+        markChanged()
+      }
+    })
+
+    if (
+      transformStyledComponents(j, root, styledAliases, () => true, {
+        callback: (path) => transformAttributes(j, path, FLEX_MODS, TODO_WARNING),
       })
+    ) {
+      markChanged()
+    }
   })
 }

package/src/utils/testUtils.ts

@@ -1,6 +1,12 @@
+import {mkdtempSync, readFileSync, rmSync, writeFileSync} from 'node:fs'
+import {tmpdir} from 'node:os'
+import {join} from 'node:path'
+
 import {type FileInfo, type Options, type Transform} from 'jscodeshift'
 import {expect, it} from 'vitest'
 
+import {clearModuleParseCache} from './parseModule'
+
 const applyTransform = require('jscodeshift/dist/testUtils').applyTransform
 
 export function defineInlineTest(
@@ -52,3 +58,42 @@ function runInlineTest(
   expectation(output)
   return output
 }
+
+export function defineCrossFileTest(
+  module: Transform,
+  options: Options,
+  styledInput: string,
+  importerInput: string,
+  assert: (output: string) => void,
+  testName?: string,
+  crossFileOptions?: {
+    extraFiles?: Record<string, string>
+  },
+) {
+  it(testName || 'transforms cross-file styled component correctly', async () => {
+    const dir = mkdtempSync(join(tmpdir(), 'ui-codemod-crossfile-'))
+
+    try {
+      writeFileSync(join(dir, 'Component.styled.tsx'), styledInput.trim())
+      writeFileSync(join(dir, 'Component.tsx'), importerInput.trim())
+
+      for (const [filePath, source] of Object.entries(crossFileOptions?.extraFiles ?? {})) {
+        writeFileSync(join(dir, filePath), source.trim())
+      }
+
+      const importerPath = join(dir, 'Component.tsx')
+      const source = readFileSync(importerPath, 'utf8')
+      const output = await applyTransform(
+        module,
+        options,
+        {source, path: importerPath},
+        {parser: 'tsx'},
+      )
+
+      assert(typeof output === 'string' ? output : '')
+    } finally {
+      clearModuleParseCache()
+      rmSync(dir, {recursive: true, force: true})
+    }
+  })
+}