@wix/zero-config-implementation 1.101.0 → 1.103.0

package/package.json

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

package/src/converters/css-longhand-resolver.test.ts

@@ -393,4 +393,31 @@ describe('resolveLonghand', () => {
       expect(resolveLonghand('textDecorationLine', values)).toBe('overline')
     })
   })
+
+  describe('flexDirection extraction from flex-flow shorthand', () => {
+    it('extracts the lone direction keyword', () => {
+      expect(resolveLonghand('flexDirection', new Map([['flexFlow', 'column']]))).toBe('column')
+    })
+
+    it('ignores token order — direction keyword can appear anywhere', () => {
+      expect(resolveLonghand('flexDirection', new Map([['flexFlow', 'wrap column-reverse']]))).toBe('column-reverse')
+    })
+
+    it('defaults to row when the shorthand carries only a wrap keyword', () => {
+      expect(resolveLonghand('flexDirection', new Map([['flexFlow', 'wrap']]))).toBe('row')
+      expect(resolveLonghand('flexDirection', new Map([['flexFlow', 'nowrap']]))).toBe('row')
+    })
+
+    it('returns undefined when flexFlow is absent', () => {
+      expect(resolveLonghand('flexDirection', new Map())).toBeUndefined()
+    })
+
+    it('prefers literal flexDirection over extracting from shorthand', () => {
+      const values = new Map([
+        ['flexDirection', 'row-reverse'],
+        ['flexFlow', 'column wrap'],
+      ])
+      expect(resolveLonghand('flexDirection', values)).toBe('row-reverse')
+    })
+  })
 })

package/src/converters/css-longhand-resolver.ts

@@ -217,14 +217,20 @@ const fromTextDecorationLine: Fallback = (values) => {
 
 /**
  * `flex-flow: <flex-direction> || <flex-wrap>` — order is free and either
- * part may be omitted. Pick out just the direction keyword for the schema.
+ * part may be omitted. Pick out the direction keyword for the schema, or the
+ * spec's default (`row`) when the developer only wrote a wrap keyword, e.g.
+ * `flex-flow: wrap`.
  */
 const FLEX_DIRECTION_KEYWORDS = new Set(['row', 'row-reverse', 'column', 'column-reverse'])
+const DEFAULT_FLEX_DIRECTION = 'row'
 
 const fromFlexFlowDirection: Fallback = (values) => {
   const shorthand = values.get('flexFlow')
   if (shorthand === undefined) return undefined
-  return splitTopLevelTokens(shorthand).find((token) => FLEX_DIRECTION_KEYWORDS.has(token.toLowerCase()))
+  const directionToken = splitTopLevelTokens(shorthand).find((token) =>
+    FLEX_DIRECTION_KEYWORDS.has(token.toLowerCase()),
+  )
+  return directionToken ?? DEFAULT_FLEX_DIRECTION
 }
 
 // ─────────────────────────────────────────────────────────────────────────────

package/src/information-extractors/react/extractors/css-properties.test.ts

@@ -6,6 +6,7 @@ import type { ExtractedElement } from './core/tree-builder'
 import {
   enrichContainerProperties,
   enrichFlexProperties,
+  enrichMarginProperties,
   getCssPropertiesForTag,
   getDefaultDisplayForTag,
   hasContainerLikeDisplay,
@@ -541,3 +542,71 @@ describe('enrichContainerProperties', () => {
     expect(cssData.relevant).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.paddingTop)
   })
 })
