@wix/zero-config-implementation 1.38.0 → 1.39.0

package/package.json

@@ -4,7 +4,7 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "version": "1.38.0",
+  "version": "1.39.0",
   "description": "Core library for extracting component manifests from JS and CSS files",
   "type": "module",
   "main": "dist/index.js",
@@ -84,5 +84,5 @@
       ]
     }
   },
-  "falconPackageHash": "e65c0344d74e7ed0164dee43129b7d1dc6963129ff26e0dbc2346c28"
+  "falconPackageHash": "7a722b2c0d3a2401e9c24708c061591e14e588d2901397bab2ddb304"
 }

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

@@ -6,6 +6,8 @@
  */
 
 import { CSS_PROPERTIES } from '@wix/zero-config-schema'
+import type { CssSelectorMatch, MatchedCssData } from '../../css/types'
+import type { ExtractedElement } from './core/tree-builder'
 import type { CreateElementEvent, ReactExtractor } from './core/types'
 
 // ─────────────────────────────────────────────────────────────────────────────
@@ -199,6 +201,56 @@ export function addTextProperties(existing: string[]): string[] {
   return result
 }
 
+/**
+ * Adds gap CSS property to an existing property list if not already present.
+ */
+export function addGapProperty(existing: string[]): string[] {
+  if (existing.includes(CSS_PROPERTY_TYPE.gap)) return existing
+  return [...existing, CSS_PROPERTY_TYPE.gap]
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Gap Enrichment
+// ─────────────────────────────────────────────────────────────────────────────
+
+const FLEX_GRID_DISPLAY_VALUES = new Set(['flex', 'grid', 'inline-flex', 'inline-grid'])
+
+function hasFlexOrGridDisplay(matches: CssSelectorMatch[]): boolean {
+  for (const match of matches) {
+    for (const property of match.properties) {
+      if (property.name === 'display' && FLEX_GRID_DISPLAY_VALUES.has(property.value)) {
+        return true
+      }
+    }
+  }
+  return false
+}
+
+/**
+ * Walks the element tree and adds `gap` to relevant CSS properties
+ * for elements that have display: flex|grid and more than 1 child.
+ * Must be called after CSS selector matching (requires css-matcher data).
+ */
+export function enrichGapProperties(elements: ExtractedElement[]): ExtractedElement[] {
+  return elements.map((element) => {
+    if (element.children.length > 1) {
+      const matcherData = element.extractorData.get('css-matcher') as MatchedCssData | undefined
+      if (matcherData && hasFlexOrGridDisplay(matcherData.matches)) {
+        const cssData = element.extractorData.get('css-properties') as CssPropertiesData | undefined
+        if (cssData) {
+          element.extractorData.set('css-properties', {
+            relevant: addGapProperty(cssData.relevant),
+          })
+        }
+      }
+    }
+    return {
+      ...element,
+      children: enrichGapProperties(element.children),
+    }
+  })
+}
+
 // ─────────────────────────────────────────────────────────────────────────────
 // Factory
 // ─────────────────────────────────────────────────────────────────────────────

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

@@ -24,5 +24,5 @@ export type {
 export { createPropTrackerExtractor } from './prop-tracker'
 export type { PropTrackerData, PropTrackerExtractorState } from './prop-tracker'
 
-export { createCssPropertiesExtractor } from './css-properties'
+export { createCssPropertiesExtractor, enrichGapProperties } from './css-properties'
 export type { CssPropertiesData } from './css-properties'

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

@@ -16,6 +16,7 @@ export {
   // Extractors
   createPropTrackerExtractor,
   createCssPropertiesExtractor,
+  enrichGapProperties,
 } from './extractors'
 
 export type {

package/src/manifest-pipeline.ts

@@ -9,6 +9,7 @@ import {
   type RunExtractorsOptions,
   createCssPropertiesExtractor,
   createPropTrackerExtractor,
+  enrichGapProperties,
   runExtractors,
 } from './information-extractors/react'
 import type { CoupledComponentInfo, CoupledProp, DOMBinding, TrackingStores } from './information-extractors/react'
@@ -154,9 +155,10 @@ export function processComponent(
   if (html && extractedElements.length > 0 && css.length > 0) {
     try {
       const matchResult = matchCssSelectors(html, extractedElements, css)
+      const gapEnrichedElements = enrichGapProperties(matchResult.elements)
       enhancedInfo = {
         ...enhancedInfo,
-        elements: convertElements(matchResult.elements),
+        elements: convertElements(gapEnrichedElements),
       }
       varUsedByTraceId = matchResult.varUsedByTraceId
     } catch (thrownError) {