@planningcenter/tapestry-migration-cli 3.2.2-rc.11 → 3.2.2-rc.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/tapestry-migration-cli",
-  "version": "3.2.2-rc.11",
+  "version": "3.2.2-rc.12",
   "description": "CLI tool for Tapestry migrations",
   "type": "module",
   "main": "dist/index.js",
@@ -32,7 +32,7 @@
   },
   "devDependencies": {
     "@emotion/react": "^11.14.0",
-    "@planningcenter/tapestry": "^3.2.2-rc.11",
+    "@planningcenter/tapestry": "^3.2.2-rc.12",
     "@planningcenter/tapestry-react": "^4.11.5",
     "@types/jscodeshift": "^17.3.0",
     "@types/node": "^20.0.0",
@@ -52,5 +52,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "d64a6e07db10af8f16bc160ea3857d30524d68e3"
+  "gitHead": "de4d6b4f5e4de190f2df030e208a7f6ab637bf59"
 }

package/src/components/shared/transformFactories/stylePropTransformFactory.test.ts

@@ -0,0 +1,294 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import { stylePropTransformFactory } from "./stylePropTransformFactory"
+
+const j = jscodeshift.withParser("tsx")
+
+function applyTransform(
+  transform: ReturnType<typeof stylePropTransformFactory>,
+  source: string
+): string {
+  const fileInfo = { path: "test.tsx", source }
+  const result = transform(
+    fileInfo,
+    { j, jscodeshift: j, report: () => {}, stats: () => {} },
+    {}
+  ) as string | null
+  return result || source
+}
+
+describe("stylePropTransformFactory", () => {
+  describe("grid alias remapping", () => {
+    const transform = stylePropTransformFactory({
+      stylesToRemove: [],
+      targetComponent: "Box",
+      targetPackage: "@planningcenter/tapestry-react",
+    })
+
+    it("remaps column/row string props to gridColumn/gridRow via splitStyles", () => {
+      const input = `import { Box } from "@planningcenter/tapestry-react";<Box column="1 / 3" row="2 / 4" />`
+      const result = applyTransform(transform, input)
+      expect(result).toMatchInlineSnapshot(`
+        "import { Box } from "@planningcenter/tapestry-react";<Box
+          style={{
+            gridColumn: "1 / 3",
+            gridRow: "2 / 4"
+          }} />"
+      `)
+    })
+
+    it("remaps column/row expression props to gridColumn/gridRow", () => {
+      const input = `import { Box } from "@planningcenter/tapestry-react";<Box column={1} row={2} />`
+      const result = applyTransform(transform, input)
+      expect(result).toMatchInlineSnapshot(`
+        "import { Box } from "@planningcenter/tapestry-react";<Box
+          style={{
+            gridColumn: 1,
+            gridRow: 2
+          }} />"
+      `)
+    })
+
+    it("remaps column/row identifier expression props to gridColumn/gridRow", () => {
+      const input = `import { Box } from "@planningcenter/tapestry-react";<Box column={col} row={r} />`
+      const result = applyTransform(transform, input)
+      expect(result).toMatchInlineSnapshot(`
+        "import { Box } from "@planningcenter/tapestry-react";<Box
+          style={{
+            gridColumn: col,
+            gridRow: r
+          }} />"
+      `)
+    })
+
+    it("remaps columnStart/columnEnd/rowStart/rowEnd expression props", () => {
+      const input = `import { Box } from "@planningcenter/tapestry-react";<Box columnStart={1} columnEnd={3} rowStart={2} rowEnd={4} />`
+      const result = applyTransform(transform, input)
+      expect(result).toMatchInlineSnapshot(`
+        "import { Box } from "@planningcenter/tapestry-react";<Box
+          style={{
+            gridColumnStart: 1,
+            gridColumnEnd: 3,
+            gridRowStart: 2,
+            gridRowEnd: 4
+          }} />"
+      `)
+    })
+
+    it("remaps direction expression prop to flexDirection", () => {
+      const input = `import { Box } from "@planningcenter/tapestry-react";<Box direction={dir} />`
+      const result = applyTransform(transform, input)
+      expect(result).toMatchInlineSnapshot(`
+        "import { Box } from "@planningcenter/tapestry-react";<Box style={{
+          flexDirection: dir
+        }} />"
+      `)
+    })
+
+    // Conditional expressions can't be evaluated at codemod time, so they
+    // bypass splitStyles and land in directProps as raw source. Without the
+    // alias map, the resulting `style` object would contain non-CSS keys
+    // like `column` / `row` instead of `gridColumn` / `gridRow`.
+    it("remaps column/row ternary expression props to gridColumn/gridRow", () => {
+      const input = `import { Box } from "@planningcenter/tapestry-react";<Box column={filter ? '1' : '2'} row={filter ? '2' : undefined} />`
+      const result = applyTransform(transform, input)
+      expect(result).toMatchInlineSnapshot(`
+        "import { Box } from "@planningcenter/tapestry-react";<Box
+          style={{
+            gridColumn: filter ? '1' : '2',
+            gridRow: filter ? '2' : undefined
+          }} />"
+      `)
+    })
+  })
+
+  describe("non-aliased style props", () => {
+    const transform = stylePropTransformFactory({
+      stylesToRemove: [],
+      targetComponent: "Box",
+      targetPackage: "@planningcenter/tapestry-react",
+    })
+
+    it("preserves the prop name for non-aliased identifier expression props", () => {
+      const input = `import { Box } from "@planningcenter/tapestry-react";<Box marginTop={spacing} />`
+      const result = applyTransform(transform, input)
+      expect(result).toMatchInlineSnapshot(`
+        "import { Box } from "@planningcenter/tapestry-react";<Box style={{
+          marginTop: spacing
+        }} />"
+      `)
+    })
+  })
+
+  describe("value-transforming aliases", () => {
+    const transform = stylePropTransformFactory({
+      stylesToRemove: [],
+      targetComponent: "Box",
+      targetPackage: "@planningcenter/tapestry-react",
+    })
+
+    it("comments out the renamed `wrap` → `flexWrap` and emits a TODO for expression values", () => {
+      const input = `import { Box } from "@planningcenter/tapestry-react";<Box wrap={someBool} />`
+      const result = applyTransform(transform, input)
+      expect(result).toMatchInlineSnapshot(`
+        "import { Box } from "@planningcenter/tapestry-react";/* TODO: tapestry-migration (styleProp): migrated from \`wrap\`; value may need manual transformation: flexWrap: someBool */
+        <Box />"
+      `)
+    })
+
+    it("comments out renamed `grow`/`shrink`/`basis` props with TODOs", () => {
+      const input = `import { Box } from "@planningcenter/tapestry-react";<Box grow={g} shrink={s} basis={b} />`
+      const result = applyTransform(transform, input)
+      expect(result).toMatchInlineSnapshot(`
+        "import { Box } from "@planningcenter/tapestry-react";/* TODO: tapestry-migration (styleProp): migrated from \`grow\`; value may need manual transformation: flexGrow: g */
+        /* TODO: tapestry-migration (styleProp): migrated from \`shrink\`; value may need manual transformation: flexShrink: s */
+        /* TODO: tapestry-migration (styleProp): migrated from \`basis\`; value may need manual transformation: flexBasis: b */
+        <Box />"
+      `)
+    })
+
+    it("comments out fanned-out `marginHorizontal` → marginLeft/marginRight with a TODO", () => {
+      const input = `import { Box } from "@planningcenter/tapestry-react";<Box marginHorizontal={spacing} />`
+      const result = applyTransform(transform, input)
+      expect(result).toMatchInlineSnapshot(`
+        "import { Box } from "@planningcenter/tapestry-react";/* TODO: tapestry-migration (styleProp): migrated from \`marginHorizontal\`; value may need manual transformation: marginLeft: spacing; marginRight: spacing */
+        <Box />"
+      `)
+    })
+
+    it("anchors commented-out renamed-key props inline when a real style key is present", () => {
+      const input = `import { Box } from "@planningcenter/tapestry-react";<Box wrap={someBool} marginTop={spacing} />`
+      const result = applyTransform(transform, input)
+      expect(result).toMatchInlineSnapshot(`
+        "import { Box } from "@planningcenter/tapestry-react";<Box
+          style={{
+            /* TODO: tapestry-migration (styleProp): migrated from \`wrap\`; value may need manual transformation */
+            // flexWrap: someBool,
+            marginTop: spacing
+          }} />"
+      `)
+    })
+
+    it("comments out fanned-out `paddingVertical` → paddingTop/paddingBottom", () => {
+      const input = `import { Box } from "@planningcenter/tapestry-react";<Box paddingVertical={p} />`
+      const result = applyTransform(transform, input)
+      expect(result).toMatchInlineSnapshot(`
+        "import { Box } from "@planningcenter/tapestry-react";/* TODO: tapestry-migration (styleProp): migrated from \`paddingVertical\`; value may need manual transformation: paddingTop: p; paddingBottom: p */
+        <Box />"
+      `)
+    })
+
+    it("comments out fanned-out `radius` → all four borderRadius corners", () => {
+      const input = `import { Box } from "@planningcenter/tapestry-react";<Box radius={r} />`
+      const result = applyTransform(transform, input)
+      expect(result).toMatchInlineSnapshot(`
+        "import { Box } from "@planningcenter/tapestry-react";/* TODO: tapestry-migration (styleProp): migrated from \`radius\`; value may need manual transformation: borderTopLeftRadius: r; borderTopRightRadius: r; borderBottomRightRadius: r; borderBottomLeftRadius: r */
+        <Box />"
+      `)
+    })
+
+    it("comments out fanned-out `radiusTop` → the two top corners only", () => {
+      const input = `import { Box } from "@planningcenter/tapestry-react";<Box radiusTop={rt} />`
+      const result = applyTransform(transform, input)
+      expect(result).toMatchInlineSnapshot(`
+        "import { Box } from "@planningcenter/tapestry-react";/* TODO: tapestry-migration (styleProp): migrated from \`radiusTop\`; value may need manual transformation: borderTopLeftRadius: rt; borderTopRightRadius: rt */
+        <Box />"
+      `)
+    })
+
+    // `x`, `y`, `rotate`, `scale`, `elevation` produce CSS by combining
+    // multiple values or by theme lookup, so we comment out a draft of the
+    // target CSS property under the migrated name.
+    it("comments out `x` → `transform` anchored to the next style key", () => {
+      const input = `import { Box } from "@planningcenter/tapestry-react";<Box x={dx} marginLeft={ml} />`
+      const result = applyTransform(transform, input)
+      expect(result).toMatchInlineSnapshot(`
+        "import { Box } from "@planningcenter/tapestry-react";<Box
+          style={{
+            /* TODO: tapestry-migration (styleProp): migrated from \`x\`; value may need manual transformation */
+            // transform: dx,
+            marginLeft: ml
+          }} />"
+      `)
+    })
+
+    it("commented-out-only elements emit JSX-level TODO comments and no style attribute", () => {
+      const input = `import { Box } from "@planningcenter/tapestry-react";<Box x={dx} y={dy} rotate={r} elevation={e} />`
+      const result = applyTransform(transform, input)
+      expect(result).toMatchInlineSnapshot(`
+        "import { Box } from "@planningcenter/tapestry-react";/* TODO: tapestry-migration (styleProp): migrated from \`x\`; value may need manual transformation: transform: dx */
+        /* TODO: tapestry-migration (styleProp): migrated from \`y\`; value may need manual transformation: transform: dy */
+        /* TODO: tapestry-migration (styleProp): migrated from \`rotate\`; value may need manual transformation: transform: r */
+        /* TODO: tapestry-migration (styleProp): migrated from \`elevation\`; value may need manual transformation: boxShadow: e */
+        <Box />"
+      `)
+    })
+
+    it("primitive `x` literals still go through splitStyles and produce a transform string", () => {
+      const input = `import { Box } from "@planningcenter/tapestry-react";<Box x={5} />`
+      const result = applyTransform(transform, input)
+      expect(result).toMatchInlineSnapshot(`
+        "import { Box } from "@planningcenter/tapestry-react";<Box style={{
+          transform: "translateX(5) "
+        }} />"
+      `)
+    })
+
+    it("does not emit a TODO comment for safely renamed grid aliases", () => {
+      const input = `import { Box } from "@planningcenter/tapestry-react";<Box column={col} />`
+      const result = applyTransform(transform, input)
+      expect(result).toMatchInlineSnapshot(`
+        "import { Box } from "@planningcenter/tapestry-react";<Box style={{
+          gridColumn: col
+        }} />"
+      `)
+    })
+
+    // Literal values flow through splitStyles, which expands shorthands like
+    // `marginHorizontal` into the underlying CSS properties. No TODO needed.
+    it("expands `marginHorizontal` string literals via splitStyles without a TODO", () => {
+      const input = `import { Box } from "@planningcenter/tapestry-react";<Box marginHorizontal="8px" />`
+      const result = applyTransform(transform, input)
+      expect(result).toMatchInlineSnapshot(`
+        "import { Box } from "@planningcenter/tapestry-react";<Box style={{
+          marginRight: "8px",
+          marginLeft: "8px"
+        }} />"
+      `)
+    })
+
+    it("expands `paddingHorizontal` numeric literals via splitStyles without a TODO", () => {
+      const input = `import { Box } from "@planningcenter/tapestry-react";<Box paddingHorizontal={1} />`
+      const result = applyTransform(transform, input)
+      expect(result).toMatchInlineSnapshot(`
+        "import { Box } from "@planningcenter/tapestry-react";<Box style={{
+          paddingRight: "8px",
+          paddingLeft: "8px"
+        }} />"
+      `)
+    })
+
+    it("transforms `wrap`/`grow` boolean literals via splitStyles without a TODO", () => {
+      const input = `import { Box } from "@planningcenter/tapestry-react";<Box wrap={true} grow={true} />`
+      const result = applyTransform(transform, input)
+      expect(result).toMatchInlineSnapshot(`
+        "import { Box } from "@planningcenter/tapestry-react";<Box
+          style={{
+            flexWrap: "wrap",
+            flexGrow: 1
+          }} />"
+      `)
+    })
+
+    it("expands `radius` shortcut strings via splitStyles without a TODO", () => {
+      const input = `import { Box } from "@planningcenter/tapestry-react";<Box radius="pill" />`
+      const result = applyTransform(transform, input)
+      expect(result).toMatchInlineSnapshot(`
+        "import { Box } from "@planningcenter/tapestry-react";<Box style={{
+          borderRadius: "10em"
+        }} />"
+      `)
+    })
+  })
+})

