Fix layout hug issue

Author: owjs3901

src/Element.ts

@@ -42,14 +42,17 @@ export class Element {
     if (this.css['width']?.endsWith('px') && this.node.parent) {
       if (
         this.node.parent.type === 'SECTION' ||
-        this.node.parent.type === 'PAGE'
+        this.node.parent.type === 'PAGE' ||
+        // inline case
+        (this.node.parent as any).layoutSizingHorizontal == 'HUG'
       )
         delete this.css['width']
       else if (
         'width' in this.node.parent &&
         this.node.width === this.node.parent.width
-      )
+      ) {
         this.css['width'] = '100%'
+      }
     }
     // Image has not padding
     return this.css

src/__tests__/Element.test.ts

@@ -12,6 +12,7 @@ function createNode(
     fills,
     parent,
     layoutPositioning = 'AUTO',
+    layoutSizingHorizontal,
     ...props
   }: {
     [_: string]: any
@@ -26,6 +27,7 @@ function createNode(
     type,
     getCSSAsync: async () => props,
     exportAsync: async () => '<svg>\n<path/>\n</svg>',
+    layoutSizingHorizontal,
     textStyleId,
     parent,
     characters,
@@ -676,4 +678,18 @@ describe('Element', () => {
       )
     })
   })
+
+  describe('Render', () => {
+    it('should remove width when parent is HUG', async () => {
+      const element = createElement('FRAME', {
+        layoutSizingHorizontal: 'HUG',
+        children: [
+          createNode('INSTANCE', {
+            width: '1920px',
+          }),
+        ],
+      })
+      expect(await element.render()).toEqual('<Box>\n  <Box />\n</Box>')
+    })
+  })
 })