@wix/zero-config-implementation 1.102.0 → 1.103.0

package/package.json

@@ -4,7 +4,7 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "version": "1.102.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": "96d9e739c8567fd3813b698d6e9d84d175e3def2393dbaec37e6a9e7"
+  "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 = {