Fix position

Author: owjs3901

src/__tests__/code.test.ts

@@ -185,3 +185,32 @@ it('auto-runs on module load when figma is present', async () => {
 
   expect(codegenOn).toHaveBeenCalledWith('generate', expect.any(Function))
 })
+
+describe('extractImports', () => {
+  it('should extract keyframes import when code contains keyframes(', () => {
+    const result = codeModule.extractImports([
+      [
+        'AnimatedBox',
+        '<Box animationName={keyframes({ "0%": { opacity: 0 } })} />',
+      ],
+    ])
+    expect(result).toContain('keyframes')
+    expect(result).toContain('Box')
+  })
+
+  it('should extract keyframes import when code contains keyframes`', () => {
+    const result = codeModule.extractImports([
+      ['AnimatedBox', '<Box animationName={keyframes`from { opacity: 0 }`} />'],
+    ])
+    expect(result).toContain('keyframes')
+    expect(result).toContain('Box')
+  })
+
+  it('should not extract keyframes when not present', () => {
+    const result = codeModule.extractImports([
+      ['SimpleBox', '<Box w="100px" />'],
+    ])
+    expect(result).not.toContain('keyframes')
+    expect(result).toContain('Box')
+  })
+})

src/code-impl.ts

@@ -4,7 +4,7 @@ import { exportDevup, importDevup } from './commands/devup'
 import { exportAssets } from './commands/exportAssets'
 import { exportComponents } from './commands/exportComponents'
 
-function extractImports(
+export function extractImports(
   componentsCodes: ReadonlyArray<readonly [string, string]>,
 ): string[] {
   const allCode = componentsCodes.map(([_, code]) => code).join('\n')

src/codegen/__tests__/codegen.test.ts

@@ -4148,4 +4148,39 @@ describe('Codegen Tree Methods', () => {
       expect(result).toContain('<MyButton')
     })
   })
+
+  describe('getSelectorProps with numeric property names', () => {
+    test('sanitizes property name that is only digits', async () => {
+      const defaultVariant = {
+        type: 'COMPONENT',
+        name: '123=Default',
+        children: [],
+        visible: true,
+        reactions: [],
+        variantProperties: { '123': 'Default' },
+      } as unknown as ComponentNode
+
+      const node = {
+        type: 'COMPONENT_SET',
+        name: 'NumericPropertySet',
+        children: [defaultVariant],
+        defaultVariant,
+        visible: true,
+        componentPropertyDefinitions: {
+          '123': {
+            type: 'VARIANT',
+            variantOptions: ['Default', 'Active'],
+          },
+        },
+      } as unknown as ComponentSetNode
+      addParent(node)
+
+      const codegen = new Codegen(node)
+      await codegen.buildTree()
+
+      // The numeric property name should be sanitized to 'variant'
+      const componentTrees = codegen.getComponentTrees()
+      expect(componentTrees.size).toBeGreaterThan(0)
+    })
+  })
 })

src/codegen/props/__tests__/position.test.ts

@@ -14,9 +14,13 @@ describe('position', () => {
       expect(canBeAbsolute(node)).toBe(true)
     })
 
-    it('should return true for AUTO positioned node in freelayout parent', () => {
+    it('should return true for AUTO positioned node in freelayout parent with constraints', () => {
       const node = {
         layoutPositioning: 'AUTO',
+        constraints: {
+          horizontal: 'MIN',
+          vertical: 'MIN',
+        },
         parent: {
           layoutPositioning: 'AUTO',
           width: 100,
@@ -28,6 +32,20 @@ describe('position', () => {
       expect(canBeAbsolute(node)).toBe(true)
     })
 
+    it('should return false for AUTO positioned node in freelayout parent without constraints', () => {
+      const node = {
+        layoutPositioning: 'AUTO',
+        parent: {
+          layoutPositioning: 'AUTO',
+          width: 100,
+          height: 100,
+          type: 'FRAME',
+        },
+      } as any
+
+      expect(canBeAbsolute(node)).toBe(false)
+    })
+
     it('should return false for node without parent', () => {
       const node = {
         layoutPositioning: 'ABSOLUTE',
@@ -67,13 +85,63 @@ describe('position', () => {
       })
     })
 
-    it('should return absolute position props without constraints in freelayout', () => {
+    it('should return absolute position props in freelayout using fallback x/y', () => {
       const node = {
         layoutPositioning: 'AUTO',
         x: 15,
         y: 25,
         width: 40,
         height: 50,
+        constraints: {
+          horizontal: 'MIN',
+          vertical: 'MIN',
+        },
+        parent: {
+          layoutPositioning: 'AUTO',
+          type: 'FRAME',
+          width: 200,
+          height: 300,
+        },
+      } as any
+
+      const result = getPositionProps(node)
+
+      expect(result).toEqual({
+        pos: 'absolute',
+        left: '15px',
+        right: undefined,
+        top: '25px',
+        bottom: undefined,
+      })
+    })
+
+    it('should return undefined when no constraints in freelayout and canBeAbsolute is false', () => {
+      const node = {
+        layoutPositioning: 'AUTO',
+        x: 15,
+        y: 25,
+        width: 40,
+        height: 50,
+        parent: {
+          layoutPositioning: 'AUTO',
+          type: 'FRAME',
+          width: 200,
+          height: 300,
+        },
+      } as any
+
+      const result = getPositionProps(node)
+
+      expect(result).toBeUndefined()
+    })
+
+    it('should return absolute position with x/y when ABSOLUTE node has no constraints in freelayout parent', () => {
+      const node = {
+        layoutPositioning: 'ABSOLUTE',
+        x: 15,
+        y: 25,
+        width: 40,
+        height: 50,
         parent: {
           layoutPositioning: 'AUTO',
           type: 'FRAME',