@wix/zero-config-implementation 1.93.0 → 1.95.0

package/package.json

@@ -4,7 +4,7 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "version": "1.93.0",
+  "version": "1.95.0",
   "description": "Core library for extracting component manifests from JS and CSS files",
   "type": "module",
   "main": "dist/index.js",
@@ -39,7 +39,7 @@
     }
   },
   "dependencies": {
-    "@wix/react-component-schema": "1.8.0",
+    "@wix/react-component-schema": "1.9.0",
     "@wix/seo-service": "^1.9.0",
     "@wix/services-manager": "^1.0.7",
     "@wix/services-manager-react": "^1.0.8",
@@ -106,5 +106,5 @@
       ]
     }
   },
-  "falconPackageHash": "d7c036bb07aaafe708985efa56e88c2eefb34077d2d892938112978f"
+  "falconPackageHash": "831bcccde22937359efc18de9a5b8b4e52d3ca3fa6ebdbdd9bcb4a65"
 }

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

@@ -107,6 +107,103 @@ describe('toEditorReactComponent display conversion', () => {
     })
   })
 
+  // CSS display values whose spelling differs from the enum's. Emitting one
+  // unmapped makes DevCenter reject the whole components override, permanently
+  // blocking Checkpoint for the project (ECL-18531).
+  describe('display value enum mapping', () => {
+    const { DISPLAY_VALUE } = CSS_PROPERTIES
+    const tagDefaults: [tag: string, cssDisplay: string, enumValue: string][] = [
+      ['td', 'table-cell', DISPLAY_VALUE.tableCell],
+      ['th', 'table-cell', DISPLAY_VALUE.tableCell],
+      ['tr', 'table-row', DISPLAY_VALUE.tableRow],
+      ['tbody', 'table-row-group', DISPLAY_VALUE.tableRowGroup],
+      ['thead', 'table-header-group', DISPLAY_VALUE.tableHeaderGroup],
+      ['tfoot', 'table-footer-group', DISPLAY_VALUE.tableFooterGroup],
+      ['caption', 'table-caption', DISPLAY_VALUE.tableCaption],
+      ['col', 'table-column', DISPLAY_VALUE.tableColumn],
+      ['colgroup', 'table-column-group', DISPLAY_VALUE.tableColumnGroup],
+    ]
+
+    it.each(tagDefaults)('maps a <%s> tag default (%s) onto its enum name', (tag, _cssDisplay, expectedEnumValue) => {
+      const rootElement = createElementWithDisplayMatcher(tag, matcherDataFromCss(''))
+
+      const result = toEditorReactComponent(createComponent(rootElement))
+
+      expect(result.editorElement?.cssProperties?.display).toEqual({
+        display: {
+          displayValues: [CSS_PROPERTIES.DISPLAY_VALUE.none, expectedEnumValue],
+        },
+      })
+    })
+
+    it('treats an explicit `display: table-cell` declaration the same as the tag default', () => {
+      const fromTag = toEditorReactComponent(
+        createComponent(createElementWithDisplayMatcher('td', matcherDataFromCss(''))),
+      )
+      const fromCss = toEditorReactComponent(
+        createComponent(createElementWithDisplayMatcher('div', matcherDataFromCss('display: table-cell'))),
+      )
+
+      expect(fromCss.editorElement?.cssProperties?.display).toEqual(fromTag.editorElement?.cssProperties?.display)
+      expect(fromCss.editorElement?.cssProperties?.display).toEqual({
+        display: {
+          displayValues: [CSS_PROPERTIES.DISPLAY_VALUE.none, CSS_PROPERTIES.DISPLAY_VALUE.tableCell],
+        },
+      })
+    })
+
+    it('still maps kebab-case values that do have an enum representation', () => {
+      const rootElement = createElementWithDisplayMatcher('div', matcherDataFromCss('display: inline-block'))
+
+      const result = toEditorReactComponent(createComponent(rootElement))
+
+      expect(result.editorElement?.cssProperties?.display).toEqual({
+        display: {
+          displayValues: [CSS_PROPERTIES.DISPLAY_VALUE.none, CSS_PROPERTIES.DISPLAY_VALUE.inlineBlock],
+        },
+      })
+    })
+
+    it('never emits a display value outside the enum for any known tag default', () => {
+      const allowedValues = new Set<string>(Object.values(CSS_PROPERTIES.DISPLAY_VALUE))
+
+      for (const [tag] of tagDefaults) {
+        const rootElement = createElementWithDisplayMatcher(tag, matcherDataFromCss(''))
+        const result = toEditorReactComponent(createComponent(rootElement))
+        const emittedValues = result.editorElement?.cssProperties?.display?.display?.displayValues ?? []
+
+        expect(emittedValues.filter((displayValue) => !allowedValues.has(displayValue))).toEqual([])
+      }
+    })
+
+    /**
+     * Completeness check driven by the enum itself, so a value added in a future
+     * `@wix/component-protocol` bump cannot sit unmapped — which is the gap that
+     * made ECL-18531 possible. Values whose CSS spelling already matches the enum
+     * name need no entry; those that differ must be mapped.
+     *
+     * Skips names containing `_`: `UNKNOWN_DisplayValue` and the deprecated
+     * snake_case aliases, none of which are CSS spellings.
+     */
+    it('reaches every enum value from its CSS spelling', () => {
+      const toCssSpelling = (enumValue: string) => enumValue.replace(/[A-Z]/g, (char) => `-${char.toLowerCase()}`)
+
+      const unreachable = Object.values(CSS_PROPERTIES.DISPLAY_VALUE)
+        .filter((enumValue) => !enumValue.includes('_'))
+        .filter((enumValue) => {
+          const rootElement = createElementWithDisplayMatcher(
+            'div',
+            matcherDataFromCss(`display: ${toCssSpelling(enumValue)}`),
+          )
+          const result = toEditorReactComponent(createComponent(rootElement))
+
+          return result.editorElement?.cssProperties?.display?.display?.displayValues?.[1] !== enumValue
+        })
+
+      expect(unreachable).toEqual([])
+    })
+  })
+
   it('omits the nearest matching ancestor class prefix from inner element display names', () => {
     const rootElement = createSemanticElement({
       traceId: 'trace-root',
@@ -166,6 +263,29 @@ describe('toEditorReactComponent display conversion', () => {
   })
 })
 
+describe('toEditorReactComponent — cssProperties defaultValue', () => {
+  it('ignores the var() fallback when building a regular CSS property defaultValue', () => {
+    const extractorData = new Map<string, unknown>()
+    extractorData.set('css-matcher', matcherDataFromCss('background: var(wst-primary-background-color, tomato);'))
+    extractorData.set('css-properties', { relevant: [CSS_PROPERTIES.CSS_PROPERTY_TYPE.background] })
+
+    const rootElement: ExtractedElement = {
+      traceId: 'trace-root',
+      name: 'root',
+      tag: 'div',
+      attributes: {},
+      extractorData,
+      children: [],
+    }
+
+    const result = toEditorReactComponent(createComponent(rootElement))
+
+    expect(result.editorElement?.cssProperties?.background).toEqual({
+      defaultValue: 'var(--wst-primary-background-color)',
+    })
+  })
+})
+
 describe('toEditorReactComponent selector conversion', () => {
   it.each([
     ['a', 'a___'],

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

@@ -16,6 +16,7 @@ import { IoError } from '../errors'
 import { buildRefElementManifestKey } from '../extensions/ref-elements/path-utils'
 import type { RefElementMatch } from '../extensions/ref-elements/types'
 import type { ComponentInfoWithCss } from '../index'
+import { stripVarFallback } from '../information-extractors/css/parse'
 import type { MatchedCssData, RegisteredCustomProperty } from '../information-extractors/css/types'
 import type {
   CoupledComponentInfo,
@@ -541,20 +542,30 @@ 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',
-}
+const { CSS_PROPERTY_TYPE, DISPLAY_VALUE } = CSS_PROPERTIES
 
-function toDisplayEnumValue(cssValue: string): NonNullable<Display['displayValues']>[number] {
-  return (CSS_DISPLAY_TO_ENUM[cssValue] ?? cssValue) as NonNullable<Display['displayValues']>[number]
+type DisplayEnumValue = NonNullable<Display['displayValues']>[number]
+
+const CSS_DISPLAY_TO_ENUM: Record<string, DisplayEnumValue> = {
+  'inline-block': DISPLAY_VALUE.inlineBlock,
+  'inline-flex': DISPLAY_VALUE.inlineFlex,
+  'inline-grid': DISPLAY_VALUE.inlineGrid,
+  'inline-table': DISPLAY_VALUE.inlineTable,
+  'list-item': DISPLAY_VALUE.listItem,
+  'flow-root': DISPLAY_VALUE.flowRoot,
+  'table-row-group': DISPLAY_VALUE.tableRowGroup,
+  'table-header-group': DISPLAY_VALUE.tableHeaderGroup,
+  'table-footer-group': DISPLAY_VALUE.tableFooterGroup,
+  'table-row': DISPLAY_VALUE.tableRow,
+  'table-cell': DISPLAY_VALUE.tableCell,
+  'table-column-group': DISPLAY_VALUE.tableColumnGroup,
+  'table-column': DISPLAY_VALUE.tableColumn,
+  'table-caption': DISPLAY_VALUE.tableCaption,
 }
 
-const { CSS_PROPERTY_TYPE, DISPLAY_VALUE } = CSS_PROPERTIES
+function toDisplayEnumValue(cssValue: string): DisplayEnumValue {
+  return (CSS_DISPLAY_TO_ENUM[cssValue] ?? cssValue) as DisplayEnumValue
+}
 
 function buildCssProperties(element: ExtractedElement | undefined): Record<string, CssPropertyItem> {
   const result: Record<string, CssPropertyItem> = {}
@@ -570,7 +581,8 @@ function buildCssProperties(element: ExtractedElement | undefined): Record<strin
       result[propName] = buildDisplayProperty(element)
       continue
     }
-    const defaultValue = resolveLonghand(propName, cssPropertyValues)
+    const resolvedValue = resolveLonghand(propName, cssPropertyValues)
+    const defaultValue = resolvedValue !== undefined ? stripVarFallback(resolvedValue) : undefined
     result[propName] = {
       ...(defaultValue !== undefined && { defaultValue }),
     }

package/src/information-extractors/css/parse.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { parseCss, resolveCssPropertyValue } from './parse'
+import { parseCss, resolveCssPropertyValue, stripVarFallback } from './parse'
 
 describe('parseCss — getStateClasses', () => {
   it('extracts a custom-class modifier with no paired pseudo', () => {
@@ -325,3 +325,21 @@ describe('resolveVarIdentifiers — CSS Modules @value compatibility', () => {
     expect(contentProperty.value).toBe('"var(foo)"')
   })
 })
+
+describe('stripVarFallback', () => {
+  it('removes a var() fallback, keeping only the variable reference', () => {
+    expect(stripVarFallback('var(--wst-primary-background-color, tomato)')).toBe('var(--wst-primary-background-color)')
+  })
+
+  it('leaves a var() with no fallback unchanged', () => {
+    expect(stripVarFallback('var(--x)')).toBe('var(--x)')
+  })
+
+  it('strips a fallback embedded within a larger value', () => {
+    expect(stripVarFallback('1px solid var(--border-color, gray)')).toBe('1px solid var(--border-color)')
+  })
+
+  it('leaves a value with no var() unchanged', () => {
+    expect(stripVarFallback('10px')).toBe('10px')
+  })
+})

package/src/information-extractors/css/parse.ts

@@ -373,6 +373,34 @@ function resolveVarIdentifiers(valueNode: CssNode, valueAliases: Map<string, str
   return generate(valueNode)
 }
 
+/**
+ * Removes the fallback argument from every var() call in a CSS value string. A var()
+ * fallback is not a meaningful "default value" for the editor to surface — only the
+ * variable reference itself is — so `var(--x, tomato)` becomes `var(--x)`.
+ */
+export function stripVarFallback(cssValue: string): string {
+  if (!cssValue.includes('var(')) return cssValue
+
+  try {
+    const valueAst = parse(cssValue, { context: 'value' })
+    walk(valueAst, {
+      visit: 'Function',
+      enter(functionNode: FunctionNode) {
+        if (functionNode.name !== 'var') return
+        const functionArguments = [...functionNode.children]
+        const firstCommaIndex = functionArguments.findIndex(
+          (argumentNode) => argumentNode.type === 'Operator' && argumentNode.value === ',',
+        )
+        if (firstCommaIndex === -1) return
+        functionNode.children.fromArray(functionArguments.slice(0, firstCommaIndex))
+      },
+    })
+    return generate(valueAst)
+  } catch {
+    return cssValue
+  }
+}
+
 /**
  * Extracts all CSS custom property names referenced via var() by walking
  * the declaration value AST for Function nodes named "var".