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

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])
-}