@planningcenter/tapestry-migration-cli 3.8.1-rc.0 → 3.8.1-rc.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/tapestry-migration-cli",
-  "version": "3.8.1-rc.0",
+  "version": "3.8.1-rc.1",
   "description": "CLI tool for Tapestry migrations",
   "type": "module",
   "main": "dist/index.js",
@@ -30,7 +30,7 @@
   },
   "devDependencies": {
     "@emotion/react": "^11.14.0",
-    "@planningcenter/tapestry": "^3.8.1-rc.0",
+    "@planningcenter/tapestry": "^3.8.1-rc.1",
     "@planningcenter/tapestry-react": "^4.11.5",
     "@types/jscodeshift": "^17.3.0",
     "@types/node": "^20.0.0",
@@ -50,5 +50,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "aa87cfcc57842e31caa4f410e2d4276722e54035"
+  "gitHead": "9ec1c85d356014aab7e0bde375c9766fdab3b410"
 }

package/src/components/preflight/transforms/convertStyleProps.test.ts

@@ -70,14 +70,8 @@ describe("preflight: convertStyleProps across all tapestry-react components", ()
                   return (
                     <Stack
                       style={{
-                        paddingTop: "128px",
-                        paddingRight: "128px",
-                        paddingBottom: "128px",
-                        paddingLeft: "128px",
-                        marginTop: "64px",
-                        marginRight: "64px",
-                        marginBottom: "64px",
-                        marginLeft: "64px"
+                        padding: "128px",
+                        margin: "64px"
                       }} />
                   );
                 }

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

@@ -294,25 +294,59 @@ describe("stylePropTransformFactory", () => {
     })
 
     // 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", () => {
+    // `marginHorizontal` into the underlying CSS properties; since left and
+    // right resolve to the same value, they're folded back into the
+    // `marginInline` logical shorthand. No TODO needed.
+    it("collapses `marginHorizontal` string literals to `marginInline` 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"
+          marginInline: "8px"
         }} />"
       `)
     })
 
-    it("expands `paddingHorizontal` numeric literals via splitStyles without a TODO", () => {
+    it("collapses `paddingHorizontal` numeric literals to `paddingInline` 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"
+          paddingInline: "8px"
+        }} />"
+      `)
+    })
+
+    it("collapses `padding` two-value CSS shorthand strings to `paddingBlock`/`paddingInline`", () => {
+      const input = `import { Box } from "@planningcenter/tapestry-react";<Box padding="4px 8px" />`
+      const result = applyTransform(transform, input)
+      expect(result).toMatchInlineSnapshot(`
+        "import { Box } from "@planningcenter/tapestry-react";<Box style={{
+          paddingInline: "8px",
+          paddingBlock: "4px"
+        }} />"
+      `)
+    })
+
+    it("collapses `padding` uniform CSS shorthand strings to the `padding` shorthand", () => {
+      const input = `import { Box } from "@planningcenter/tapestry-react";<Box padding="8px" />`
+      const result = applyTransform(transform, input)
+      expect(result).toMatchInlineSnapshot(`
+        "import { Box } from "@planningcenter/tapestry-react";<Box style={{
+          padding: "8px"
+        }} />"
+      `)
+    })
+
+    it("leaves `padding` four-value CSS shorthand strings fully expanded when no sides match", () => {
+      const input = `import { Box } from "@planningcenter/tapestry-react";<Box padding="1px 2px 3px 4px" />`
+      const result = applyTransform(transform, input)
+      expect(result).toMatchInlineSnapshot(`
+        "import { Box } from "@planningcenter/tapestry-react";<Box style={{
+          paddingTop: "1px",
+          paddingRight: "2px",
+          paddingBottom: "3px",
+          paddingLeft: "4px"
         }} />"
       `)
     })

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

