@wix/zero-config-implementation 1.99.0 → 1.101.0

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

@@ -99,6 +99,70 @@ const BOX_CSS_PROPERTIES = [
   CSS_PROPERTY_TYPE.borderEndStartRadius,
   CSS_PROPERTY_TYPE.borderEndEndRadius,
   CSS_PROPERTY_TYPE.boxShadow,
+  CSS_PROPERTY_TYPE.width,
+  CSS_PROPERTY_TYPE.height,
+  CSS_PROPERTY_TYPE.overflow,
+  CSS_PROPERTY_TYPE.mixBlendMode,
+]
+
+/**
+ * Margin applies to most DOM elements regardless of box/text/media
+ * semantics, so it's appended in `getCssPropertiesForTag` rather than gated
+ * to one of the trait-based sets above — except for the display-dependent
+ * carve-outs in `getMarginPropertiesForTag` below.
+ */
+const MARGIN_CSS_PROPERTIES = [
+  CSS_PROPERTY_TYPE.marginTop,
+  CSS_PROPERTY_TYPE.marginBottom,
+  CSS_PROPERTY_TYPE.marginInlineStart,
+  CSS_PROPERTY_TYPE.marginInlineEnd,
+]
+
+const HORIZONTAL_MARGIN_CSS_PROPERTIES = [CSS_PROPERTY_TYPE.marginInlineStart, CSS_PROPERTY_TYPE.marginInlineEnd]
+
+/**
+ * Per CSS 2.1 §17.6.1, margin does not apply to elements with these internal
+ * table display values — the table layout algorithm ignores it entirely.
+ */
+const MARGIN_UNSUPPORTED_DISPLAY_VALUES = new Set([
+  'table-row',
+  'table-row-group',
+  'table-header-group',
+  'table-footer-group',
+  'table-column',
+  'table-column-group',
+  'table-cell',
+])
+
+/**
+ * Margin properties relevant to a tag's default display. 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)) {
+    return []
+  }
+  if (defaultDisplay === 'inline' && !MEDIA_TAGS.has(normalizedTag)) {
+    return HORIZONTAL_MARGIN_CSS_PROPERTIES
+  }
+  return MARGIN_CSS_PROPERTIES
+}
+
+/**
+ * Child-layout controls for flex/grid containers, added post-hoc by
+ * `enrichFlexProperties` once the element's resolved `display` is known.
+ */
+const FLEX_CONTAINER_CSS_PROPERTIES = [
+  CSS_PROPERTY_TYPE.flexDirection,
+  CSS_PROPERTY_TYPE.justifyContent,
+  CSS_PROPERTY_TYPE.alignItems,
 ]
 
 /**
@@ -128,6 +192,12 @@ const MEDIA_CSS_PROPERTIES = [
   CSS_PROPERTY_TYPE.borderEndStartRadius,
   CSS_PROPERTY_TYPE.borderEndEndRadius,
   CSS_PROPERTY_TYPE.boxShadow,
+  CSS_PROPERTY_TYPE.width,
+  CSS_PROPERTY_TYPE.height,
+  CSS_PROPERTY_TYPE.overflow,
+  CSS_PROPERTY_TYPE.objectFit,
+  CSS_PROPERTY_TYPE.objectPosition,
+  CSS_PROPERTY_TYPE.mixBlendMode,
 ]
 
 function hasTextSemantics(tag: string, attributes: SemanticAttributes = {}): boolean {
@@ -180,6 +250,7 @@ export function getCssPropertiesForTag(tag: string, attributes: SemanticAttribut
     properties.push(...BOX_CSS_PROPERTIES)
   }
 
+  properties.push(...getMarginPropertiesForTag(tag))
   properties.push(CSS_PROPERTY_TYPE.display)
   return [...new Set(properties)]
 }
@@ -219,6 +290,27 @@ export function addGapProperty(existing: string[]): string[] {
   return [...existing, CSS_PROPERTY_TYPE.gap]
 }
 
+/**
+ * Adds flex/grid container CSS properties to an existing property list without duplicates.
+ */
+export function addFlexContainerProperties(existing: string[]): string[] {
+  const result = [...existing]
+  for (const property of FLEX_CONTAINER_CSS_PROPERTIES) {
+    if (!result.includes(property)) {
+      result.push(property)
+    }
+  }
+  return result
+}
+
+/**
+ * Adds the `alignSelf` CSS property to an existing property list if not already present.
+ */
+export function addAlignSelfProperty(existing: string[]): string[] {
+  if (existing.includes(CSS_PROPERTY_TYPE.alignSelf)) return existing
+  return [...existing, CSS_PROPERTY_TYPE.alignSelf]
+}
+
 // ─────────────────────────────────────────────────────────────────────────────
 // Display Value Resolution
 // ─────────────────────────────────────────────────────────────────────────────
@@ -412,7 +504,7 @@ function hasUnresolvableDisplayVar(matcherData: MatchedCssData): boolean {
   return resolveCssPropertyValue(displayProperty, matcherData.customProperties) === undefined
 }
 
