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

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/transformStyledComponents.test.ts

@@ -1,13 +1,20 @@
+import {mkdtempSync, readFileSync, rmSync, writeFileSync} from 'node:fs'
+import {tmpdir} from 'node:os'
+import {join} from 'node:path'
+
 import {type API, type FileInfo} from 'jscodeshift'
+import jscodeshift from 'jscodeshift'
+import {afterEach, describe, expect, it} from 'vitest'
 
 import {getAttribute} from './getAttribute'
 import {getComponentLocalNames} from './getComponentLocalNames'
 import {getStyledComponentAliases} from './getStyledComponentAliases'
+import {clearModuleParseCache} from './parseModule'
 import {defineInlineTest} from './testUtils'
 import {transformAttributes} from './transformAttributes'
 import {transformStyledComponents} from './transformStyledComponents'
 
-const DEFAULT_WARNING = 'Please double check styled-component migration(s) below'
+const DEFAULT_WARNING = 'Please double check styled-component migration below'
 const CUSTOM_WARNING =
   'Please double check styled(Card) migration — update to styled(Box) manually if needed'
 
@@ -22,7 +29,7 @@ function transform(
   const j = api.jscodeshift
   const root = j(fileInfo.source)
   const localNames = getComponentLocalNames(j, root, 'Card')
-  const styledAliases = getStyledComponentAliases(j, root, localNames)
+  const styledAliases = getStyledComponentAliases(j, root, 'Card', fileInfo.path, localNames)
 
   transformStyledComponents(j, root, styledAliases, (attrs) => !!getAttribute(attrs, 'margin'), {
     warning: options?.warning,
@@ -111,13 +118,15 @@ defineInlineTest(
   import {Card} from '@sanity/ui'
 
   function Example() {
-    // UI-CODEMOD TODO: ${DEFAULT_WARNING}
-    const RootCard = styled(Card)(({theme}) => ({}));
+    const RootCard = styled(Card)(({theme}) => ({}))
 
-    return <RootCard padding={1} />
+    return (
+      // UI-CODEMOD TODO: ${DEFAULT_WARNING}
+      <RootCard padding={1} />
+    );
   }
   `,
-  'adds todo warning on styled definition when filter does not match',
+  'adds todo warning on styled component jsx instances when filter does not match',
 )
 
 defineInlineTest(
@@ -136,13 +145,15 @@ defineInlineTest(
   import {Card} from '@sanity/ui'
 
   function Example() {
-    // UI-CODEMOD TODO: ${CUSTOM_WARNING}
-    const RootCard = styled(Card)(({theme}) => ({}));
+    const RootCard = styled(Card)(({theme}) => ({}))
 
-    return <RootCard padding={1} />
+    return (
+      // UI-CODEMOD TODO: ${CUSTOM_WARNING}
+      <RootCard padding={1} />
+    );
   }
   `,
-  'adds custom todo warning on styled definition when filter does not match',
+  'adds custom todo warning on styled component jsx instances when filter does not match',
 )
 
 defineInlineTest(
@@ -152,21 +163,76 @@ defineInlineTest(
   import {Card} from '@sanity/ui'
 
   function Example() {
-    // UI-CODEMOD TODO: ${DEFAULT_WARNING}
     const RootCard = styled(Card)(({theme}) => ({}))
 
-    return <RootCard padding={1} />
+    return (
+      // UI-CODEMOD TODO: ${DEFAULT_WARNING}
+      <RootCard padding={1} />
+    );
   }
   `,
   `
   import {Card} from '@sanity/ui'
 
   function Example() {
-    // UI-CODEMOD TODO: ${DEFAULT_WARNING}
     const RootCard = styled(Card)(({theme}) => ({}))
 
-    return <RootCard padding={1} />
+    return (
+      // UI-CODEMOD TODO: ${DEFAULT_WARNING}
+      <RootCard padding={1} />
+    );
   }
   `,
   'does not duplicate todo warning',
 )
+
+describe('imported styled aliases', () => {
+  const j = jscodeshift
+  const tempDirs: string[] = []
+
+  afterEach(() => {
+    clearModuleParseCache()
+
+    for (const dir of tempDirs.splice(0)) {
+      rmSync(dir, {recursive: true, force: true})
+    }
+  })
+
+  it('adds todo warning on styled component jsx instances when filter does not match', () => {
+    const dir = mkdtempSync(join(tmpdir(), 'ui-codemod-styled-crossfile-'))
+
+    tempDirs.push(dir)
+
+    writeFileSync(
+      join(dir, 'Component.styled.tsx'),
+      `
+        import {Card} from '@sanity/ui'
+
+        export const RootCard = styled(Card)(({theme}) => ({}))
+      `,
+    )
+
+    writeFileSync(
+      join(dir, 'Component.tsx'),
+      `
+        import {RootCard} from './Component.styled'
+
+        export function Component() {
+          return <RootCard padding={1} />
+        }
+      `,
+    )
+
+    const importerPath = join(dir, 'Component.tsx')
+    const root = j(readFileSync(importerPath, 'utf8'))
+    const localNames = getComponentLocalNames(j, root, 'Card')
+    const styledAliases = getStyledComponentAliases(j, root, 'Card', importerPath, localNames)
+
+    transformStyledComponents(j, root, styledAliases, (attrs) => !!getAttribute(attrs, 'margin'), {
+      warning: DEFAULT_WARNING,
+    })
+
+    expect(root.toSource()).toContain(`UI-CODEMOD TODO: ${DEFAULT_WARNING}`)
+    expect(root.toSource()).not.toContain('const RootCard = styled(Card)')
+  })
+})

package/src/utils/transformStyledComponents.ts

@@ -2,11 +2,11 @@ import type {API, ASTPath, JSXAttribute, JSXOpeningElement, JSXSpreadAttribute}
 
 import {insertTodoWarning} from './insertTodoWarning'
 
-const DEFAULT_WARNING = 'Please double check styled-component migration(s) below'
+const DEFAULT_WARNING = 'Please double check styled-component migration below'
 
 /**
  * Runs callback on JSX styled-component if `filter` passes. Otherwise, adds
- * a TODO on the styled definition if manual review is needed.
+ * a TODO on the component JSX instance when manual review is needed.
  * Returns whether the AST was updated.
  */
 export function transformStyledComponents(
@@ -21,7 +21,6 @@ export function transformStyledComponents(
 ): boolean {
   const names = new Set(aliases)
   const {callback, warning = DEFAULT_WARNING} = options
-  const aliasesToWarn = new Set<string>()
   let hasChanges = false
 
   root.find(j.JSXOpeningElement).forEach((path) => {
@@ -34,23 +33,15 @@ export function transformStyledComponents(
     const attrs = path.node.attributes ?? []
 
     if (!filter(attrs)) {
-      aliasesToWarn.add(name.name)
-    }
-
-    if (filter(attrs)) {
-      if (callback?.(path)) {
+      if (insertTodoWarning(j, path, warning)) {
         hasChanges = true
       }
-    }
-  })
 
-  root.find(j.VariableDeclarator).forEach((path) => {
-    const {id} = path.node
+      return
+    }
 
-    if (id.type === 'Identifier' && aliasesToWarn.has(id.name)) {
-      if (insertTodoWarning(j, path, warning)) {
-        hasChanges = true
-      }
+    if (callback?.(path)) {
+      hasChanges = true
     }
   })
 

package/src/utils/getComponentJsxNames.ts

@@ -1,17 +0,0 @@
-import type {API, Collection} from 'jscodeshift'
-
-import type {BaseOptions} from '../types/BaseOptions'
-import {getComponentLocalNames} from './getComponentLocalNames'
-import {getStyledComponentAliases} from './getStyledComponentAliases'
-
-export function getComponentJsxNames(
-  j: API['jscodeshift'],
-  root: Collection,
-  componentName: string,
-  options?: BaseOptions,
-): Set<string> {
-  const localNames = getComponentLocalNames(j, root, componentName, options)
-  const styledAliases = getStyledComponentAliases(j, root, localNames)
-
-  return new Set([...localNames, ...styledAliases])
-}