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

package/package.json

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

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/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()
+}