@planningcenter/tapestry-migration-cli 3.2.2-rc.8 → 3.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/tapestry-migration-cli",
-  "version": "3.2.2-rc.8",
+  "version": "3.2.2",
   "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.8",
+    "@planningcenter/tapestry": "^3.2.2",
     "@planningcenter/tapestry-react": "^4.11.5",
     "@types/jscodeshift": "^17.3.0",
     "@types/node": "^20.0.0",
@@ -52,5 +52,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "fde1826174904dd957c2dba8a5506002b6f661d1"
+  "gitHead": "f7d76b11169961788185060bf2555b13bb2dcb2e"
 }

package/src/components/checkbox/transforms/moveCheckboxImport.test.ts

@@ -114,6 +114,32 @@ function Test() {
     })
   })
 
+  describe("import conflict handling", () => {
+    it("should use TCheckbox alias when Checkbox is already imported from another package", () => {
+      const input = `
+import { Checkbox } from "some-other-library"
+import { Checkbox as ReactCheckbox } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <Checkbox />
+      <ReactCheckbox label="Test" />
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('import { Checkbox } from "some-other-library"')
+      expect(result).toContain(
+        'import { Checkbox as TCheckbox } from "@planningcenter/tapestry"'
+      )
+      expect(result).toContain("<TCheckbox")
+      expect(result).not.toContain("ReactCheckbox")
+    })
+  })
+
   describe("edge cases", () => {
     it("should handle already migrated imports", () => {
       const input = `

package/src/components/checkbox/transforms/moveCheckboxImport.ts

@@ -4,6 +4,7 @@ import { componentTransformFactory } from "../../shared/transformFactories/compo
 
 const transform: Transform = componentTransformFactory({
   condition: () => true,
+  conflictAlias: "TCheckbox",
   fromComponent: "Checkbox",
   fromPackage: "@planningcenter/tapestry-react",
   toComponent: "Checkbox",

package/src/components/input/transforms/moveInputImport.test.ts

@@ -96,6 +96,32 @@ function Test() {
     })
   })
 
+  describe("import conflict handling", () => {
+    it("should use TInput alias when Input is already imported from another package", () => {
+      const input = `
+import { Input } from "some-other-library"
+import { Input as ReactInput } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <Input />
+      <ReactInput label="Name" />
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('import { Input } from "some-other-library"')
+      expect(result).toContain(
+        'import { Input as TInput } from "@planningcenter/tapestry"'
+      )
+      expect(result).toContain("<TInput")
+      expect(result).not.toContain("ReactInput")
+    })
+  })
+
   describe("edge cases", () => {
     it("should handle already migrated imports", () => {
       const input = `

package/src/components/input/transforms/moveInputImport.ts

@@ -5,6 +5,7 @@ import { transformableInput } from "../transformableInput"
 
 const transform: Transform = componentTransformFactory({
   condition: transformableInput,
+  conflictAlias: "TInput",
   fromComponent: "Input",
   fromPackage: "@planningcenter/tapestry-react",
   toComponent: "Input",

package/src/components/input/transforms/numberFieldRenameToInput.test.ts

@@ -99,6 +99,57 @@ function Test() {
     expect(importDeclarationMatches).toHaveLength(1)
   })
 
+  it("uses TInput alias when Input is already imported from another package", () => {
+    const input = `
+import { Input } from "some-other-library"
+import { NumberField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <Input />
+      <NumberField label="Amount" type="number" />
+    </div>
+  )
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain('import { Input } from "some-other-library"')
+    expect(result).toContain(
+      'import { Input as TInput } from "@planningcenter/tapestry"'
+    )
+    expect(result).toContain("<TInput")
+    expect(result).not.toContain("NumberField")
+  })
+
+  it("adds Input import when fromPackage Input is aliased", () => {
+    const input = `
+import { Input as ReactInput, NumberField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <ReactInput label="Name" />
+      <NumberField label="Amount" type="number" />
+    </div>
+  )
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).not.toBeNull()
+    // The renamed NumberField becomes <Input>, so an Input import is required —
+    // the aliased ReactInput in tapestry-react does not put `Input` in scope.
+    expect(result).toContain('import { Input } from "@planningcenter/tapestry"')
+    expect(result).toContain("<Input")
+    expect(result).not.toContain("NumberField")
+    // The aliased ReactInput is left untouched by this transform; the moveInputImport
+    // transform later in the pipeline will not match it (different local name) and a
+    // separate cleanup is responsible for removing unused imports.
+    expect(result).toContain("ReactInput")
+  })
+
   it("merges Input import when file already imports Input from tapestry", () => {
     const input = `
 import { Input } from "@planningcenter/tapestry"

package/src/components/input/transforms/numberFieldRenameToInput.ts

@@ -2,6 +2,7 @@ import { componentTransformFactory } from "../../shared/transformFactories/compo
 
 export default componentTransformFactory({
   condition: () => true,
+  conflictAlias: "TInput",
   fromComponent: "NumberField",
   fromPackage: "@planningcenter/tapestry-react",
   toComponent: "Input",

package/src/components/radio/transforms/moveRadioImport.test.ts

@@ -96,6 +96,32 @@ function Test() {
     })
   })
 
+  describe("import conflict handling", () => {
+    it("should use TRadio alias when Radio is already imported from another package", () => {
+      const input = `
+import { Radio } from "some-other-library"
+import { Radio as ReactRadio } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <Radio />
+      <ReactRadio label="Option" value="a" />
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('import { Radio } from "some-other-library"')
+      expect(result).toContain(
+        'import { Radio as TRadio } from "@planningcenter/tapestry"'
+      )
+      expect(result).toContain("<TRadio")
+      expect(result).not.toContain("ReactRadio")
+    })
+  })
+
   describe("edge cases", () => {
     it("should handle already migrated imports", () => {
       const input = `

package/src/components/radio/transforms/moveRadioImport.ts

@@ -4,6 +4,7 @@ import { componentTransformFactory } from "../../shared/transformFactories/compo
 
 const transform: Transform = componentTransformFactory({
   condition: () => true,
+  conflictAlias: "TRadio",
   fromComponent: "Radio",
   fromPackage: "@planningcenter/tapestry-react",
   toComponent: "Radio",

package/src/components/select/transforms/moveSelectImport.test.ts

@@ -145,4 +145,28 @@ function Test() {
     expect(result).toContain("disabled")
     expect(result).toContain("onChange={() => {}}")
   })
+
+  it("should use TSelect alias when Select is already imported from another package", () => {
+    const input = `
+import { Select } from "some-other-library"
+import { Select as ReactSelect } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <Select />
+      <ReactSelect label="Test" placeholder="Pick" options={[]} />
+    </div>
+  )
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain('import { Select } from "some-other-library"')
+    expect(result).toContain(
+      'import { Select as TSelect } from "@planningcenter/tapestry"'
+    )
+    expect(result).toContain("<TSelect")
+    expect(result).not.toContain("ReactSelect")
+  })
 })

package/src/components/select/transforms/moveSelectImport.ts

@@ -5,6 +5,7 @@ import { transformableSelect } from "../transformableSelect"
 
 const transform: Transform = componentTransformFactory({
   condition: transformableSelect,
+  conflictAlias: "TSelect",
   fromComponent: "Select",
   fromPackage: "@planningcenter/tapestry-react",
   toComponent: "Select",

package/src/components/shared/helpers/unsupportedPropsHelpers.ts

@@ -151,3 +151,27 @@ export const TEXTAREA_SUPPORTED_PROPS = [
   ...TEXTAREA_SPECIFIC_PROPS,
   ...STYLE_PROP_NAMES_WITHOUT_CSS,
 ]
+
+export const TIME_FIELD_SPECIFIC_PROPS = [
+  "defaultValue",
+  "description",
+  "disabled",
+  "forceLeadingZeros",
+  "form",
+  "hideLabel",
+  "hideTimeZone",
+  "hourCycle",
+  "invalid",
+  "max",
+  "min",
+  "name",
+  "onChange",
+  "readOnly",
+  "required",
+  "value",
+]
+
+export const TIME_FIELD_SUPPORTED_PROPS = [
+  ...COMMON_PROPS,
+  ...TIME_FIELD_SPECIFIC_PROPS,
+]

package/src/components/shared/transformFactories/helpers/manageImports.ts

@@ -151,12 +151,14 @@ export function removeImportFromDeclaration(
 export function addImport({
   component,
   conflictAlias,
+  fromPackage,
   j,
   pkg,
   source,
 }: {
   component: string
   conflictAlias: string
+  fromPackage?: string
   j: JSCodeshift
   pkg: string
   source: Collection
@@ -166,7 +168,28 @@ export function addImport({
     return existingImportName
   }
 
-  const hasConflict = hasConflictingImport(component, pkg, { j, source })
+  // Conflict = component imported from a package OTHER than the source/target packages.
+  // Imports from fromPackage will be migrated to pkg by another transform in the pipeline,
+  // so they don't constitute a conflict that requires aliasing.
+  const excludePackages = fromPackage ? [pkg, fromPackage] : [pkg]
+  const hasConflict = hasConflictingImport(component, excludePackages, {
+    j,
+    source,
+  })
+
+  // If the component is already imported from fromPackage under the same local name
+  // (and won't conflict with another package), the pipeline's package-move transform
+  // will migrate it later — skip adding a duplicate import here. Aliased imports from
+  // fromPackage do not put `component` itself in scope, so they must not trigger this
+  // early return.
+  const importedFromSourceName = fromPackage
+    ? getImportName(component, fromPackage, { j, source })
+    : null
+  const importedFromSource = importedFromSourceName === component
+  if (importedFromSource && !hasConflict) {
+    return component
+  }
+
   const finalComponentName = hasConflict ? conflictAlias : component
   const alias =
     finalComponentName !== component ? finalComponentName : undefined
@@ -240,6 +263,7 @@ export function manageImports(
   addImport({
     component: config.toComponent,
     conflictAlias: config.conflictAlias || targetComponentName,
+    fromPackage: config.fromPackage,
     j,
     pkg: config.toPackage,
     source,

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

@@ -0,0 +1,330 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import { stackViewPlugin } from "../../../stubs/stackViewPlugin"
+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"
+        }} />"
+      `)
+    })
+  })
+
+  describe("non-inlineable plugin output", () => {
+    // stackViewPlugin maps `distribution: "fill"` to `{ "& > *": { flex: "1 0 0px" } }`,
+    // a nested CSS selector that cannot be represented as a React `style={}` object.
+    // The transform must not crash, must not silently drop the source props, and must
+    // leave an audit trail for manual review.
+    const transform = stylePropTransformFactory({
+      plugin: stackViewPlugin,
+      stylesToRemove: [],
+      targetComponent: "Stack",
+      targetPackage: "@planningcenter/tapestry-react",
+    })
+
+    it("preserves source props and emits an audit comment when plugin output includes nested CSS selectors", () => {
+      const input = `import { Stack } from "@planningcenter/tapestry-react";<Stack axis="horizontal" spacing={1} distribution="fill" />`
+      const result = applyTransform(transform, input)
+
+      // Source props must remain — they cannot be safely inlined.
+      expect(result).toContain('axis="horizontal"')
+      expect(result).toContain("spacing={1}")
+      expect(result).toContain('distribution="fill"')
+      // Must not have produced a broken inline style with a nested object.
+      expect(result).not.toContain('"& > *"')
+      // Must leave a visible audit trail so the user knows to review.
+      expect(result).toMatch(/TODO:\s*tapestry-migration/)
+    })
+
+    it("does not crash on distribution='fill' alongside other plugin props", () => {
+      const input = `import { Stack } from "@planningcenter/tapestry-react";<Stack distribution="fill" axis="horizontal" />`
+      const result = applyTransform(transform, input)
+
+      expect(result).toContain('distribution="fill"')
+      expect(result).toContain('axis="horizontal"')
+    })
+  })
+})