@wix/zero-config-implementation 1.45.0 → 1.47.0

package/package.json

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

package/src/converters/to-editor-component.ts

@@ -2,11 +2,12 @@ import type {
   CssCustomPropertyItem,
   CssPropertyItem,
   DataItem,
+  Display,
   EditorElement,
   EditorReactComponent,
   ElementItem,
 } from '@wix/react-component-schema'
-import { ELEMENTS } from '@wix/react-component-schema'
+import { CSS_PROPERTIES, ELEMENTS } from '@wix/react-component-schema'
 import type { ComponentInfoWithCss } from '../index'
 import type { MatchedCssData } from '../information-extractors/css/types'
 import type {
@@ -16,6 +17,7 @@ import type {
   ExtractedElement,
   TrackingStores,
 } from '../information-extractors/react'
+import { getDefaultDisplayForTag, resolveDisplayValue } from '../information-extractors/react'
 import { findPreferredSemanticClass } from '../utils/css-class'
 import { buildDataItem } from './data-item-builder'
 import { formatDisplayName } from './utils'
@@ -102,6 +104,7 @@ function buildElements(
       inlineElement: {
         selector: buildSelector(element),
         displayName: formatDisplayName(element.name),
+        behaviors: { removable: true, selectable: false },
         // Add data from inner element props if available
         ...(data && Object.keys(data).length > 0 && { data }),
         // CSS properties from heuristic + matched CSS files
@@ -308,10 +311,24 @@ function getMatchedPropertyValues(element: ExtractedElement): Map<string, string
   return values
 }
 
+const CSS_DISPLAY_TO_ENUM: Record<string, string> = {
+  'inline-block': 'inlineBlock',
+  'inline-flex': 'inlineFlex',
+  'inline-grid': 'inlineGrid',
+  'inline-table': 'inlineTable',
+  'list-item': 'listItem',
+  'flow-root': 'flowRoot',
+}
+
+function toDisplayEnumValue(cssValue: string): NonNullable<Display['displayValues']>[number] {
+  return (CSS_DISPLAY_TO_ENUM[cssValue] ?? cssValue) as NonNullable<Display['displayValues']>[number]
+}
+
+const { CSS_PROPERTY_TYPE, DISPLAY_VALUE } = CSS_PROPERTIES
+
 function buildCssProperties(element: ExtractedElement | undefined): Record<string, CssPropertyItem> {
   const result: Record<string, CssPropertyItem> = {}
 
-  // Get the CSS properties decided by the heuristic
   const cssData = element?.extractorData.get('css-properties') as CssPropertiesData | undefined
   const decidedProperties = cssData?.relevant
   if (!decidedProperties || decidedProperties.length === 0) {
@@ -319,12 +336,28 @@ function buildCssProperties(element: ExtractedElement | undefined): Record<strin
   }
   const cssPropertyValues = element ? getMatchedPropertyValues(element) : new Map<string, string>()
   for (const propName of decidedProperties) {
+    if (propName === CSS_PROPERTY_TYPE.display && element) {
+      result[propName] = buildDisplayProperty(element)
+      continue
+    }
     const defaultValue = cssPropertyValues.get(propName)
     result[propName] = {
-      // Only include defaultValue if found in CSS files
       ...(defaultValue !== undefined && { defaultValue }),
     }
   }
 
   return result
 }
+
+function buildDisplayProperty(element: ExtractedElement): CssPropertyItem {
+  const matcherData = element.extractorData.get('css-matcher') as MatchedCssData | undefined
+  const resolvedFromCss = matcherData ? resolveDisplayValue(matcherData) : undefined
+  const currentValue = resolvedFromCss ?? getDefaultDisplayForTag(element.tag)
+  const currentEnumValue = toDisplayEnumValue(currentValue)
+
+  return {
+    display: {
+      displayValues: [DISPLAY_VALUE.none, currentEnumValue],
+    },
+  }
+}

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

@@ -0,0 +1,44 @@
+import { describe, expect, it } from 'vitest'
+import { parseCss } from '../../css/parse'
+import type { MatchedCssData } from '../../css/types'
+import { hasFlexOrGridDisplay } from './css-properties'
+
+function matcherDataFromCss(declarations: string): MatchedCssData {
+  const properties = parseCss(`.test { ${declarations} }`).getPropertiesForSelector('.test')
+  const customProperties: Record<string, string> = {}
+  for (const property of properties) {
+    if (property.name.startsWith('--')) {
+      customProperties[property.name] = property.value
+    }
+  }
+  return {
+    matches: [{ selector: '.test', properties: properties.filter((property) => !property.name.startsWith('--')) }],
+    customProperties,
+  }
+}
+
+describe('hasFlexOrGridDisplay', () => {
+  it('returns true for display: flex', () => {
+    expect(hasFlexOrGridDisplay(matcherDataFromCss('display: flex'))).toBe(true)
+  })
+
+  it('returns false for display: block', () => {
+    expect(hasFlexOrGridDisplay(matcherDataFromCss('display: block'))).toBe(false)
+  })
+
+  it('returns false when no properties', () => {
+    expect(hasFlexOrGridDisplay(matcherDataFromCss(''))).toBe(false)
+  })
+
+  it('returns false when var resolves to a non-flex/grid value', () => {
+    expect(hasFlexOrGridDisplay(matcherDataFromCss('display: var(--d); --d: block'))).toBe(false)
+  })
+
+  it('returns true when var resolves to grid', () => {
+    expect(hasFlexOrGridDisplay(matcherDataFromCss('display: var(--d); --d: grid'))).toBe(true)
+  })
+
+  it('returns true when var cannot be resolved', () => {
+    expect(hasFlexOrGridDisplay(matcherDataFromCss('display: var(--d)'))).toBe(true)
+  })
+})

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

@@ -6,7 +6,7 @@
  */
 
 import { CSS_PROPERTIES } from '@wix/react-component-schema'
-import type { CssSelectorMatch, MatchedCssData } from '../../css/types'
+import type { MatchedCssData } from '../../css/types'
 import type { ExtractedElement } from './core/tree-builder'
 import type { CreateElementEvent, ReactExtractor } from './core/types'
 
@@ -186,6 +186,7 @@ export function getCssPropertiesForTag(tag: string, role?: string): string[] {
       break
   }
 
+  properties.push(CSS_PROPERTY_TYPE.display)
   return properties
 }
 
@@ -211,23 +212,85 @@ export function addGapProperty(existing: string[]): string[] {
   return [...existing, CSS_PROPERTY_TYPE.gap]
 }
 
+// ─────────────────────────────────────────────────────────────────────────────
+// Display Value Resolution
+// ─────────────────────────────────────────────────────────────────────────────
+
+const TAG_DEFAULT_DISPLAY: Record<string, string> = {
+  span: 'inline',
+  a: 'inline',
+  strong: 'inline',
+  em: 'inline',
+  b: 'inline',
+  i: 'inline',
+  label: 'inline',
+  img: 'inline',
+  input: 'inline',
+  select: 'inline',
+  textarea: 'inline',
+  button: 'inline-block',
+  li: 'list-item',
+  table: 'table',
+}
+
+export function getDefaultDisplayForTag(tag: string): string {
+  return TAG_DEFAULT_DISPLAY[tag.toLowerCase()] ?? 'block'
+}
+
+/**
+ * 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.
+ */
+export function resolveDisplayValue(matcherData: MatchedCssData): string | 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
+      }
+
+      for (const varName of property.varRefs) {
+        const resolvedValue = matcherData.customProperties[varName]
+        if (resolvedValue !== undefined) return resolvedValue
+      }
+    }
+  }
+  return undefined
+}
+
 // ─────────────────────────────────────────────────────────────────────────────
 // 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) {
