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

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

@@ -1,8 +1,86 @@
 import "jscodeshift";
-import { insertTodoWarning, transformComponent, getComponentLocalNames, shouldTransformComponent, transformImport, transformAttributes, getStaticAttributeExpression } from "../../../_chunks-es/transformComponent.js";
+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 { 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;
@@ -19,7 +97,7 @@ function getStyledComponentName(node) {
   }
   return current.type === "MemberExpression" && current.object ? getStyledComponentName(current.object) : null;
 }
-function getStyledComponentAliases(j, root, localNames) {
+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;
@@ -29,35 +107,72 @@ function getStyledComponentAliases(j, root, localNames) {
     baseComponent && names.has(baseComponent) && aliases.add(id.name);
   }), aliases;
 }
-const DEFAULT_WARNING = "Please double check styled-component migration(s) below";
+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, aliasesToWarn = /* @__PURE__ */ new Set();
+  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 ?? [];
-    filter(attrs) || aliasesToWarn.add(name.name), filter(attrs) && callback?.(path) && (hasChanges = !0);
-  }), root.find(j.VariableDeclarator).forEach((path) => {
-    const { id } = path.node;
-    id.type === "Identifier" && aliasesToWarn.has(id.name) && insertTodoWarning(j, path, warning) && (hasChanges = !0);
+    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(s) below";
+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 || {};
   return transformComponent(fileInfo, api, ({ j, root, markChanged }) => {
-    const localNames = getComponentLocalNames(j, root, "Box", options), styledAliases = getStyledComponentAliases(j, root, localNames);
-    if (!shouldTransformComponent(j, root, "Box", localNames, options))
+    const localNames = getComponentLocalNames(j, root, "Box", options), styledAliases = getStyledComponentAliases(
+      j,
+      root,
+      "Box",
+      fileInfo.path,
+      localNames,
+      options
+    );
+    if (!shouldTransformComponent(j, root, "Box", localNames, options, styledAliases))
       return;
-    const replaceWithFlex = (attrs) => {
-      const display = getStaticAttributeExpression(j, attrs, "display");
-      return display === "flex" || display == "inline-flex";
-    }, replaceWithGrid = (attrs) => {
-      const display = getStaticAttributeExpression(j, attrs, "display");
-      return display === "grid" || display == "inline-grid";
-    };
+    const matchesDisplayValue = (attrs, suffix, exclude) => {
+      const display = getStaticAttributeExpression(j, attrs, "display") || [], values = Array.isArray(display) ? display : [display];
+      let matchesExclude;
+      for (const excluded of exclude)
+        if (values.some((value) => typeof value == "string" && value.endsWith(excluded))) {
+          matchesExclude = !0;
+          break;
+        }
+      return matchesExclude ? !1 : values.some((value) => typeof value == "string" && value.endsWith(suffix));
+    }, replaceWithFlex = (attrs) => matchesDisplayValue(attrs, "flex", ["block", "inline", "grid"]), replaceWithGrid = (attrs) => matchesDisplayValue(attrs, "grid", ["block", "inline", "flex"]);
     transformImport(j, root, "Box", fromPackage, toPackage) && markChanged(), replaceElement(
       j,
       root,

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

@@ -1 +1 @@
-{"version":3,"file":"box.js","sources":["../../../../src/utils/getStyledComponentName.ts","../../../../src/utils/getStyledComponentAliases.ts","../../../../src/utils/transformStyledComponents.ts","../../../../src/transforms/latest/box/box.ts"],"sourcesContent":["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 {getStyledComponentName} from './getStyledComponentName'\n\nexport function getStyledComponentAliases(\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","import type {API, ASTPath, JSXAttribute, JSXOpeningElement, JSXSpreadAttribute} from 'jscodeshift'\n\nimport {insertTodoWarning} from './insertTodoWarning'\n\nconst DEFAULT_WARNING = 'Please double check styled-component migration(s) below'\n\n/**\n * Runs callback on JSX styled-component if `filter` passes. Otherwise, adds\n * a TODO on the styled definition if 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  const aliasesToWarn = new Set<string>()\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      aliasesToWarn.add(name.name)\n    }\n\n    if (filter(attrs)) {\n      if (callback?.(path)) {\n        hasChanges = true\n      }\n    }\n  })\n\n  root.find(j.VariableDeclarator).forEach((path) => {\n    const {id} = path.node\n\n    if (id.type === 'Identifier' && aliasesToWarn.has(id.name)) {\n      if (insertTodoWarning(j, path, warning)) {\n        hasChanges = true\n      }\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(s) 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(j, root, localNames)\n\n    if (!shouldTransformComponent(j, root, 'Box', localNames, options)) {\n      return\n    }\n\n    const replaceWithFlex = (attrs: (JSXAttribute | JSXSpreadAttribute)[]) => {\n      const display = getStaticAttributeExpression(j, attrs, 'display')\n      return display === 'flex' || display == 'inline-flex'\n    }\n\n    const replaceWithGrid = (attrs: (JSXAttribute | JSXSpreadAttribute)[]) => {\n      const display = getStaticAttributeExpression(j, attrs, 'display')\n      return display === 'grid' || display == 'inline-grid'\n    }\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/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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"}

package/package.json

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

package/src/constants/latest/layout-mods.ts

@@ -109,6 +109,18 @@ export const LAYOUT_MODS: AttributeMods = {
           none: 'auto',
           auto: 'auto',
           initial: 'auto',
+          1: '0%',
+          2: '0%',
+          3: '0%',
+          4: '0%',
+          5: '0%',
+          6: '0%',
+          7: '0%',
+          8: '0%',
+          9: '0%',
+          10: '0%',
+          11: '0%',
+          12: '0%',
         },
       },
       {

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

@@ -1,3 +1,12 @@
+import {mkdtempSync, readFileSync, rmSync, writeFileSync} from 'node:fs'
+import {tmpdir} from 'node:os'
+import {join} from 'node:path'
+
+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 transform from './box'
 
@@ -178,6 +187,38 @@ defineInlineTest(
   'replaces Box with Grid when display is grid',
 )
 
+defineInlineTest(
+  transform,
+  {},
+  `
+  <Box display={['none', undefined, null, 'flex']} />
+  `,
+  `
+  <Flex display={['none', undefined, null, 'flex']} />
+  `,
+  'replaces Box with Flex when display is an array with flex',
+)
+
+defineInlineTest(
+  transform,
+  {},
+  `
+  <>
+    <Box display={['block', undefined, null, 'flex']} />
+    {/* This forces a change to avoid the transform return null */}
+    <Box display="flex" />
+  </>
+  `,
+  `
+  <>
+    <Box display={['block', undefined, null, 'flex']} />
+    {/* This forces a change to avoid the transform return null */}
+    <Flex display="flex" />
+  </>
+  `,
+  'does not replace Box with Flex when display is a mixed array',
+)
+
 defineInlineTest(
   transform,
   {},
@@ -194,11 +235,168 @@ defineInlineTest(
   import {Box} from '@sanity/ui'
 
   function Example() {
-    // UI-CODEMOD TODO: Please double check styled(Box) migration(s) below
-    const RootBox = styled(Box)(({theme}) => ({}));
+    const RootBox = styled(Box)(({theme}) => ({}))
 
-    return <RootBox display="flex" alignItems="center" />
+    return (
+      // UI-CODEMOD TODO: Please double check styled(Box) migration below
+      <RootBox display="flex" alignItems="center" />
+    );
   }
   `,
-  'warns and does not transform attributes if styled Box definition should be replaced',
+  '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" />
+        }
+      `,
+    )
+
+    const importerPath = join(dir, 'Component.tsx')
+    const source = readFileSync(importerPath, 'utf8')
+    const output = applyTransform(transform, {}, {source, path: importerPath}, {parser: 'tsx'})
+
+    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'
+
+        export function Component() {
+          return <RootBox display="flex" alignItems="center" />
+        }
+      `,
+    )
+
+    const importerPath = join(dir, 'Component.tsx')
+    const source = readFileSync(importerPath, 'utf8')
+    const output = applyTransform(transform, {}, {source, path: importerPath}, {parser: 'tsx'})
+
+    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'})
+
+    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'
+
+        export function Component() {
+          return <RootBox alignItems="center" />
+        }
+      `,
+    )
+
+    const importerPath = join(dir, 'Component.tsx')
+    const source = readFileSync(importerPath, 'utf8')
+    const output = applyTransform(transform, {}, {source, path: importerPath}, {parser: 'tsx'})
+
+    expect(output).toContain('alignItems: "center"')
+    expect(output).not.toContain('<RootBox alignItems="center" />')
+  })
+})

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

@@ -17,7 +17,7 @@ import {BOX_MODS} from './box.mods'
 const BOX_TODO_WARNING = 'Please double check the Box migration below'
 const FLEX_TODO_WARNING = 'Please double check the Flex migration below'
 const GRID_TODO_WARNING = 'Please double check the Grid migration below'
-const STYLED_TODO_WARNING = 'Please double check styled(Box) migration(s) below'
+const STYLED_TODO_WARNING = 'Please double check styled(Box) migration below'
 
 /** @internal */
 export default function transform(
@@ -29,22 +29,48 @@ export default function transform(
 
   return transformComponent(fileInfo, api, ({j, root, markChanged}) => {
     const localNames = getComponentLocalNames(j, root, 'Box', options)
-    const styledAliases = getStyledComponentAliases(j, root, localNames)
+    const styledAliases = getStyledComponentAliases(
+      j,
+      root,
+      'Box',
+      fileInfo.path,
+      localNames,
+      options,
+    )
 
-    if (!shouldTransformComponent(j, root, 'Box', localNames, options)) {
+    if (!shouldTransformComponent(j, root, 'Box', localNames, options, styledAliases)) {
       return
     }
 
-    const replaceWithFlex = (attrs: (JSXAttribute | JSXSpreadAttribute)[]) => {
-      const display = getStaticAttributeExpression(j, attrs, 'display')
-      return display === 'flex' || display == 'inline-flex'
-    }
+    const matchesDisplayValue = (
+      attrs: (JSXAttribute | JSXSpreadAttribute)[],
+      suffix: string,
+      exclude: string[],
+    ) => {
+      const display = getStaticAttributeExpression(j, attrs, 'display') || []
+      const values = Array.isArray(display) ? display : [display]
+      let matchesExclude
+
+      for (const excluded of exclude) {
+        if (values.some((value) => typeof value === 'string' && value.endsWith(excluded))) {
+          matchesExclude = true
+          break
+        }
+      }
+
+      if (matchesExclude) {
+        return false
+      }
 
-    const replaceWithGrid = (attrs: (JSXAttribute | JSXSpreadAttribute)[]) => {
-      const display = getStaticAttributeExpression(j, attrs, 'display')
-      return display === 'grid' || display == 'inline-grid'
+      return values.some((value) => typeof value === 'string' && value.endsWith(suffix))
     }
 
+    const replaceWithFlex = (attrs: (JSXAttribute | JSXSpreadAttribute)[]) =>
+      matchesDisplayValue(attrs, 'flex', ['block', 'inline', 'grid'])
+
+    const replaceWithGrid = (attrs: (JSXAttribute | JSXSpreadAttribute)[]) =>
+      matchesDisplayValue(attrs, 'grid', ['block', 'inline', 'flex'])
+
     if (transformImport(j, root, 'Box', fromPackage, toPackage)) {
       markChanged()
     }

package/src/utils/getElementMatchNames.ts

@@ -0,0 +1,7 @@
+export function getElementMatchNames(element: string, localNames?: Iterable<string>): Set<string> {
+  if (localNames === undefined) {
+    return new Set([element])
+  }
+
+  return new Set(localNames)
+}

package/src/utils/getMappingValue.ts

@@ -2,18 +2,6 @@ import type {AnyExpression} from '../types/AnyExpression'
 import type {AttributeMapping} from '../types/AttributeMods'
 
 export function getMappingValue(mapping: AttributeMapping, expr: AnyExpression) {
-  let matchedVal
-
-  for (const val in mapping) {
-    if (expr.value === mapping[val]) {
-      matchedVal = mapping[val]
-    }
-  }
-
-  if (matchedVal) {
-    return matchedVal
-  }
-
   let key
 
   if (
@@ -34,18 +22,27 @@ export function getMappingValue(mapping: AttributeMapping, expr: AnyExpression)
     }
   }
 
-  if (!key) {
-    return
-  }
+  if (key) {
+    if (Object.prototype.hasOwnProperty.call(mapping, key)) {
+      return mapping[key]
+    }
 
-  if (Object.prototype.hasOwnProperty.call(mapping, key)) {
-    return mapping[key]
-  }
+    const number = Number(key)
 
-  const number = Number(key)
+    if (!Number.isNaN(number) && Object.prototype.hasOwnProperty.call(mapping, number)) {
+      return mapping[number]
+    }
+  }
 
-  if (!Number.isNaN(number) && Object.prototype.hasOwnProperty.call(mapping, number)) {
-    return mapping[number]
+  if (
+    expr.type === 'BooleanLiteral' ||
+    (expr.type === 'Literal' && typeof expr.value === 'boolean')
+  ) {
+    for (const val in mapping) {
+      if (expr.value === mapping[val]) {
+        return mapping[val]
+      }
+    }
   }
 
   return