-function hasDisplayDeclaration(matcherData: MatchedCssData): boolean {
+function hasLiteralDisplayDeclaration(matcherData: MatchedCssData): boolean {
   for (const match of matcherData.matches) {
     for (const property of match.properties) {
       if (property.name === 'display') return true
@@ -421,14 +513,30 @@ function hasDisplayDeclaration(matcherData: MatchedCssData): boolean {
   return false
 }
 
+export const ROOT_DISPLAY_CUSTOM_PROPERTY = '--display'
+
+function hasEffectiveDisplayDeclaration(matcherData: MatchedCssData): boolean {
+  return (
+    hasLiteralDisplayDeclaration(matcherData) ||
+    matcherData.customProperties[ROOT_DISPLAY_CUSTOM_PROPERTY] !== undefined
+  )
+}
+
+function resolveEffectiveDisplayValue(matcherData: MatchedCssData): string | undefined {
+  const resolved = resolveDisplayValue(matcherData)
+  if (resolved !== undefined) return resolved
+  if (hasLiteralDisplayDeclaration(matcherData)) return undefined
+  return matcherData.customProperties[ROOT_DISPLAY_CUSTOM_PROPERTY]
+}
+
 export function hasFlexOrGridDisplay(matcherData: MatchedCssData): boolean {
-  const displayValue = resolveDisplayValue(matcherData)
+  const displayValue = resolveEffectiveDisplayValue(matcherData)
   if (displayValue !== undefined) return displayUsesFlexOrGridLayout(displayValue)
   return hasUnresolvableDisplayVar(matcherData)
 }
 
 export function hasContainerLikeDisplay(matcherData: MatchedCssData): boolean {
-  const displayValue = resolveDisplayValue(matcherData)
+  const displayValue = resolveEffectiveDisplayValue(matcherData)
   if (displayValue !== undefined) return displayCreatesContainerBox(displayValue)
   return hasUnresolvableDisplayVar(matcherData)
 }
@@ -456,7 +564,7 @@ function hasDefaultBoxProperties(tag: string, role?: string): boolean {
 }
 
 function hasEffectiveContainerDisplay(tag: string, role?: string, matcherData?: MatchedCssData): boolean {
-  if (matcherData && hasDisplayDeclaration(matcherData)) {
+  if (matcherData && hasEffectiveDisplayDeclaration(matcherData)) {
     return hasContainerLikeDisplay(matcherData)
   }
 
@@ -488,6 +596,40 @@ export function enrichGapProperties(elements: ExtractedElement[]): ExtractedElem
   })
 }
 
+/**
+ * Walks the element tree and adds flex/grid layout controls to relevant CSS
+ * properties: `flexDirection`/`justifyContent`/`alignItems` on elements whose
+ * own display is flex|grid, and `alignSelf` on their direct children (the
+ * property that actually targets flex/grid items per the CSS spec).
+ * Must be called after CSS selector matching (requires css-matcher data).
+ */
+export function enrichFlexProperties(
+  elements: ExtractedElement[],
+  parentIsFlexOrGridContainer = false,
+): ExtractedElement[] {
+  return elements.map((element) => {
+    const matcherData = element.extractorData.get('css-matcher') as MatchedCssData | undefined
+    const isFlexOrGridContainer = matcherData ? hasFlexOrGridDisplay(matcherData) : false
+    const cssData = element.extractorData.get('css-properties') as CssPropertiesData | undefined
+
+    if (cssData) {
+      let relevant = cssData.relevant
+      if (isFlexOrGridContainer) {
+        relevant = addFlexContainerProperties(relevant)
+      }
+      if (parentIsFlexOrGridContainer) {
+        relevant = addAlignSelfProperty(relevant)
+      }
+      element.extractorData.set('css-properties', { relevant })
+    }
+
+    return {
+      ...element,
+      children: enrichFlexProperties(element.children, isFlexOrGridContainer),
+    }
+  })
+}
+
 /**
  * Walks the element tree and adds box properties to selected text tags
  * when CSS overrides `display` or default UA display creates a box.

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

@@ -28,8 +28,10 @@ export {
   createCssPropertiesExtractor,
   enrichGapProperties,
   enrichContainerProperties,
+  enrichFlexProperties,
   resolveDisplayValue,
   getDefaultDisplayForTag,
+  ROOT_DISPLAY_CUSTOM_PROPERTY,
 } from './css-properties'
 export type { CssPropertiesData } from './css-properties'
 

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

@@ -18,8 +18,10 @@ export {
   createCssPropertiesExtractor,
   enrichGapProperties,
   enrichContainerProperties,
+  enrichFlexProperties,
   resolveDisplayValue,
   getDefaultDisplayForTag,
+  ROOT_DISPLAY_CUSTOM_PROPERTY,
   inferSupportedNativeStates,
 } from './extractors'
 

package/src/manifest-pipeline.ts

@@ -10,6 +10,7 @@ import {
   createCssPropertiesExtractor,
   createPropTrackerExtractor,
   enrichContainerProperties,
+  enrichFlexProperties,
   enrichGapProperties,
   runExtractors,
 } from './information-extractors/react'
@@ -151,9 +152,10 @@ export function processComponent(
       const matchResult = matchCssSelectors(html, extractedElements, css)
       const containerEnrichedElements = enrichContainerProperties(matchResult.elements)
       const gapEnrichedElements = enrichGapProperties(containerEnrichedElements)
+      const flexEnrichedElements = enrichFlexProperties(gapEnrichedElements)
       enhancedInfo = {
         ...enhancedInfo,
-        elements: convertElements(gapEnrichedElements),
+        elements: convertElements(flexEnrichedElements),
       }
       varUsedByTraceId = matchResult.varUsedByTraceId
     } catch (thrownError) {