Fix Image display

Author: owjs3901

src/code-impl.ts

@@ -28,8 +28,7 @@ export function extractImports(
     }
   }
 
-  // keyframes 함수 체크
-  if (/keyframes\s*\(|keyframes`/.test(allCode)) {
+  if (/\bkeyframes\s*(\(|`)/.test(allCode)) {
     imports.add('keyframes')
   }
 

src/codegen/Codegen.ts

@@ -188,6 +188,7 @@ export class Codegen {
           props.bg = maskColor
           delete props.src
         }
+        props.display = 'initial'
       }
       return {
         component: 'src' in props ? 'Image' : 'Box',

src/codegen/props/auto-layout.ts

@@ -1,12 +1,14 @@
 import { addPx } from '../utils/add-px'
+import { checkAssetNode } from '../utils/check-asset-node'
 
 export function getAutoLayoutProps(
   node: SceneNode,
 ): Record<string, boolean | string | number | undefined | null> | undefined {
   if (
     !('inferredAutoLayout' in node) ||
     !node.inferredAutoLayout ||
-    node.inferredAutoLayout.layoutMode === 'NONE'
+    node.inferredAutoLayout.layoutMode === 'NONE' ||
+    checkAssetNode(node)
   )
     return
   const { layoutMode } = node.inferredAutoLayout

src/codegen/responsive/ResponsiveCodegen.ts

@@ -2,7 +2,6 @@ import { Codegen } from '../Codegen'
 import { renderComponent, renderNode } from '../render'
 import type { NodeTree, Props } from '../types'
 import {
-  BREAKPOINT_INDEX,
   type BreakpointKey,
   getBreakpointByWidth,
   mergePropsToResponsive,
@@ -212,34 +211,18 @@ export class ResponsiveCodegen {
         }
 
         if (childByBreakpoint.size > 0) {
-          // Add display:none props when a child exists only at specific breakpoints
-          // Find the smallest breakpoint where child exists
-          const sortedPresentBreakpoints = [...presentBreakpoints].sort(
-            (a, b) => BREAKPOINT_INDEX[a] - BREAKPOINT_INDEX[b],
-          )
-          const smallestPresentBp = sortedPresentBreakpoints[0]
-          const smallestPresentIdx = BREAKPOINT_INDEX[smallestPresentBp]
-
-          // Find the smallest breakpoint in the section
-          const sortedSectionBreakpoints = [...treesByBreakpoint.keys()].sort(
-            (a, b) => BREAKPOINT_INDEX[a] - BREAKPOINT_INDEX[b],
-          )
-          const smallestSectionBp = sortedSectionBreakpoints[0]
-          const smallestSectionIdx = BREAKPOINT_INDEX[smallestSectionBp]
-
-          // If child's smallest breakpoint is larger than section's smallest,
-          // we need to add display:none for the smaller breakpoints
-          if (smallestPresentIdx > smallestSectionIdx) {
-            // Add display:none for all breakpoints smaller than where child exists
-            for (const bp of treesByBreakpoint.keys()) {
-              if (!presentBreakpoints.has(bp)) {
-                const firstChildTree = [...childByBreakpoint.values()][0]
-                const hiddenTree: NodeTree = {
-                  ...firstChildTree,
-                  props: { ...firstChildTree.props, display: 'none' },
-                }
-                childByBreakpoint.set(bp, hiddenTree)
+          // Add display:none props for breakpoints where child doesn't exist
+          // This handles both:
+          // 1. Child exists only in mobile (needs display:none in pc)
+          // 2. Child exists only in pc (needs display:none in mobile)
+          for (const bp of treesByBreakpoint.keys()) {
+            if (!presentBreakpoints.has(bp)) {
+              const firstChildTree = [...childByBreakpoint.values()][0]
+              const hiddenTree: NodeTree = {
+                ...firstChildTree,
+                props: { ...firstChildTree.props, display: 'none' },
               }
+              childByBreakpoint.set(bp, hiddenTree)
             }
           }