+
+describe('enrichMarginProperties', () => {
+  it('adds the block-axis margins to a non-replaced inline element whose matched CSS changes display to block', () => {
+    const elements = [createElementWithCssProperties('span', 'display: block')]
+
+    const [enrichedElement] = enrichMarginProperties(elements)
+    const cssData = enrichedElement.extractorData.get('css-properties') as { relevant: string[] }
+
+    expect(cssData.relevant).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.marginTop)
+    expect(cssData.relevant).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.marginBottom)
+    expect(cssData.relevant).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.marginInlineStart)
+    expect(cssData.relevant).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.marginInlineEnd)
+  })
+
+  it('adds the full margin family to a non-replaced inline element whose matched CSS changes display to inline-flex', () => {
+    const elements = [createElementWithCssProperties('span', 'display: inline-flex')]
+
+    const [enrichedElement] = enrichMarginProperties(elements)
+    const cssData = enrichedElement.extractorData.get('css-properties') as { relevant: string[] }
+
+    expect(cssData.relevant).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.marginTop)
+    expect(cssData.relevant).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.marginBottom)
+  })
+
+  it('keeps only the horizontal margins when a span stays inline', () => {
+    const elements = [createElementWithCssProperties('span', 'display: inline')]
+
+    const [enrichedElement] = enrichMarginProperties(elements)
+    const cssData = enrichedElement.extractorData.get('css-properties') as { relevant: string[] }
+
+    expect(cssData.relevant).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.marginInlineStart)
+    expect(cssData.relevant).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.marginInlineEnd)
+    expect(cssData.relevant).not.toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.marginTop)
+    expect(cssData.relevant).not.toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.marginBottom)
+  })
+
+  it('removes all margin from an element whose matched CSS changes display to an internal table value', () => {
+    const elements = [createElementWithCssProperties('div', 'display: table-cell')]
+
+    const [enrichedElement] = enrichMarginProperties(elements)
+    const cssData = enrichedElement.extractorData.get('css-properties') as { relevant: string[] }
+
+    expect(cssData.relevant).not.toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.marginTop)
+    expect(cssData.relevant).not.toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.marginBottom)
+    expect(cssData.relevant).not.toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.marginInlineStart)
+    expect(cssData.relevant).not.toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.marginInlineEnd)
+  })
+
+  it('leaves the tag-default margin guess alone when no CSS declares display', () => {
+    const elements = [createElementWithCssProperties('span', '')]
+
+    const [enrichedElement] = enrichMarginProperties(elements)
+    const cssData = enrichedElement.extractorData.get('css-properties') as { relevant: string[] }
+
+    expect(cssData.relevant).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.marginInlineStart)
+    expect(cssData.relevant).not.toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.marginTop)
+  })
+
+  it('corrects margin via the --display root convention, not just a literal display declaration', () => {
+    const elements = [createElementWithCssProperties('span', '--display: block')]
+
+    const [enrichedElement] = enrichMarginProperties(elements)
+    const cssData = enrichedElement.extractorData.get('css-properties') as { relevant: string[] }
+
+    expect(cssData.relevant).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.marginTop)
+    expect(cssData.relevant).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.marginBottom)
+  })
+})

package/src/information-extractors/react/extractors/css-properties.ts

@@ -135,26 +135,35 @@ const MARGIN_UNSUPPORTED_DISPLAY_VALUES = new Set([
 ])
 
 /**
- * Margin properties relevant to a tag's default display. Internal table
+ * Margin properties relevant to a given `display` value. Internal table
  * display values (`tr`, `thead`/`tbody`/`tfoot`, `col`/`colgroup`, `td`/`th`)
  * don't honor margin at all. Non-replaced inline elements (`span`, `a`, …)
  * only honor the horizontal (inline) margins — `margin-top`/`margin-bottom`
  * have no effect on them. Replaced inline elements (`img`, `video`, …) honor
  * margin on every side, same as a block box.
  */
