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

package/src/transforms/latest/flex/flex.ts

@@ -2,10 +2,12 @@ import {type API, type FileInfo} from 'jscodeshift'
 
 import type {BaseOptions} from '../../../types/BaseOptions'
 import {getComponentLocalNames} from '../../../utils/getComponentLocalNames'
+import {getStyledComponentAliases} from '../../../utils/getStyledComponentAliases'
 import {shouldTransformComponent} from '../../../utils/shouldTransformComponent'
 import {transformAttributes} from '../../../utils/transformAttributes'
 import {transformComponent} from '../../../utils/transformComponent'
 import {transformImport} from '../../../utils/transformImport'
+import {transformStyledComponents} from '../../../utils/transformStyledComponents'
 import {FLEX_MODS} from './flex.mods'
 
 const TODO_WARNING = 'Please double check the Flex migration below'
@@ -20,8 +22,16 @@ export default function transform(
 
   return transformComponent(fileInfo, api, ({j, root, markChanged}) => {
     const localNames = getComponentLocalNames(j, root, 'Flex', options)
+    const styledAliases = getStyledComponentAliases(
+      j,
+      root,
+      'Flex',
+      fileInfo.path,
+      localNames,
+      options,
+    )
 
-    if (!shouldTransformComponent(j, root, 'Flex', localNames, options)) {
+    if (!shouldTransformComponent(j, root, 'Flex', localNames, options, styledAliases)) {
       return
     }
 
@@ -29,14 +39,24 @@ export default function transform(
       markChanged()
     }
 
-    root
-      .find(j.JSXOpeningElement, {
-        name: {type: 'JSXIdentifier', name: 'Flex'},
-      })
-      .forEach((path) => {
-        if (transformAttributes(j, path, FLEX_MODS, TODO_WARNING)) {
-          markChanged()
-        }
+    root.find(j.JSXOpeningElement).forEach((path) => {
+      const name = path.node.name
+
+      if (name.type !== 'JSXIdentifier' || !localNames.has(name.name)) {
+        return
+      }
+
+      if (transformAttributes(j, path, FLEX_MODS, TODO_WARNING)) {
+        markChanged()
+      }
+    })
+
+    if (
+      transformStyledComponents(j, root, styledAliases, () => true, {
+        callback: (path) => transformAttributes(j, path, FLEX_MODS, TODO_WARNING),
       })
+    ) {
+      markChanged()
+    }
   })
 }

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

package/src/utils/testUtils.ts

@@ -1,6 +1,12 @@
+import {mkdtempSync, readFileSync, rmSync, writeFileSync} from 'node:fs'
+import {tmpdir} from 'node:os'
+import {join} from 'node:path'
+
 import {type FileInfo, type Options, type Transform} from 'jscodeshift'
 import {expect, it} from 'vitest'
 
+import {clearModuleParseCache} from './parseModule'
+
 const applyTransform = require('jscodeshift/dist/testUtils').applyTransform
 
 export function defineInlineTest(
@@ -52,3 +58,42 @@ function runInlineTest(
   expectation(output)
   return output
 }
+
+export function defineCrossFileTest(
+  module: Transform,
+  options: Options,
+  styledInput: string,
+  importerInput: string,
+  assert: (output: string) => void,
+  testName?: string,
+  crossFileOptions?: {
+    extraFiles?: Record<string, string>
+  },
+) {
+  it(testName || 'transforms cross-file styled component correctly', async () => {
+    const dir = mkdtempSync(join(tmpdir(), 'ui-codemod-crossfile-'))
+
+    try {
+      writeFileSync(join(dir, 'Component.styled.tsx'), styledInput.trim())
+      writeFileSync(join(dir, 'Component.tsx'), importerInput.trim())
+
+      for (const [filePath, source] of Object.entries(crossFileOptions?.extraFiles ?? {})) {
+        writeFileSync(join(dir, filePath), source.trim())
+      }
+
+      const importerPath = join(dir, 'Component.tsx')
+      const source = readFileSync(importerPath, 'utf8')
+      const output = await applyTransform(
+        module,
+        options,
+        {source, path: importerPath},
+        {parser: 'tsx'},
+      )
+
+      assert(typeof output === 'string' ? output : '')
+    } finally {
+      clearModuleParseCache()
+      rmSync(dir, {recursive: true, force: true})
+    }
+  })
+}

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