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

package/src/utils/getNamedExportInit.ts

@@ -0,0 +1,111 @@
+import type {API, Expression, ExportSpecifier} from 'jscodeshift'
+
+import {parseModule} from './parseModule'
+import {resolveRelativeModulePath} from './resolveRelativeModulePath'
+
+export type NamedExportInit = {
+  init: Expression
+  modulePath: string
+}
+
+function findVariableInit(
+  j: API['jscodeshift'],
+  root: ReturnType<API['jscodeshift']>,
+  name: string,
+): Expression | null {
+  let init: Expression | null = null
+
+  root.find(j.VariableDeclarator).forEach((path) => {
+    const {id} = path.node
+
+    if (id.type === 'Identifier' && id.name === name && path.node.init) {
+      init = path.node.init
+    }
+  })
+
+  return init
+}
+
+function getExportSpecifierName(exported: ExportSpecifier['exported']): string | null {
+  if (exported.type === 'Identifier' || exported.type === 'JSXIdentifier') {
+    return exported.name
+  }
+
+  return null
+}
+
+export function getNamedExportInit(
+  j: API['jscodeshift'],
+  exportName: string,
+  filePath: string,
+  visited: Set<string> = new Set(),
+): NamedExportInit | null {
+  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
+    const reexportSource = typeof source?.value === 'string' ? source.value : null
+
+    if (declaration?.type === 'VariableDeclaration') {
+      for (const declarator of declaration.declarations) {
+        if (declarator.type !== 'VariableDeclarator') {
+          continue
+        }
+
+        if (
+          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
+}

package/src/utils/getStaticAttributeExpression.ts

@@ -1,15 +1,35 @@
 import type {API, JSXAttribute, JSXSpreadAttribute} from 'jscodeshift'
 
+import type {AnyExpression} from '../types/AnyExpression'
 import {getAttribute} from './getAttribute'
 import {getAttributeExpression} from './getAttributeExpression'
 
 export type CompositePrimitive = string | number | boolean
 
+export type StaticAttributeValue = CompositePrimitive | (CompositePrimitive | null | undefined)[]
+
+function getStaticPrimitive(expr: AnyExpression): CompositePrimitive | undefined {
+  if (
+    expr.type === 'StringLiteral' ||
+    expr.type === 'NumericLiteral' ||
+    expr.type === 'BooleanLiteral' ||
+    expr.type === 'Literal'
+  ) {
+    const {value} = expr
+
+    if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {
+      return value
+    }
+  }
+
+  return undefined
+}
+
 export function getStaticAttributeExpression(
   j: API['jscodeshift'],
   attrs: (JSXAttribute | JSXSpreadAttribute)[],
   name: string,
-): CompositePrimitive | null {
+): StaticAttributeValue | null {
   const attr = getAttribute(attrs, name)
 
   if (!attr) {
@@ -22,14 +42,47 @@ export function getStaticAttributeExpression(
     return null
   }
 
-  if (
-    expr.type === 'StringLiteral' ||
-    expr.type === 'NumericLiteral' ||
-    expr.type === 'BooleanLiteral' ||
-    expr.type === 'Literal'
-  ) {
-    return expr.value as string | number | boolean
+  const primitive = getStaticPrimitive(expr as AnyExpression)
+
+  if (primitive !== undefined) {
+    return primitive
+  }
+
+  if (expr.type !== 'ArrayExpression') {
+    return null
+  }
+
+  const elements = expr.elements as ((AnyExpression & {name?: string}) | null)[]
+  const values: (CompositePrimitive | null | undefined)[] = []
+
+  for (const element of elements) {
+    if (element === null || element.type === 'NullLiteral') {
+      values.push(null)
+      continue
+    }
+
+    if (element.type === 'SpreadElement') {
+      return null
+    }
+
+    if (element.type === 'Literal' && element.value === null) {
+      values.push(null)
+      continue
+    }
+
+    if (element.type === 'Identifier' && element.name === 'undefined') {
+      values.push(undefined)
+      continue
+    }
+
+    const elementValue = getStaticPrimitive(element)
+
+    if (elementValue === undefined) {
+      return null
+    }
+
+    values.push(elementValue)
   }
 
-  return null
+  return values
 }

package/src/utils/getStyledComponentAliases.ts

@@ -1,8 +1,13 @@
 import type {API, Collection} from 'jscodeshift'
 
+import type {BaseOptions} from '../types/BaseOptions'
+import {getComponentLocalNames} from './getComponentLocalNames'
+import {getNamedExportInit} from './getNamedExportInit'
 import {getStyledComponentName} from './getStyledComponentName'
+import {parseModule} from './parseModule'
+import {resolveRelativeModulePath} from './resolveRelativeModulePath'
 
-export function getStyledComponentAliases(
+export function getSameFileStyledComponentAliases(
   j: API['jscodeshift'],
   root: Collection,
   localNames: Iterable<string>,
@@ -26,3 +31,82 @@ export function getStyledComponentAliases(
 
   return aliases
 }
+
+export function getImportedStyledComponentAliases(
+  j: API['jscodeshift'],
+  root: Collection,
+  componentName: string,
+  filePath: string | undefined,
+  options?: BaseOptions,
+): Set<string> {
+  const aliases = new Set<string>()
+
+  if (!filePath) {
+    return aliases
+  }
+
+  root.find(j.ImportDeclaration).forEach((path) => {
+    const source = path.node.source.value
+
+    if (typeof source !== 'string') {
+      return
+    }
+
+    const resolvedPath = resolveRelativeModulePath(filePath, source)
+
+    if (!resolvedPath) {
+      return
+    }
+
+    for (const spec of path.node.specifiers ?? []) {
+      if (spec.type !== 'ImportSpecifier') {
+        continue
+      }
+
+      if ('importKind' in spec && spec.importKind === 'type') {
+        continue
+      }
+
+      if (spec.imported.type !== 'Identifier') {
+        continue
+      }
+
+      const exportName = spec.imported.name
+      const localName = spec.local?.type === 'Identifier' ? spec.local.name : exportName
+      const namedExport = getNamedExportInit(j, exportName, resolvedPath)
+
+      if (!namedExport) {
+        continue
+      }
+
+      const sourceRoot = parseModule(j, namedExport.modulePath)
+
+      if (!sourceRoot) {
+        continue
+      }
+
+      const exportLocalNames = getComponentLocalNames(j, sourceRoot, componentName, options)
+      const baseComponent = getStyledComponentName(namedExport.init)
+
+      if (baseComponent && exportLocalNames.has(baseComponent)) {
+        aliases.add(localName)
+      }
+    }
+  })
+
+  return aliases
+}
+
+export function getStyledComponentAliases(
+  j: API['jscodeshift'],
+  root: Collection,
+  componentName: string,
+  filePath: string | undefined,
+  localNames: Set<string>,
+  options?: BaseOptions,
+): Set<string> {
+  const sameFile = getSameFileStyledComponentAliases(j, root, localNames)
+  const imported = getImportedStyledComponentAliases(j, root, componentName, filePath, options)
+
+  return new Set([...sameFile, ...imported])
+}

package/src/utils/insertTodoWarning.ts

@@ -1,10 +1,4 @@
-import {
-  type API,
-  type ASTPath,
-  type ImportDeclaration,
-  type JSXOpeningElement,
-  type VariableDeclarator,
-} from 'jscodeshift'
+import {type API, type ASTPath, type ImportDeclaration, type JSXOpeningElement} from 'jscodeshift'
 
 type CommentableNode = {
   comments?: {type: string; value: string; leading?: boolean}[] | null
@@ -16,19 +10,13 @@ type CommentableNode = {
  */
 export function insertTodoWarning(
   j: API['jscodeshift'],
-  path: ASTPath<JSXOpeningElement | ImportDeclaration | VariableDeclarator>,
+  path: ASTPath<JSXOpeningElement | ImportDeclaration>,
   warning: string,
 ): boolean {
   let target: CommentableNode | null = null
 
   if (path.node.type === 'ImportDeclaration') {
     target = path.node
-  } else if (path.node.type === 'VariableDeclarator') {
-    const parent = path.parent
-
-    if (parent?.node.type === 'VariableDeclaration') {
-      target = parent.node
-    }
   } else if (path.parent?.node.type === 'JSXElement') {
     target = path.parent.node
   }

package/src/utils/parseModule.ts

@@ -0,0 +1,29 @@
+import {readFileSync} from 'node:fs'
+
+import type {API, Collection} from 'jscodeshift'
+
+const parseCache = new Map<string, Collection>()
+
+export function parseModule(j: API['jscodeshift'], filePath: string): Collection | null {
+  const cached = parseCache.get(filePath)
+
+  if (cached) {
+    return cached
+  }
+
+  try {
+    const source = readFileSync(filePath, 'utf8')
+    const root = j(source)
+
+    parseCache.set(filePath, root)
+
+    return root
+  } catch {
+    return null
+  }
+}
+
+/** @internal */
+export function clearModuleParseCache(): void {
+  parseCache.clear()
+}

package/src/utils/replaceElement.test.ts

@@ -21,9 +21,21 @@ const TO_MOD: AttributeMods = {
   },
 }
 
-function transform(fileInfo: FileInfo, api: API): string {
+function transform(
+  fileInfo: FileInfo,
+  api: API,
+  options?: {
+    setLocalNames?: boolean
+    unsetLocalNames?: boolean
+  },
+): string {
   const j = api.jscodeshift
   const root = j(fileInfo.source)
+  const localNames = options?.unsetLocalNames
+    ? (new Set() as Set<string>)
+    : options?.setLocalNames
+      ? getComponentLocalNames(j, root, 'Card')
+      : undefined
 
   replaceElement(
     j,
@@ -31,6 +43,7 @@ function transform(fileInfo: FileInfo, api: API): string {
     (attrs) => !getAttribute(attrs, 'margin'),
     {
       element: 'Card',
+      ...(localNames !== undefined ? {localNames} : {}),
       callback: (path) => transformAttributes(j, path, FROM_MOD, 'Warning'),
     },
     {
@@ -140,32 +153,9 @@ defineInlineTest(
   'replaces element and combines imports',
 )
 
-function transformWithLocalNames(fileInfo: FileInfo, api: API): string {
-  const j = api.jscodeshift
-  const root = j(fileInfo.source)
-  const localNames = getComponentLocalNames(j, root, 'Card')
-
-  replaceElement(
-    j,
-    root,
-    (attrs) => !getAttribute(attrs, 'margin'),
-    {
-      element: 'Card',
-      localNames,
-      callback: (path) => transformAttributes(j, path, FROM_MOD, 'Warning'),
-    },
-    {
-      element: 'Box',
-      callback: (path) => transformAttributes(j, path, TO_MOD, 'Warning'),
-    },
-  )
-
-  return root.toSource()
-}
-
 defineInlineTest(
-  transformWithLocalNames,
-  {},
+  transform,
+  {setLocalNames: true},
   `
   import {Card as LegacyCard} from '@sanity/ui'
 
@@ -179,3 +169,15 @@ defineInlineTest(
   `,
   'preserves aliased jsx name and rewrites import',
 )
+
+defineInlineTest(
+  transform,
+  {unsetLocalNames: true},
+  `
+  <Card padding={1} />
+  `,
+  `
+  <Card padding={1} />
+  `,
+  'does not match bare element when localNames is empty',
+)

package/src/utils/replaceElement.ts

@@ -1,11 +1,14 @@
 import type {API, ASTPath, JSXAttribute, JSXOpeningElement, JSXSpreadAttribute} from 'jscodeshift'
 
 import {addImportSpecifier} from './addImportSpecifier'
+import {getElementMatchNames} from './getElementMatchNames'
 import {removeUnusedImport} from './removeUnusedImport'
 import {transformImportAlias} from './transformImportAlias'
 
 /**
  * Replaces JSX component if `filter` passes. Runs callbacks and updates imports.
+ * If `localNames` is omitted, matches `from.element`. `localNames` may be an empty set,
+ * to avoid rewriting unrelated JSX when only cross-file styled aliases are present.
  * Returns whether the AST was updated.
  */
 export function replaceElement(
@@ -22,11 +25,7 @@ export function replaceElement(
     callback?: (path: ASTPath<JSXOpeningElement>) => boolean | void
   },
 ): boolean {
-  const names = new Set(from.localNames)
-
-  if (names.size === 0) {
-    names.add(from.element)
-  }
+  const names = getElementMatchNames(from.element, from.localNames)
 
   let hasChanges = false
   let needsDefaultImportUpdate = false

package/src/utils/replaceStyledComponent.test.ts

@@ -4,21 +4,31 @@ import {getComponentLocalNames} from './getComponentLocalNames'
 import {replaceStyledComponent} from './replaceStyledComponent'
 import {defineInlineTest} from './testUtils'
 
-function transform(fileInfo: FileInfo, api: API): string {
+function transform(
+  fileInfo: FileInfo,
+  api: API,
+  options?: {
+    setLocalNames?: boolean
+    unsetLocalNames?: boolean
+  },
+): string {
   const j = api.jscodeshift
   const root = j(fileInfo.source)
+  const localNames = options?.unsetLocalNames
+    ? (new Set() as Set<string>)
+    : options?.setLocalNames
+      ? getComponentLocalNames(j, root, 'Card')
+      : undefined
 
-  replaceStyledComponent(j, root, {element: 'Card'}, 'Box')
-
-  return root.toSource()
-}
-
-function transformWithLocalNames(fileInfo: FileInfo, api: API): string {
-  const j = api.jscodeshift
-  const root = j(fileInfo.source)
-  const localNames = getComponentLocalNames(j, root, 'Card')
-
-  replaceStyledComponent(j, root, {element: 'Card', localNames}, 'Box')
+  replaceStyledComponent(
+    j,
+    root,
+    {
+      element: 'Card',
+      ...(localNames !== undefined ? {localNames} : {}),
+    },
+    'Box',
+  )
 
   return root.toSource()
 }
@@ -40,8 +50,8 @@ defineInlineTest(
 )
 
 defineInlineTest(
-  transformWithLocalNames,
-  {},
+  transform,
+  {setLocalNames: true},
   `
   import {Card as LegacyCard} from '@sanity/ui'
 
@@ -55,3 +65,19 @@ defineInlineTest(
   `,
   'preserves aliased styled import and rewrites import',
 )
+
+defineInlineTest(
+  transform,
+  {unsetLocalNames: true},
+  `
+  import {Card} from '@sanity/ui'
+
+  const RootCard = styled(Card)(({theme}) => {})
+  `,
+  `
+  import {Card} from '@sanity/ui'
+
+  const RootCard = styled(Card)(({theme}) => {})
+  `,
+  'does not match styled component when localNames is empty',
+)

package/src/utils/replaceStyledComponent.ts

@@ -1,6 +1,7 @@
 import type {API} from 'jscodeshift'
 
 import {addImportSpecifier} from './addImportSpecifier'
+import {getElementMatchNames} from './getElementMatchNames'
 import {removeUnusedImport} from './removeUnusedImport'
 import {transformImportAlias} from './transformImportAlias'
 
@@ -13,11 +14,7 @@ export function replaceStyledComponent(
   },
   to: string,
 ): void {
-  const names = new Set(from.localNames)
-
-  if (names.size === 0) {
-    names.add(from.element)
-  }
+  const names = getElementMatchNames(from.element, from.localNames)
 
   let needsDefaultImportUpdate = false
   const aliases = new Set<string>()

package/src/utils/resolveRelativeModulePath.ts

@@ -0,0 +1,37 @@
+import {existsSync} from 'node:fs'
+import {dirname, join, resolve} from 'node:path'
+
+const EXTENSIONS = ['.tsx', '.ts', '.jsx', '.js'] as const
+
+export function resolveRelativeModulePath(
+  fromFilePath: string,
+  moduleSpecifier: string,
+): string | null {
+  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
+    }
+  }
+
+  if (existsSync(base)) {
+    return base
+  }
+
+  return null
+}

package/src/utils/shouldTransformComponent.test.ts

@@ -18,6 +18,20 @@ describe('shouldTransformComponent', () => {
     expect(shouldTransformComponent(j, root, 'Box', new Set())).toBe(false)
   })
 
+  it('returns true when styled aliases are passed in', () => {
+    const root = j(`
+      import {RootBox} from './Component.styled'
+
+      export function Component() {
+        return <RootBox />
+      }
+    `)
+
+    expect(
+      shouldTransformComponent(j, root, 'Box', new Set(), undefined, new Set(['RootBox'])),
+    ).toBe(true)
+  })
+
   it('returns false when fromPackage and toPackage are the same', () => {
     const root = j(`
       import {Box} from '@legacy/ui'

package/src/utils/shouldTransformComponent.ts

@@ -14,11 +14,16 @@ export function shouldTransformComponent(
   componentName: string,
   localNames: Set<string>,
   options?: BaseOptions,
+  styledAliases?: Set<string>,
 ): boolean {
   if (localNames.size > 0) {
     return true
   }
 
+  if (styledAliases && styledAliases.size > 0) {
+    return true
+  }
+
   const fromPackage = options?.fromPackage ?? DEFAULT_UI_PACKAGE
   const toPackage = options?.toPackage ?? DEFAULT_UI_PACKAGE
 

package/src/utils/transformAttributes.test.ts

@@ -290,7 +290,7 @@ defineInlineTest(
   transform,
   {},
   `
-  <div flex="1" />
+  <div flex={1} />
   `,
   `
   <div flexGrow={1} />
@@ -314,7 +314,7 @@ defineInlineTest(
   transform,
   {},
   `
-  <div flex={["2", "none"]} />
+  <div flex={[2, "none"]} />
   `,
   `
   <div