Fix single child padding issue

Author: owjs3901

src/codegen/__tests__/codegen.test.ts

@@ -1180,6 +1180,25 @@ describe('Codegen', () => {
   w="110px"
 />`,
     },
+    {
+      title: 'renders padding from inferredAutoLayout',
+      node: {
+        type: 'FRAME',
+        name: 'InferredPaddingFrame',
+        children: [],
+        layoutSizingHorizontal: 'FIXED',
+        layoutSizingVertical: 'FIXED',
+        width: 100,
+        height: 50,
+        inferredAutoLayout: {
+          paddingTop: 10,
+          paddingRight: 20,
+          paddingBottom: 10,
+          paddingLeft: 20,
+        },
+      } as unknown as FrameNode,
+      expected: `<Box h="50px" px="20px" py="10px" w="100px" />`,
+    },
     {
       title: 'renders frame with border radius',
       node: {

src/codegen/props/background.ts

@@ -1,3 +1,4 @@
+import { BLEND_MODE_MAP } from '../utils/blend-mode-map'
 import { paintToCSS } from '../utils/paint-to-css'
 
 export async function getBackgroundProps(
@@ -37,27 +38,7 @@ export async function getBackgroundProps(
       const combinedBg = cssFills.join(', ')
       return {
         bg: node.type !== 'TEXT' || gradientText ? combinedBg : null,
-        bgBlendMode: {
-          NORMAL: null,
-          MULTIPLY: 'multiply',
-          SCREEN: 'screen',
-          OVERLAY: 'overlay',
-          DARKEN: 'darken',
-          LINEAR_BURN: 'linear-burn',
-          COLOR_BURN: 'colorBurn',
-          LIGHTEN: 'lighten',
-          LINEAR_DODGE: 'linear-dodge',
-          COLOR_DODGE: 'color-dodge',
-          SOFT_LIGHT: 'soft-light',
-          HARD_LIGHT: 'hard-light',
-          DIFFERENCE: 'difference',
-          EXCLUSION: 'exclusion',
-          HUE: 'hue',
-          SATURATION: 'saturation',
-          COLOR: 'color',
-          LUMINOSITY: 'luminosity',
-          PASS_THROUGH: null,
-        }[backgroundBlend],
+        bgBlendMode: BLEND_MODE_MAP[backgroundBlend],
         color: gradientText ? 'transparent' : undefined,
         bgClip: gradientText ? 'text' : undefined,
       }

src/codegen/props/blend.ts

@@ -1,3 +1,4 @@
+import { BLEND_MODE_MAP } from '../utils/blend-mode-map'
 import { fmtPct } from '../utils/fmtPct'
 
 export function getBlendProps(
@@ -6,28 +7,7 @@ export function getBlendProps(
   if ('opacity' in node) {
     return {
       opacity: node.opacity < 1 ? fmtPct(node.opacity) : undefined,
-      mixBlendMode: {
-        // same as multiply
-        PASS_THROUGH: null,
-        NORMAL: null,
-        DARKEN: 'darken',
-        MULTIPLY: 'multiply',
-        LINEAR_BURN: 'linearBurn',
-        COLOR_BURN: 'colorBurn',
-        LIGHTEN: 'lighten',
-        SCREEN: 'screen',
-        LINEAR_DODGE: 'linear-dodge',
-        COLOR_DODGE: 'color-dodge',
-        OVERLAY: 'overlay',
-        SOFT_LIGHT: 'soft-light',
-        HARD_LIGHT: 'hard-light',
-        DIFFERENCE: 'difference',
-        EXCLUSION: 'exclusion',
-        HUE: 'hue',
-        SATURATION: 'saturation',
-        COLOR: 'color',
-        LUMINOSITY: 'luminosity',
-      }[node.blendMode],
+      mixBlendMode: BLEND_MODE_MAP[node.blendMode],
     }
   }
 }

src/codegen/props/layout.ts

@@ -91,9 +91,7 @@ function _getLayoutProps(
         ? 1
         : undefined,
     w:
-      rootNode === node &&
-      node.width ===
-        (getPageNode(node as BaseNode & ChildrenMixin) as SceneNode)?.width
+      rootNode === node
         ? undefined
         : wType === 'FIXED'
           ? addPx(node.width)

src/codegen/props/padding.ts

@@ -3,6 +3,19 @@ import { optimizeSpace } from '../utils/optimize-space'
 export function getPaddingProps(
   node: SceneNode,
 ): Record<string, boolean | string | number | undefined | null> | undefined {
+  if (
+    'inferredAutoLayout' in node &&
+    node.inferredAutoLayout &&
+    'paddingLeft' in node.inferredAutoLayout
+  ) {
+    return optimizeSpace(
+      'p',
+      node.inferredAutoLayout.paddingTop,
+      node.inferredAutoLayout.paddingRight,
+      node.inferredAutoLayout.paddingBottom,
+      node.inferredAutoLayout.paddingLeft,
+    )
+  }
   if ('paddingLeft' in node) {
     return optimizeSpace(
       'p',

src/codegen/utils/add-px.ts

@@ -1,3 +1,5 @@
+import { formatNumber } from './format-number'
+
 export function addPx(value: unknown, fallback: string): string
 export function addPx(value: unknown, fallback?: string): string | undefined
 export function addPx(
@@ -6,12 +8,7 @@ export function addPx(
 ) {
   if (typeof value !== 'number') return fallback
 
-  // Round to 2 decimal places (same as fmtPct)
-  const rounded = Math.round(value * 100) / 100
-  const fixed = rounded.toFixed(2)
-
-  // Remove unnecessary trailing zeros
-  const str = fixed.replace(/\.00$/, '').replace(/(\.\d)0$/, '$1')
+  const str = formatNumber(value)
 
   if (str === '0') return fallback
   return `${str}px`

src/codegen/utils/blend-mode-map.ts

@@ -0,0 +1,24 @@
+/**
+ * Figma BlendMode to CSS blend-mode mapping
+ */
+export const BLEND_MODE_MAP: Record<string, string | null> = {
+  PASS_THROUGH: null,
+  NORMAL: null,
+  DARKEN: 'darken',
+  MULTIPLY: 'multiply',
+  LINEAR_BURN: 'linearBurn',
+  COLOR_BURN: 'colorBurn',
+  LIGHTEN: 'lighten',
+  SCREEN: 'screen',
+  LINEAR_DODGE: 'linear-dodge',
+  COLOR_DODGE: 'color-dodge',
+  OVERLAY: 'overlay',
+  SOFT_LIGHT: 'soft-light',
+  HARD_LIGHT: 'hard-light',
+  DIFFERENCE: 'difference',
+  EXCLUSION: 'exclusion',
+  HUE: 'hue',
+  SATURATION: 'saturation',
+  COLOR: 'color',
+  LUMINOSITY: 'luminosity',
+}

src/codegen/utils/fmtPct.ts

@@ -1,12 +1,5 @@
-export function fmtPct(n: number) {
-  // Round to 2 decimal places
-  const rounded = Math.round(n * 100) / 100
-
-  // Format with 2 decimal places
-  const formatted = rounded.toFixed(2)
+import { formatNumber } from './format-number'
 
-  // Remove unnecessary trailing zeros
-  // .00 -> remove entirely (156.00 -> 156)
-  // .X0 -> remove trailing 0 (156.30 -> 156.3)
-  return formatted.replace(/\.00$/, '').replace(/(\.\d)0$/, '$1')
+export function fmtPct(n: number) {
+  return formatNumber(n)
 }

src/codegen/utils/format-number.ts

@@ -0,0 +1,12 @@
+/**
+ * Round to 2 decimal places and remove unnecessary trailing zeros
+ * Examples:
+ *   156.00 -> "156"
+ *   156.30 -> "156.3"
+ *   156.35 -> "156.35"
+ */
+export function formatNumber(n: number): string {
+  const rounded = Math.round(n * 100) / 100
+  const formatted = rounded.toFixed(2)
+  return formatted.replace(/\.00$/, '').replace(/(\.\d)0$/, '$1')
+}

src/codegen/utils/four-value-shortcut.ts

@@ -10,8 +10,6 @@ export function fourValueShortcut(
     return addPx(first, '0')
   if (first === third && second === fourth)
     return `${addPx(first, '0')} ${addPx(second, '0')}`
-  if (first === third && second === fourth)
-    return `${addPx(first, '0')} ${addPx(second, '0')}`
   if (second === fourth)
     return `${addPx(first, '0')} ${addPx(second, '0')} ${addPx(third, '0')}`
   return `${addPx(first, '0')} ${addPx(second, '0')} ${addPx(third, '0')} ${addPx(fourth, '0')}`