@wix/zero-config-implementation 1.104.0 → 1.105.0

package/package.json

@@ -4,7 +4,7 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "version": "1.104.0",
+  "version": "1.105.0",
   "description": "Core library for extracting component manifests from JS and CSS files",
   "type": "module",
   "main": "dist/index.js",
@@ -106,5 +106,5 @@
       ]
     }
   },
-  "falconPackageHash": "d233fc718503fd69a8efbad0624d506a5450fdd5e310b5b11cf42832"
+  "falconPackageHash": "0c8ba866b638c1cacaeaecfc2e82c36a40e6307f5e3896c922c1dc25"
 }

package/src/converters/to-editor-component.test.ts

@@ -374,6 +374,48 @@ describe('toEditorReactComponent — cssProperties defaultValue', () => {
     expect(result.editorElement?.cssProperties?.overflow).toEqual({ defaultValue: 'hidden' })
   })
 
+  it("excludes margin from the root element but keeps it on inner elements (editor's layout positions the root on stage)", () => {
+    const marginProperties = [
+      CSS_PROPERTIES.CSS_PROPERTY_TYPE.margin,
+      CSS_PROPERTIES.CSS_PROPERTY_TYPE.marginTop,
+      CSS_PROPERTIES.CSS_PROPERTY_TYPE.marginRight,
+      CSS_PROPERTIES.CSS_PROPERTY_TYPE.marginBottom,
+      CSS_PROPERTIES.CSS_PROPERTY_TYPE.marginLeft,
+      CSS_PROPERTIES.CSS_PROPERTY_TYPE.marginInlineStart,
+      CSS_PROPERTIES.CSS_PROPERTY_TYPE.marginInlineEnd,
+    ]
+    const createExtractorData = () => {
+      const extractorData = new Map<string, unknown>()
+      extractorData.set('css-matcher', matcherDataFromCss(''))
+      extractorData.set('css-properties', { relevant: marginProperties })
+      return extractorData
+    }
+
+    const childElement: ExtractedElement = {
+      traceId: 'trace-icon',
+      name: 'icon',
+      tag: 'div',
+      attributes: {},
+      extractorData: createExtractorData(),
+      children: [],
+    }
+    const rootElement: ExtractedElement = {
+      traceId: 'trace-root',
+      name: 'root',
+      tag: 'div',
+      attributes: {},
+      extractorData: createExtractorData(),
+      children: [childElement],
+    }
+
+    const result = toEditorReactComponent(createComponent(rootElement))
+
+    for (const property of marginProperties) {
+      expect(result.editorElement?.cssProperties?.[property]).toBeUndefined()
+      expect(result.editorElement?.elements?.icon?.inlineElement?.cssProperties?.[property]).toEqual({})
+    }
+  })
+
   it('keeps width/height on inner (non-root) elements', () => {
     const rootExtractorData = new Map<string, unknown>()
     rootExtractorData.set('css-matcher', matcherDataFromCss(''))

package/src/converters/to-editor-component.ts

@@ -576,9 +576,20 @@ function toDisplayEnumValue(cssValue: string): DisplayEnumValue {
   return (CSS_DISPLAY_TO_ENUM[cssValue] ?? cssValue) as DisplayEnumValue
 }
 
-// Root sizing is handled separately via layout config, so `width`/`height`
-// are excluded from the root element's own `cssProperties`.
-const ROOT_EXCLUDED_CSS_PROPERTIES = new Set<string>([CSS_PROPERTY_TYPE.width, CSS_PROPERTY_TYPE.height])
+// CSS properties left out of the root element's own `cssProperties`:
+// - `width`/`height`: root sizing is handled separately via layout config.
+// - margins: the editor's layout positions the root on stage.
+const ROOT_EXCLUDED_CSS_PROPERTIES = new Set<string>([
+  CSS_PROPERTY_TYPE.width,
+  CSS_PROPERTY_TYPE.height,
+  CSS_PROPERTY_TYPE.margin,
+  CSS_PROPERTY_TYPE.marginTop,
+  CSS_PROPERTY_TYPE.marginRight,
+  CSS_PROPERTY_TYPE.marginBottom,
+  CSS_PROPERTY_TYPE.marginLeft,
+  CSS_PROPERTY_TYPE.marginInlineStart,
+  CSS_PROPERTY_TYPE.marginInlineEnd,
+])
 
 function buildCssProperties(
   element: ExtractedElement | undefined,