Export Assets issue

Author: owjs3901

src/Element.ts

@@ -196,6 +196,9 @@ export class Element {
           }
           this.addAsset(this.node, 'png')
         }
+        const css = await this.getCss()
+        if (this.node.width === 1 && !('width' in css))
+          this.additionalProps.w = '1px'
         break
       }
       case 'FRAME':
@@ -286,8 +289,14 @@ export class Element {
       return
     }
     if (this.parent) this.parent.addAsset(node, type)
-    else
-      this.assets[node.name + '.' + type] = async () => {
+    else {
+      let key = node.name
+      let idx = 0
+      while (key + '.' + type in this.assets) {
+        key = node.name + '_' + idx
+        idx++
+      }
+      this.assets[key + '.' + type] = async () => {
         const isSvg = type === 'svg'
         const options: ExportSettings = {
           format: isSvg ? 'SVG' : 'PNG',
@@ -303,6 +312,7 @@ export class Element {
         const data = await node.exportAsync(options)
         return data
       }
+    }
   }
 
   async getComponents(): Promise<Record<string, () => Promise<string>>> {

src/__tests__/Element.test.ts

@@ -18,6 +18,7 @@ function createNode(
     componentProperties,
     getMainComponentAsync,
     visible = true,
+    css,
     ...props
   }: {
     [_: string]: any
@@ -34,7 +35,7 @@ function createNode(
 ): SceneNode {
   const ret = {
     type,
-    getCSSAsync: async () => props,
+    getCSSAsync: async () => css ?? props,
     exportAsync: async () => '<svg>\n<path/>\n</svg>',
     getStyledTextSegments: () => styledTextSegments,
     layoutSizingHorizontal,
@@ -1450,6 +1451,15 @@ describe('Element', () => {
         expect(await element.getComponentType()).toEqual('Box')
         expect(await element.render()).toEqual('<Box bg="red" />')
       }
+      {
+        const element = createElement('RECTANGLE', {
+          width: '1px',
+          height: '10px',
+          fills: [],
+          css: { height: '10px' },
+        })
+        expect(await element.render()).toEqual('<Box h="10px" w="1px" />')
+      }
     })
   })
 
@@ -1696,6 +1706,7 @@ export function Component(props: ComponentProps) {
         await element.render()
         expect(await element.getAssets()).toEqual({
           'image.svg': expect.any(Function),
+          'image_0.svg': expect.any(Function),
         })
       }
     })

src/commands/__tests__/exportAssets.test.ts

@@ -163,11 +163,13 @@ describe('exportAssets', () => {
       ],
     })
     ;(globalThis as any).figma.currentPage.selection = [node]
+    vi.spyOn(console, 'error').mockImplementation(() => {})
     ;(node.exportAsync as any) = vi.fn().mockRejectedValue('test')
     await exportAssets()
     expect(notifyMock).toHaveBeenCalledWith('Error exporting assets', {
       timeout: 3000,
       error: true,
     })
+    vi.spyOn(console, 'error').mockRestore()
   })
 })

src/commands/__tests__/exportComponents.test.ts

@@ -164,10 +164,12 @@ describe('exportComponents', () => {
       ],
     })
     ;(globalThis as any).figma.currentPage.selection = [node]
+    vi.spyOn(console, 'error').mockImplementation(() => {})
     await exportComponents()
     expect(notifyMock).toHaveBeenCalledWith('Error exporting components', {
       timeout: 3000,
       error: true,
     })
+    vi.spyOn(console, 'error').mockRestore()
   })
 })