@wix/zero-config-implementation 1.72.0 → 1.73.0

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

@@ -2,10 +2,11 @@
  * CSS Properties Extractor
  *
  * Determines which CSS properties are relevant to each element
- * based on its tag, role, and whether it has text content.
+ * based on semantic traits and effective display behavior.
  */
 
 import { CSS_PROPERTIES } from '@wix/react-component-schema'
+import { resolveCssPropertyValue } from '../../css/parse'
 import type { MatchedCssData } from '../../css/types'
 import type { ExtractedElement } from './core/tree-builder'
 import type { CreateElementEvent, ReactExtractor } from './core/types'
@@ -19,14 +20,9 @@ export interface CssPropertiesData {
 }
 
 // ─────────────────────────────────────────────────────────────────────────────
-// Element Categories
+// Semantic Traits
 // ─────────────────────────────────────────────────────────────────────────────
 
-/**
- * Layout Containers - structural boxes focused on spacing and positioning
- */
-const LAYOUT_CONTAINER_TAGS = new Set(['div', 'section', 'article', 'header', 'footer', 'main', 'nav', 'aside'])
-
 /**
  * Text & Typography - elements where readability and hierarchy are primary
  */
@@ -53,21 +49,17 @@ const TEXT_TAGS = new Set([
  */
 const MEDIA_TAGS = new Set(['img', 'video', 'canvas', 'picture'])
 
-/**
- * Form Inputs & Interactive Elements - require state-based styling
- */
-const INTERACTIVE_TAGS = new Set(['button', 'input', 'textarea', 'select'])
-
 // ─────────────────────────────────────────────────────────────────────────────
 // CSS Property Sets (using logical properties)
 // ─────────────────────────────────────────────────────────────────────────────
 
 /**
- * CSS properties for Layout Containers and Interactive Elements
+ * CSS properties for box-generating elements. These are visual box styles,
+ * not child-layout controls such as `gap`.
  */
 const { CSS_PROPERTY_TYPE } = CSS_PROPERTIES
 
-const CONTAINER_CSS_PROPERTIES = [
+const BOX_CSS_PROPERTIES = [
   CSS_PROPERTY_TYPE.background,
   CSS_PROPERTY_TYPE.borderTop,
   CSS_PROPERTY_TYPE.borderBottom,
@@ -113,81 +105,52 @@ const MEDIA_CSS_PROPERTIES = [
   CSS_PROPERTY_TYPE.boxShadow,
 ]
 
-// ─────────────────────────────────────────────────────────────────────────────
-// Category Detection
-// ─────────────────────────────────────────────────────────────────────────────
-
-type ElementCategory = 'layout' | 'text' | 'media' | 'interactive' | 'unknown'
-
-/**
- * Determines the category of an element based on its tag and role
- */
-function getElementCategory(tag: string, role?: string): ElementCategory {
+function hasTextSemantics(tag: string, role?: string): boolean {
   const normalizedTag = tag.toLowerCase()
-
-  // Check role-based overrides first
   if (role) {
     const normalizedRole = role.toLowerCase()
-    if (normalizedRole === 'button' || normalizedRole === 'textbox') {
-      return 'interactive'
-    }
     if (normalizedRole === 'heading' || normalizedRole === 'paragraph') {
-      return 'text'
-    }
-    if (normalizedRole === 'img' || normalizedRole === 'figure') {
-      return 'media'
+      return true
     }
   }
+  return TEXT_TAGS.has(normalizedTag)
+}
 
-  // Check tag-based categories
-  if (INTERACTIVE_TAGS.has(normalizedTag)) {
-    return 'interactive'
-  }
-  if (TEXT_TAGS.has(normalizedTag)) {
-    return 'text'
-  }
-  if (MEDIA_TAGS.has(normalizedTag)) {
-    return 'media'
-  }
-  if (LAYOUT_CONTAINER_TAGS.has(normalizedTag)) {
-    return 'layout'
+function hasMediaSemantics(tag: string, role?: string): boolean {
+  const normalizedTag = tag.toLowerCase()
+  if (role) {
+    const normalizedRole = role.toLowerCase()
+    if (normalizedRole === 'img' || normalizedRole === 'figure') {
+      return true
+    }
   }
-
-  return 'unknown'
+  return MEDIA_TAGS.has(normalizedTag)
 }
 
 /**
- * Gets CSS properties relevant to an element based on tag and role.
+ * Gets CSS properties relevant to an element from composable traits:
+ * text semantics, media semantics, and box-generating display.
  * Note: hasTextContent determination is deferred to tree building since
  * we can't know during createElement if a child will have text content.
  */
 export function getCssPropertiesForTag(tag: string, role?: string): string[] {
-  const category = getElementCategory(tag, role)
   const properties: string[] = []
+  const hasTextProperties = hasTextSemantics(tag, role)
+  const hasMediaProperties = hasMediaSemantics(tag, role)
+  const hasBoxProperties = hasContainerLikeDefaultDisplay(tag) && !hasMediaProperties
 
-  switch (category) {
-    case 'layout':
-    case 'interactive':
-      properties.push(...CONTAINER_CSS_PROPERTIES)
-      break
-
-    case 'text':
-      properties.push(...TEXT_CSS_PROPERTIES)
-      break
-
-    case 'media':
-      properties.push(...MEDIA_CSS_PROPERTIES)
-      break
-
-    case 'unknown':
-      // For unknown elements, default to container properties
-      // (can be refined during tree building based on children)
-      properties.push(...CONTAINER_CSS_PROPERTIES)
-      break
+  if (hasTextProperties) {
+    properties.push(...TEXT_CSS_PROPERTIES)
+  }
+  if (hasMediaProperties) {
+    properties.push(...MEDIA_CSS_PROPERTIES)
+  }
+  if (hasBoxProperties) {
+    properties.push(...BOX_CSS_PROPERTIES)
   }
 
   properties.push(CSS_PROPERTY_TYPE.display)
-  return properties
+  return [...new Set(properties)]
 }
 
 /**
@@ -204,6 +167,19 @@ export function addTextProperties(existing: string[]): string[] {
   return result
 }
 
+/**
+ * Adds box CSS properties to an existing property list without duplicates.
+ */
+export function addBoxProperties(existing: string[]): string[] {
+  const result = [...existing]
+  for (const property of BOX_CSS_PROPERTIES) {
+    if (!result.includes(property)) {
+      result.push(property)
+    }
+  }
+  return result
+}
+
 /**
  * Adds gap CSS property to an existing property list if not already present.
  */
@@ -216,21 +192,91 @@ export function addGapProperty(existing: string[]): string[] {
 // Display Value Resolution
 // ─────────────────────────────────────────────────────────────────────────────
 
+// Based on WebKit and Blink UA stylesheets. The map is intentionally limited
+// to element defaults rather than pseudo-elements or internal control parts.
 const TAG_DEFAULT_DISPLAY: Record<string, string> = {
-  span: 'inline',
   a: 'inline',
-  strong: 'inline',
-  em: 'inline',
+  address: 'block',
+  area: 'none',
+  article: 'block',
+  aside: 'block',
+  audio: 'inline',
   b: 'inline',
+  base: 'none',
+  basefont: 'none',
+  blockquote: 'block',
+  body: 'block',
+  button: 'inline-block',
+  canvas: 'inline',
+  caption: 'table-caption',
+  center: 'block',
+  col: 'table-column',
+  colgroup: 'table-column-group',
+  datalist: 'none',
+  dd: 'block',
+  dir: 'block',
+  div: 'block',
+  dl: 'block',
+  dt: 'block',
+  em: 'inline',
+  embed: 'inline',
+  fieldset: 'block',
+  figcaption: 'block',
+  figure: 'block',
+  footer: 'block',
+  form: 'block',
+  h1: 'block',
+  h2: 'block',
+  h3: 'block',
+  h4: 'block',
+  h5: 'block',
+  h6: 'block',
+  head: 'none',
+  header: 'block',
+  hgroup: 'block',
+  hr: 'block',
+  html: 'block',
   i: 'inline',
-  label: 'inline',
+  iframe: 'inline',
   img: 'inline',
-  input: 'inline',
-  select: 'inline',
-  textarea: 'inline',
-  button: 'inline-block',
+  input: 'inline-block',
+  label: 'inline',
+  legend: 'block',
   li: 'list-item',
+  link: 'none',
+  main: 'block',
+  map: 'inline',
+  marquee: 'inline-block',
+  menu: 'block',
+  meta: 'none',
+  nav: 'block',
+  noembed: 'none',
+  noframes: 'none',
+  object: 'inline',
+  ol: 'block',
+  p: 'block',
+  param: 'none',
+  q: 'inline',
+  rp: 'none',
+  script: 'none',
+  search: 'block',
+  section: 'block',
+  select: 'inline-block',
+  span: 'inline',
+  strong: 'inline',
+  style: 'none',
   table: 'table',
+  tbody: 'table-row-group',
+  td: 'table-cell',
+  template: 'none',
+  textarea: 'inline-block',
+  tfoot: 'table-footer-group',
+  th: 'table-cell',
+  thead: 'table-header-group',
+  title: 'none',
+  tr: 'table-row',
+  ul: 'block',
+  video: 'inline',
 }
 
 export function getDefaultDisplayForTag(tag: string): string {
@@ -238,27 +284,44 @@ export function getDefaultDisplayForTag(tag: string): string {
 }
 
 /**
- * Resolves the current `display` value from matched CSS data, handling both
- * literal values and CSS variable references.
- * Returns the resolved value, or `undefined` if `display` is not declared
- * or uses a variable that cannot be resolved.
+ * Resolves the current `display` value from matched CSS data using the
+ * CSS-layer value resolver, including var() fallback handling.
  */
-export function resolveDisplayValue(matcherData: MatchedCssData): string | undefined {
+function getDisplayPropertyMatch(matcherData: MatchedCssData) {
+  let matchedDisplayProperty: (typeof matcherData.matches)[number]['properties'][number] | undefined
+  let matchedDisplaySpecificity: [number, number, number] | undefined
+
   for (const match of matcherData.matches) {
     for (const property of match.properties) {
-      if (property.name !== 'display') continue
-
-      if (!property.varRefs || property.varRefs.length === 0) {
-        return property.value
+      if (property.name === 'display') {
+        if (!matchedDisplaySpecificity || compareSpecificity(match.specificity, matchedDisplaySpecificity) >= 0) {
+          matchedDisplayProperty = property
+          matchedDisplaySpecificity = match.specificity
+        }
       }
+    }
+  }
+  return matchedDisplayProperty
+}
 
-      for (const varName of property.varRefs) {
-        const resolvedValue = matcherData.customProperties[varName]
-        if (resolvedValue !== undefined) return resolvedValue
-      }
+function compareSpecificity(
+  leftSpecificity: [number, number, number],
+  rightSpecificity: [number, number, number],
+): number {
+  for (let specificityIndex = 0; specificityIndex < leftSpecificity.length; specificityIndex += 1) {
+    const difference = leftSpecificity[specificityIndex] - rightSpecificity[specificityIndex]
+    if (difference !== 0) {
+      return difference
     }
   }
-  return undefined
+
+  return 0
+}
+
+export function resolveDisplayValue(matcherData: MatchedCssData): string | undefined {
+  const displayProperty = getDisplayPropertyMatch(matcherData)
+  if (!displayProperty) return undefined
+  return resolveCssPropertyValue(displayProperty, matcherData.customProperties)
 }
 
 // ─────────────────────────────────────────────────────────────────────────────
@@ -266,20 +329,62 @@ export function resolveDisplayValue(matcherData: MatchedCssData): string | undef
 // ─────────────────────────────────────────────────────────────────────────────
 
 const FLEX_GRID_DISPLAY_VALUES = new Set(['flex', 'grid', 'inline-flex', 'inline-grid'])
+const NON_CONTAINER_DISPLAY_VALUES = new Set(['inline', 'contents', 'none'])
+const BOX_GENERATING_DISPLAY_VALUES = new Set([
+  'block',
+  'flex',
+  'grid',
+  'flow-root',
+  'inline-block',
+  'inline-flex',
+  'inline-grid',
+  'inline-table',
+  'table',
+  'list-item',
+  'table-caption',
+  'table-cell',
+  'table-column',
+  'table-column-group',
+  'table-footer-group',
+  'table-header-group',
+  'table-row',
+  'table-row-group',
+])
+
+function normalizeDisplayValue(displayValue: string): string {
+  return displayValue.trim().toLowerCase().replace(/\s+/g, ' ')
+}
+
+function displayCreatesContainerBox(displayValue: string): boolean {
+  const normalizedDisplayValue = normalizeDisplayValue(displayValue)
+  if (NON_CONTAINER_DISPLAY_VALUES.has(normalizedDisplayValue)) return false
+
+  const displayTokens = normalizedDisplayValue.split(' ')
+
+  return displayTokens.some((displayToken) => BOX_GENERATING_DISPLAY_VALUES.has(displayToken))
+}
+
+function displayUsesFlexOrGridLayout(displayValue: string): boolean {
+  const normalizedDisplayValue = normalizeDisplayValue(displayValue)
+  const displayTokens = normalizedDisplayValue.split(' ')
+
+  return displayTokens.some((displayToken) => FLEX_GRID_DISPLAY_VALUES.has(displayToken))
+}
 
 /**
  * Returns true if display uses a CSS variable that cannot be resolved --
  * we optimistically assume it could be flex/grid.
  */
 function hasUnresolvableDisplayVar(matcherData: MatchedCssData): boolean {
+  const displayProperty = getDisplayPropertyMatch(matcherData)
+  if (!displayProperty?.varRefs || displayProperty.varRefs.length === 0) return false
+  return resolveCssPropertyValue(displayProperty, matcherData.customProperties) === undefined
+}
+
+function hasDisplayDeclaration(matcherData: MatchedCssData): boolean {
   for (const match of matcherData.matches) {
     for (const property of match.properties) {
-      if (property.name !== 'display') continue
-      if (property.varRefs && property.varRefs.length > 0) {
-        for (const varName of property.varRefs) {
-          if (matcherData.customProperties[varName] === undefined) return true
-        }
-      }
+      if (property.name === 'display') return true
     }
   }
   return false
@@ -287,10 +392,28 @@ function hasUnresolvableDisplayVar(matcherData: MatchedCssData): boolean {
 
 export function hasFlexOrGridDisplay(matcherData: MatchedCssData): boolean {
   const displayValue = resolveDisplayValue(matcherData)
-  if (displayValue !== undefined) return FLEX_GRID_DISPLAY_VALUES.has(displayValue)
+  if (displayValue !== undefined) return displayUsesFlexOrGridLayout(displayValue)
   return hasUnresolvableDisplayVar(matcherData)
 }
 
+export function hasContainerLikeDisplay(matcherData: MatchedCssData): boolean {
+  const displayValue = resolveDisplayValue(matcherData)
+  if (displayValue !== undefined) return displayCreatesContainerBox(displayValue)
+  return hasUnresolvableDisplayVar(matcherData)
+}
+
+function hasContainerLikeDefaultDisplay(tag: string): boolean {
+  return displayCreatesContainerBox(getDefaultDisplayForTag(tag))
+}
+
+function hasEffectiveContainerDisplay(tag: string, matcherData?: MatchedCssData): boolean {
+  if (matcherData && hasDisplayDeclaration(matcherData)) {
+    return hasContainerLikeDisplay(matcherData)
+  }
+
+  return hasContainerLikeDefaultDisplay(tag)
+}
+
 /**
  * Walks the element tree and adds `gap` to relevant CSS properties
  * for elements that have display: flex|grid and more than 1 child.
@@ -316,6 +439,31 @@ export function enrichGapProperties(elements: ExtractedElement[]): ExtractedElem
   })
 }
 
+/**
+ * Walks the element tree and adds box properties to selected text tags
+ * when CSS overrides `display` or default UA display creates a box.
+ */
+export function enrichContainerProperties(elements: ExtractedElement[]): ExtractedElement[] {
+  return elements.map((element) => {
+    const role = element.attributes.role
+    if (hasTextSemantics(element.tag, role)) {
+      const matcherData = element.extractorData.get('css-matcher') as MatchedCssData | undefined
+      const cssData = element.extractorData.get('css-properties') as CssPropertiesData | undefined
+
+      if (cssData && hasEffectiveContainerDisplay(element.tag, matcherData)) {
+        element.extractorData.set('css-properties', {
+          relevant: addBoxProperties(cssData.relevant),
+        })
+      }
+    }
+
+    return {
+      ...element,
+      children: enrichContainerProperties(element.children),
+    }
+  })
+}
+
 // ─────────────────────────────────────────────────────────────────────────────
 // Factory
 // ─────────────────────────────────────────────────────────────────────────────

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

@@ -27,6 +27,7 @@ export type { PropTrackerData, PropTrackerExtractorState } from './prop-tracker'
 export {
   createCssPropertiesExtractor,
   enrichGapProperties,
+  enrichContainerProperties,
   resolveDisplayValue,
   getDefaultDisplayForTag,
 } from './css-properties'

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

@@ -17,6 +17,7 @@ export {
   createPropTrackerExtractor,
   createCssPropertiesExtractor,
   enrichGapProperties,
+  enrichContainerProperties,
   resolveDisplayValue,
   getDefaultDisplayForTag,
   inferSupportedNativeStates,

package/src/manifest-pipeline.ts

@@ -9,6 +9,7 @@ import {
   type RunExtractorsOptions,
   createCssPropertiesExtractor,
   createPropTrackerExtractor,
+  enrichContainerProperties,
   enrichGapProperties,
   runExtractors,
 } from './information-extractors/react'
@@ -163,7 +164,8 @@ export function processComponent(
   if (html && extractedElements.length > 0 && css.length > 0) {
     try {
       const matchResult = matchCssSelectors(html, extractedElements, css)
-      const gapEnrichedElements = enrichGapProperties(matchResult.elements)
+      const containerEnrichedElements = enrichContainerProperties(matchResult.elements)
+      const gapEnrichedElements = enrichGapProperties(containerEnrichedElements)
       enhancedInfo = {
         ...enhancedInfo,
         elements: convertElements(gapEnrichedElements),