package/src/components/shared/transformFactories/stylePropTransformFactory.ts

@@ -12,7 +12,7 @@ import {
   splitStyles,
   stylePropNames,
 } from "../../../../dist/tapestry-react-shim.cjs"
-import { addComment } from "../../shared/actions/addComment"
+import { addComment, formatComment } from "../../shared/actions/addComment"
 import { addCommentToAttribute } from "../../shared/actions/addCommentToAttribute"
 import { getAttribute } from "../../shared/actions/getAttribute"
 import { removeAttribute } from "../../shared/actions/removeAttribute"
@@ -27,6 +27,49 @@ type StylePropMapping = Record<
   }
 >
 
+// JSX expression values bypass splitStyles, so we mirror its plugin behavior
+// for props that bypass it. Pure key renames pass through live; everything
+// else gets commented out under the css target(s) so the developer can verify
+// the value before enabling.
+const liveAliases: Record<string, string> = {
+  column: "gridColumn",
+  columnEnd: "gridColumnEnd",
+  columnStart: "gridColumnStart",
+  direction: "flexDirection",
+  row: "gridRow",
+  rowEnd: "gridRowEnd",
+  rowStart: "gridRowStart",
+}
+
+const commentedAliases: Record<string, string[]> = {
+  basis: ["flexBasis"],
+  elevation: ["boxShadow"],
+  grow: ["flexGrow"],
+  marginHorizontal: ["marginLeft", "marginRight"],
+  marginVertical: ["marginTop", "marginBottom"],
+  paddingHorizontal: ["paddingLeft", "paddingRight"],
+  paddingVertical: ["paddingTop", "paddingBottom"],
+  radius: [
+    "borderTopLeftRadius",
+    "borderTopRightRadius",
+    "borderBottomRightRadius",
+    "borderBottomLeftRadius",
+  ],
+  radiusBottom: ["borderBottomRightRadius", "borderBottomLeftRadius"],
+  radiusLeft: ["borderTopLeftRadius", "borderBottomLeftRadius"],
+  radiusRight: ["borderTopRightRadius", "borderBottomRightRadius"],
+  radiusTop: ["borderTopLeftRadius", "borderTopRightRadius"],
+  rotate: ["transform"],
+  scale: ["transform"],
+  shrink: ["flexShrink"],
+  strokeAlign: ["strokeAlign"],
+  strokeWeight: ["strokeWeight"],
+  uppercase: ["textTransform"],
+  wrap: ["flexWrap"],
+  x: ["transform"],
+  y: ["transform"],
+}
+
 function extractPropValue(attr: JSXAttribute, j: JSCodeshift) {
   if (!attr.value) {
     return true
@@ -50,6 +93,20 @@ function extractPropValue(attr: JSXAttribute, j: JSCodeshift) {
   }
 }
 
+type ManualReviewEntry = {
+  cssTargets: string[]
+  originalProp: string
+  originalValue: string
+}
+
+function reviewHeading(entry: ManualReviewEntry) {
+  return `migrated from \`${entry.originalProp}\`; value may need manual transformation`
+}
+
+function reviewBody(entry: ManualReviewEntry) {
+  return entry.cssTargets.map((key) => `${key}: ${entry.originalValue}`)
+}
+
 function processKeepStyleProps({
   attributes,
   j,
@@ -62,10 +119,12 @@ function processKeepStyleProps({
   source: Collection
 }): {
   directProps: Record<string, unknown>
+  manualReviewEntries: ManualReviewEntry[]
   themeProps: Record<string, unknown>
 } {
   const themeProps: Record<string, unknown> = {}
   const directProps: Record<string, unknown> = {}
+  const manualReviewEntries: ManualReviewEntry[] = []
 
   attributes.forEach((attr) => {
     const propName = attr.name.name as string
@@ -76,7 +135,15 @@ function processKeepStyleProps({
       propValue.startsWith("{") &&
       propValue.endsWith("}")
     ) {
-      directProps[propName] = propValue
+      if (propName in commentedAliases) {
+        manualReviewEntries.push({
+          cssTargets: commentedAliases[propName],
+          originalProp: propName,
+          originalValue: propValue.slice(1, -1),
+        })
+      } else {
+        directProps[liveAliases[propName] ?? propName] = propValue
+      }
     } else {
       themeProps[propName] = propValue
     }
@@ -84,7 +151,7 @@ function processKeepStyleProps({
     removeAttribute(propName, { element, j, source })
   })
 
-  return { directProps, themeProps }
+  return { directProps, manualReviewEntries, themeProps }
 }
 
 function processRemoveStyleProps({
@@ -160,20 +227,36 @@ function processStylePropMappings({
   return styleProps
 }
 
+function buildManualReviewComments(
+  entries: ManualReviewEntry[],
+  j: JSCodeshift
+) {
+  return entries.flatMap((entry) => [
+    j.commentBlock(
+      formatComment(reviewHeading(entry), "styleProp"),
+      true,
+      false
+    ),
+    ...reviewBody(entry).map((line) => j.commentLine(` ${line},`)),
+  ])
+}
+
 function applyStylesToComponent({
   j,
   element,
   styles,
+  manualReviewEntries = [],
 }: {
   element: JSXElement
   j: JSCodeshift
+  manualReviewEntries?: ManualReviewEntry[]
   source: Collection
   styles: Record<string, unknown>
 }) {
   const styleAttr = getAttribute({ element, name: "style" })
   const styleValue = j.jsxExpressionContainer(
     j.objectExpression(
-      Object.entries(styles).map(([key, value]) => {
+      Object.entries(styles).map(([key, value], index) => {
         let valueNode
         if (
           typeof value === "string" &&
@@ -198,7 +281,11 @@ function applyStylesToComponent({
           valueNode = j.literal(value as string | number | boolean | null)
         }
 
-        return j.objectProperty(j.identifier(key), valueNode)
+        const property = j.objectProperty(j.identifier(key), valueNode)
+        if (index === 0 && manualReviewEntries.length > 0) {
+          property.comments = buildManualReviewComments(manualReviewEntries, j)
+        }
+        return property
       })
     )
   )
@@ -286,6 +373,7 @@ export function stylePropTransformFactory(config: {
     const allAttributes = element.openingElement.attributes || []
     let allStyleProps: Record<string, unknown> = {}
     let directStyleProps: Record<string, unknown> = {}
+    const manualReviewEntries: ManualReviewEntry[] = []
     const attributes = allAttributes.filter((attr) => {
       if (attr.type !== "JSXAttribute") return false
       const name = attr.name?.name as string
@@ -319,6 +407,7 @@ export function stylePropTransformFactory(config: {
       ...directStyleProps,
       ...keepResult.directProps,
     }
+    manualReviewEntries.push(...keepResult.manualReviewEntries)
 
     allStyleProps = {
       ...allStyleProps,
@@ -343,7 +432,8 @@ export function stylePropTransformFactory(config: {
 
     if (
       Object.keys(allStyleProps).length > 0 ||
-      Object.keys(directStyleProps).length > 0
+      Object.keys(directStyleProps).length > 0 ||
+      manualReviewEntries.length > 0
     ) {
       try {
         let styles: Record<string, unknown> = {}
@@ -361,7 +451,13 @@ export function stylePropTransformFactory(config: {
         if (options.verbose) console.log("Final generated styles:", styles)
 
         if (Object.keys(styles).length > 0) {
-          applyStylesToComponent({ element, j, source, styles })
+          applyStylesToComponent({
+            element,
+            j,
+            manualReviewEntries,
+            source,
+            styles,
+          })
 
           if (options.verbose) {
             const styleAttr = getAttribute({ element, name: "style" })
@@ -381,6 +477,18 @@ export function stylePropTransformFactory(config: {
               }
             }
           }
+        } else if (manualReviewEntries.length > 0) {
+          // No anchoring property in the style block — emit each manual-review
+          // entry as a JSX-level TODO comment instead.
+          for (const entry of manualReviewEntries) {
+            addComment({
+              element,
+              j,
+              scope: "styleProp",
+              source,
+              text: `${reviewHeading(entry)}: ${reviewBody(entry).join("; ")}`,
+            })
+          }
         }
       } catch (error) {
         console.log("Error processing style props:", error)