@@ -165,6 +165,120 @@ function processKeepStyleProps({
   return { directProps, manualReviewEntries, processedNames, themeProps }
 }
 
+// splitStyles (vendored from tapestry-react) always fans padding/margin/
+// borderWidth/radius out into their per-side (or per-corner) longhand
+// properties. Fold them back into a shorthand when the resolved values make
+// that lossless: all four sides equal -> the physical shorthand; only the
+// left/right or top/bottom pair equal -> the CSS logical axis shorthand
+// (inline/block). Corners have no axis shorthand, so borderRadius only
+// collapses on the full four-corner match.
+type QuadShorthandGroup = {
+  blockShorthand: string
+  bottom: string
+  inlineShorthand: string
+  left: string
+  right: string
+  shorthand: string
+  top: string
+}
+
+const quadShorthandGroups: QuadShorthandGroup[] = [
+  {
+    blockShorthand: "paddingBlock",
+    bottom: "paddingBottom",
+    inlineShorthand: "paddingInline",
+    left: "paddingLeft",
+    right: "paddingRight",
+    shorthand: "padding",
+    top: "paddingTop",
+  },
+  {
+    blockShorthand: "marginBlock",
+    bottom: "marginBottom",
+    inlineShorthand: "marginInline",
+    left: "marginLeft",
+    right: "marginRight",
+    shorthand: "margin",
+    top: "marginTop",
+  },
+  {
+    blockShorthand: "borderBlockWidth",
+    bottom: "borderBottomWidth",
+    inlineShorthand: "borderInlineWidth",
+    left: "borderLeftWidth",
+    right: "borderRightWidth",
+    shorthand: "borderWidth",
+    top: "borderTopWidth",
+  },
+]
+
+const cornerShorthandGroup = {
+  corners: [
+    "borderTopLeftRadius",
+    "borderTopRightRadius",
+    "borderBottomRightRadius",
+    "borderBottomLeftRadius",
+  ],
+  shorthand: "borderRadius",
+}
+
+function collapseUniformShorthands(
+  styles: Record<string, unknown>
+): Record<string, unknown> {
+  const result = { ...styles }
+
+  for (const group of quadShorthandGroups) {
+    const { shorthand, top, right, bottom, left } = group
+    if (shorthand in result) continue
+
+    const sideValues = [top, right, bottom, left].map((key) => result[key])
+    if (
+      sideValues.every((value) => value !== undefined) &&
+      sideValues.every((value) => value === sideValues[0])
+    ) {
+      result[shorthand] = sideValues[0]
+      delete result[top]
+      delete result[right]
+      delete result[bottom]
+      delete result[left]
+      continue
+    }
+
+    if (
+      !(group.inlineShorthand in result) &&
+      result[left] !== undefined &&
+      result[left] === result[right]
+    ) {
+      result[group.inlineShorthand] = result[left]
+      delete result[left]
+      delete result[right]
+    }
+
+    if (
+      !(group.blockShorthand in result) &&
+      result[top] !== undefined &&
+      result[top] === result[bottom]
+    ) {
+      result[group.blockShorthand] = result[top]
+      delete result[top]
+      delete result[bottom]
+    }
+  }
+
+  if (!(cornerShorthandGroup.shorthand in result)) {
+    const cornerValues = cornerShorthandGroup.corners.map((key) => result[key])
+    if (
+      cornerValues.every((value) => value !== undefined) &&
+      cornerValues.every((value) => value === cornerValues[0])
+    ) {
+      result[cornerShorthandGroup.shorthand] = cornerValues[0]
+      cornerShorthandGroup.corners.forEach((key) => delete result[key])
+    }
+  }
+
+  return result
+}
+
 function isInlineableStyleValue(value: unknown): boolean {
   return (
     value === null ||
@@ -465,7 +579,10 @@ export function stylePropTransformFactory(config: {
             plugin: config.plugin,
           })
           const cssObject = result.css(defaultTheme)
-          styles = { ...styles, ...(cssObject[0] || {}) }
+          styles = collapseUniformShorthands({
+            ...styles,
+            ...(cssObject[0] || {}),
+          })
         }
 
         styles = { ...styles, ...directStyleProps }