+/**
+ * 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 {
+  for (const match of matcherData.matches) {
     for (const property of match.properties) {
-      if (property.name === 'display' && FLEX_GRID_DISPLAY_VALUES.has(property.value)) {
-        return true
+      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
+        }
       }
     }
   }
   return false
 }
 
+export function hasFlexOrGridDisplay(matcherData: MatchedCssData): boolean {
+  const displayValue = resolveDisplayValue(matcherData)
+  if (displayValue !== undefined) return FLEX_GRID_DISPLAY_VALUES.has(displayValue)
+  return hasUnresolvableDisplayVar(matcherData)
+}
+
 /**
  * Walks the element tree and adds `gap` to relevant CSS properties
  * for elements that have display: flex|grid and more than 1 child.
@@ -237,7 +300,7 @@ export function enrichGapProperties(elements: ExtractedElement[]): ExtractedElem
   return elements.map((element) => {
     if (element.children.length > 1) {
       const matcherData = element.extractorData.get('css-matcher') as MatchedCssData | undefined
-      if (matcherData && hasFlexOrGridDisplay(matcherData.matches)) {
+      if (matcherData && hasFlexOrGridDisplay(matcherData)) {
         const cssData = element.extractorData.get('css-properties') as CssPropertiesData | undefined
         if (cssData) {
           element.extractorData.set('css-properties', {

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

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

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

@@ -17,6 +17,8 @@ export {
   createPropTrackerExtractor,
   createCssPropertiesExtractor,
   enrichGapProperties,
+  resolveDisplayValue,
+  getDefaultDisplayForTag,
 } from './extractors'
 
 export type {