-function getMarginPropertiesForTag(tag: string): string[] {
-  const normalizedTag = tag.toLowerCase()
-  const defaultDisplay = getDefaultDisplayForTag(normalizedTag)
-
-  if (MARGIN_UNSUPPORTED_DISPLAY_VALUES.has(defaultDisplay)) {
+function getMarginPropertiesForDisplay(displayValue: string, isReplacedElement: boolean): string[] {
+  const normalizedDisplayValue = normalizeDisplayValue(displayValue)
+  if (MARGIN_UNSUPPORTED_DISPLAY_VALUES.has(normalizedDisplayValue)) {
     return []
   }
-  if (defaultDisplay === 'inline' && !MEDIA_TAGS.has(normalizedTag)) {
+  if (normalizedDisplayValue === 'inline' && !isReplacedElement) {
     return HORIZONTAL_MARGIN_CSS_PROPERTIES
   }
   return MARGIN_CSS_PROPERTIES
 }
 
+/**
+ * Margin properties relevant to a tag's default display, used as the
+ * best-effort guess at element creation time, before CSS matching has run.
+ * `enrichMarginProperties` corrects this once the effective display —
+ * matched CSS, including the `--display` root convention — is known.
+ */
+function getMarginPropertiesForTag(tag: string): string[] {
+  const normalizedTag = tag.toLowerCase()
+  return getMarginPropertiesForDisplay(getDefaultDisplayForTag(normalizedTag), MEDIA_TAGS.has(normalizedTag))
+}
+
 /**
  * Child-layout controls for flex/grid containers, added post-hoc by
  * `enrichFlexProperties` once the element's resolved `display` is known.
@@ -654,6 +663,49 @@ export function enrichContainerProperties(elements: ExtractedElement[]): Extract
   })
 }
 
+/**
+ * Replaces whatever margin properties are currently in `existing` with the
+ * ones relevant to `marginProperties` — used by `enrichMarginProperties` to
+ * correct the tag-default guess once the effective display is known.
+ */
+function withMarginProperties(existing: string[], marginProperties: string[]): string[] {
+  const withoutMargin = existing.filter((property) => !(MARGIN_CSS_PROPERTIES as string[]).includes(property))
+  return [...withoutMargin, ...marginProperties]
+}
+
+/**
+ * Walks the element tree and corrects margin properties from the tag-default
+ * guess made at creation time to the element's effective display — matched
+ * CSS, including the `--display` root convention. A non-replaced inline
+ * element (e.g. `<span>`) whose matched CSS changes display to `block` or
+ * `flex` gains the block-axis margins it was missing; conversely, an element
+ * whose effective display becomes an internal table value loses margin
+ * entirely. Must be called after CSS selector matching (requires
+ * css-matcher data).
+ */
+export function enrichMarginProperties(elements: ExtractedElement[]): ExtractedElement[] {
+  return elements.map((element) => {
+    const matcherData = element.extractorData.get('css-matcher') as MatchedCssData | undefined
+    const cssData = element.extractorData.get('css-properties') as CssPropertiesData | undefined
+
+    if (cssData && matcherData && hasEffectiveDisplayDeclaration(matcherData)) {
+      const effectiveDisplay = resolveEffectiveDisplayValue(matcherData)
+      if (effectiveDisplay !== undefined) {
+        const isReplacedElement = MEDIA_TAGS.has(element.tag.toLowerCase())
+        const marginProperties = getMarginPropertiesForDisplay(effectiveDisplay, isReplacedElement)
+        element.extractorData.set('css-properties', {
+          relevant: withMarginProperties(cssData.relevant, marginProperties),
+        })
+      }
+    }
+
+    return {
+      ...element,
+      children: enrichMarginProperties(element.children),
+    }
+  })
+}
+
 // ─────────────────────────────────────────────────────────────────────────────
 // Factory
 // ─────────────────────────────────────────────────────────────────────────────

package/src/information-extractors/react/extractors/index.ts

@@ -29,6 +29,7 @@ export {
   enrichGapProperties,
   enrichContainerProperties,
   enrichFlexProperties,
+  enrichMarginProperties,
   resolveDisplayValue,
   getDefaultDisplayForTag,
   ROOT_DISPLAY_CUSTOM_PROPERTY,

package/src/information-extractors/react/index.ts

@@ -19,6 +19,7 @@ export {
   enrichGapProperties,
   enrichContainerProperties,
   enrichFlexProperties,
+  enrichMarginProperties,
   resolveDisplayValue,
   getDefaultDisplayForTag,
   ROOT_DISPLAY_CUSTOM_PROPERTY,

package/src/manifest-pipeline.ts

@@ -12,6 +12,7 @@ import {
   enrichContainerProperties,
   enrichFlexProperties,
   enrichGapProperties,
+  enrichMarginProperties,
   runExtractors,
 } from './information-extractors/react'
 import type { CoupledComponentInfo, CoupledProp, DOMBinding, TrackingStores } from './information-extractors/react'
@@ -150,7 +151,8 @@ export function processComponent(
   if (html && extractedElements.length > 0 && css.length > 0) {
     try {
       const matchResult = matchCssSelectors(html, extractedElements, css)
-      const containerEnrichedElements = enrichContainerProperties(matchResult.elements)
+      const marginEnrichedElements = enrichMarginProperties(matchResult.elements)
+      const containerEnrichedElements = enrichContainerProperties(marginEnrichedElements)
       const gapEnrichedElements = enrichGapProperties(containerEnrichedElements)
       const flexEnrichedElements = enrichFlexProperties(gapEnrichedElements)
       enhancedInfo = {

package/src/validators/editor-element-validator.test.ts

@@ -139,4 +139,95 @@ describe('validateEditorElement', () => {
     })
     expect(() => validateEditorElement(editorElement, 'MyButton')).toThrow('MyButton')
   })
+
+  it('throws ValidationError when a part name is reused on a direct child element', () => {
+    const editorElement = buildMinimalEditorElement({
+      elements: {
+        element1: buildInlineElementItem({
+          inlineElement: {
+            selector: '.element1',
+            displayName: 'Element1',
+            elements: {
+              element1: buildInlineElementItem(),
+            },
+          },
+        }),
+      },
+    })
+    expect(() => validateEditorElement(editorElement, 'TestComponent')).toThrow(
+      'editorElement.elements.element1.inlineElement.elements.element1: part name "element1" is already used by an ancestor element',
+    )
+  })
+
+  it('throws ValidationError when a part name is reused on a grandchild, not just a direct child', () => {
+    const editorElement = buildMinimalEditorElement({
+      elements: {
+        outer: buildInlineElementItem({
+          inlineElement: {
+            selector: '.outer',
+            displayName: 'Outer',
+            elements: {
+              middle: buildInlineElementItem({
+                inlineElement: {
+                  selector: '.middle',
+                  displayName: 'Middle',
+                  elements: {
+                    outer: buildInlineElementItem(),
+                  },
+                },
+              }),
+            },
+          },
+        }),
+      },
+    })
+    expect(() => validateEditorElement(editorElement, 'TestComponent')).toThrow(
+      'editorElement.elements.outer.inlineElement.elements.middle.inlineElement.elements.outer: part name "outer" is already used by an ancestor element',
+    )
+  })
+
+  it('does not throw when the same part name is reused across unrelated sibling subtrees', () => {
+    const editorElement = buildMinimalEditorElement({
+      elements: {
+        left: buildInlineElementItem({
+          inlineElement: {
+            selector: '.left',
+            displayName: 'Left',
+            elements: { shared: buildInlineElementItem() },
+          },
+        }),
+        right: buildInlineElementItem({
+          inlineElement: {
+            selector: '.right',
+            displayName: 'Right',
+            elements: { shared: buildInlineElementItem() },
+          },
+        }),
+      },
+    })
+    expect(() => validateEditorElement(editorElement, 'TestComponent')).not.toThrow()
+  })
+
+  it('does not throw for a deeply nested tree with all-unique part names', () => {
+    const editorElement = buildMinimalEditorElement({
+      elements: {
+        outer: buildInlineElementItem({
+          inlineElement: {
+            selector: '.outer',
+            displayName: 'Outer',
+            elements: {
+              middle: buildInlineElementItem({
+                inlineElement: {
+                  selector: '.middle',
+                  displayName: 'Middle',
+                  elements: { inner: buildInlineElementItem() },
+                },
+              }),
+            },
+          },
+        }),
+      },
+    })
+    expect(() => validateEditorElement(editorElement, 'TestComponent')).not.toThrow()
+  })
 })

package/src/validators/editor-element-validator.ts

@@ -21,10 +21,14 @@ export function validateEditorElement(editorElement: RawEditorElement, component
   })
 }
 
-function collectElementViolations(element: AnyElement, elementPath: string): string[] {
+function collectElementViolations(
+  element: AnyElement,
+  elementPath: string,
+  ancestorNames: ReadonlySet<string> = new Set(),
+): string[] {
   return [
     ...validateCssCustomProperties(element.cssCustomProperties, elementPath),
-    ...validateElementsMap(element.elements, elementPath),
+    ...validateElementsMap(element.elements, elementPath, ancestorNames),
   ]
 }
 
@@ -44,7 +48,11 @@ function validateCssCustomProperties(
   return violations
 }
 
-function validateElementsMap(elements: Record<string, ElementItem> | undefined, elementPath: string): string[] {
+function validateElementsMap(
+  elements: Record<string, ElementItem> | undefined,
+  elementPath: string,
+  ancestorNames: ReadonlySet<string> = new Set(),
+): string[] {
   if (!elements) return []
 
   const violations: string[] = []
@@ -56,8 +64,16 @@ function validateElementsMap(elements: Record<string, ElementItem> | undefined,
       violations.push(`${itemPath}: elementType is not set or UNKNOWN`)
     }
 
+    if (ancestorNames.has(elementKey)) {
+      violations.push(`${itemPath}: part name "${elementKey}" is already used by an ancestor element`)
+    }
+
     if (elementItem.inlineElement) {
-      violations.push(...collectElementViolations(elementItem.inlineElement, `${itemPath}.inlineElement`))
+      const descendantAncestorNames = new Set(ancestorNames)
+      descendantAncestorNames.add(elementKey)
+      violations.push(
+        ...collectElementViolations(elementItem.inlineElement, `${itemPath}.inlineElement`, descendantAncestorNames),
+      )
     }
   }
   return violations