@wix/zero-config-implementation 1.97.0 → 1.98.0

package/dist/index.js

@@ -20772,7 +20772,7 @@ function KQ(t, e) {
       t.innerElementProps,
       t.propUsages
     ),
-    cssProperties: iD(r),
+    cssProperties: iD(r, !0),
     cssCustomProperties: i,
     ...u && { states: u },
     ...l && { displayGroups: l },
@@ -20828,7 +20828,7 @@ function eD(t, e, r, n, i, s, a) {
       };
       continue;
     }
-    const h = XA(u), m = l && s ? Z3(l.props, s) : void 0, g = iD(u), p = e.get(u.traceId) ?? {}, A = Q3(
+    const h = XA(u), m = l && s ? Z3(l.props, s) : void 0, g = iD(u, !1), p = e.get(u.traceId) ?? {}, A = Q3(
       h ? J3(u, h, r.focus) : void 0,
       j3({ element: u, propTriggers: [], classTriggers: r.custom })
     );
@@ -20998,22 +20998,22 @@ const { CSS_PROPERTY_TYPE: tX, DISPLAY_VALUE: Un } = $n, rX = {
 function nX(t) {
   return rX[t] ?? t;
 }
-function iD(t) {
-  const e = {}, n = t?.extractorData.get("css-properties")?.relevant;
-  if (!n || n.length === 0)
-    return e;
-  const i = t ? eX(t) : /* @__PURE__ */ new Map();
-  for (const s of n) {
-    if (s === tX.display && t) {
-      e[s] = iX(t);
+function iD(t, e) {
+  const r = {}, i = t?.extractorData.get("css-properties")?.relevant;
+  if (!i || i.length === 0)
+    return r;
+  const s = t ? eX(t) : /* @__PURE__ */ new Map();
+  for (const a of i) {
+    if (a === tX.display && t) {
+      e || (r[a] = iX(t));
       continue;
     }
-    const a = TQ(s, i), o = a !== void 0 ? a7(a) : void 0;
-    e[s] = {
-      ...o !== void 0 && { defaultValue: o }
+    const o = TQ(a, s), u = o !== void 0 ? a7(o) : void 0;
+    r[a] = {
+      ...u !== void 0 && { defaultValue: u }
     };
   }
-  return e;
+  return r;
 }
 function iX(t) {
   const e = t.extractorData.get("css-matcher"), r = e ? qA(e) : void 0;

package/package.json

@@ -4,7 +4,7 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "version": "1.97.0",
+  "version": "1.98.0",
   "description": "Core library for extracting component manifests from JS and CSS files",
   "type": "module",
   "main": "dist/index.js",
@@ -106,5 +106,5 @@
       ]
     }
   },
-  "falconPackageHash": "0b3ebaeffed6f192d5ccd84f8598e0e524b0edb36eb3ca0961bab4c7"
+  "falconPackageHash": "741408430f509ba8b4ac3b6f2ff22c4fae1bf06d9f8b98e2a9e8e079"
 }

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

@@ -43,11 +43,22 @@ function createElementWithDisplayMatcher(tag: string, matcherData: MatchedCssDat
   }
 }
 
-function createComponent(rootElement: ExtractedElement): ComponentInfoWithCss {
+function createComponent(rootElement: ExtractedElement, renderDisplayElementAsChild = false): ComponentInfoWithCss {
+  const componentRoot = renderDisplayElementAsChild
+    ? {
+        traceId: 'trace-container',
+        name: 'container',
+        tag: 'div',
+        attributes: {},
+        extractorData: new Map<string, unknown>(),
+        children: [{ ...rootElement, traceId: 'trace-display', name: 'display' }],
+      }
+    : rootElement
+
   return {
     componentName: 'DisplayComponent',
     props: {},
-    elements: [rootElement],
+    elements: [componentRoot],
     propUsages: new Map(),
     css: [],
     varUsedByTraceId: new Map(),
@@ -71,6 +82,10 @@ function createComponentWithA11yUsages(propPaths: string[]): ComponentInfoWithCs
   }
 }
 
+function getDisplayProperty(result: ReturnType<typeof toEditorReactComponent>) {
+  return result.editorElement?.elements?.display?.inlineElement?.cssProperties?.display
+}
+
 describe('toEditorReactComponent accessibility conversion', () => {
   it('omits the a11y item when the component reads only component-owned fields', () => {
     const component = createComponentWithA11yUsages(['props.a11y.role', 'props.a11y.tabIndex'])
@@ -115,6 +130,14 @@ function createSemanticElement({
 }
 
 describe('toEditorReactComponent display conversion', () => {
+  it('omits display from the root editor element', () => {
+    const rootElement = createElementWithDisplayMatcher('div', matcherDataFromCss('display: flex'))
+
+    const result = toEditorReactComponent(createComponent(rootElement))
+
+    expect(result.editorElement?.cssProperties?.display).toBeUndefined()
+  })
+
   it('resolves local display fallback chains before emitting the manifest display value', () => {
     const rootElement = createElementWithDisplayMatcher(
       'span',
@@ -123,10 +146,10 @@ describe('toEditorReactComponent display conversion', () => {
       ),
     )
 
-    const result = toEditorReactComponent(createComponent(rootElement))
+    const result = toEditorReactComponent(createComponent(rootElement, true))
     expect(result.editorElement).toBeDefined()
 
-    expect(result.editorElement?.cssProperties?.display).toEqual({
+    expect(getDisplayProperty(result)).toEqual({
       display: {
         displayValues: [CSS_PROPERTIES.DISPLAY_VALUE.none, 'inlineFlex'],
       },
@@ -136,10 +159,10 @@ describe('toEditorReactComponent display conversion', () => {
   it('keeps using the tag default when no display declaration exists', () => {
     const rootElement = createElementWithDisplayMatcher('span', matcherDataFromCss(''))
 
-    const result = toEditorReactComponent(createComponent(rootElement))
+    const result = toEditorReactComponent(createComponent(rootElement, true))
     expect(result.editorElement).toBeDefined()
 
-    expect(result.editorElement?.cssProperties?.display).toEqual({
+    expect(getDisplayProperty(result)).toEqual({
       display: {
         displayValues: [CSS_PROPERTIES.DISPLAY_VALUE.none, 'inline'],
       },
@@ -166,9 +189,9 @@ describe('toEditorReactComponent display conversion', () => {
     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))
+      const result = toEditorReactComponent(createComponent(rootElement, true))
 
-      expect(result.editorElement?.cssProperties?.display).toEqual({
+      expect(getDisplayProperty(result)).toEqual({
         display: {
           displayValues: [CSS_PROPERTIES.DISPLAY_VALUE.none, expectedEnumValue],
         },
@@ -177,14 +200,14 @@ describe('toEditorReactComponent display conversion', () => {
 
     it('treats an explicit `display: table-cell` declaration the same as the tag default', () => {
       const fromTag = toEditorReactComponent(
-        createComponent(createElementWithDisplayMatcher('td', matcherDataFromCss(''))),
+        createComponent(createElementWithDisplayMatcher('td', matcherDataFromCss('')), true),
       )
       const fromCss = toEditorReactComponent(
-        createComponent(createElementWithDisplayMatcher('div', matcherDataFromCss('display: table-cell'))),
+        createComponent(createElementWithDisplayMatcher('div', matcherDataFromCss('display: table-cell')), true),
       )
 
-      expect(fromCss.editorElement?.cssProperties?.display).toEqual(fromTag.editorElement?.cssProperties?.display)
-      expect(fromCss.editorElement?.cssProperties?.display).toEqual({
+      expect(getDisplayProperty(fromCss)).toEqual(getDisplayProperty(fromTag))
+      expect(getDisplayProperty(fromCss)).toEqual({
         display: {
           displayValues: [CSS_PROPERTIES.DISPLAY_VALUE.none, CSS_PROPERTIES.DISPLAY_VALUE.tableCell],
         },
@@ -194,9 +217,9 @@ describe('toEditorReactComponent display conversion', () => {
     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))
+      const result = toEditorReactComponent(createComponent(rootElement, true))
 
-      expect(result.editorElement?.cssProperties?.display).toEqual({
+      expect(getDisplayProperty(result)).toEqual({
         display: {
           displayValues: [CSS_PROPERTIES.DISPLAY_VALUE.none, CSS_PROPERTIES.DISPLAY_VALUE.inlineBlock],
         },
@@ -208,8 +231,8 @@ describe('toEditorReactComponent display conversion', () => {
 
       for (const [tag] of tagDefaults) {
         const rootElement = createElementWithDisplayMatcher(tag, matcherDataFromCss(''))
-        const result = toEditorReactComponent(createComponent(rootElement))
-        const emittedValues = result.editorElement?.cssProperties?.display?.display?.displayValues ?? []
+        const result = toEditorReactComponent(createComponent(rootElement, true))
+        const emittedValues = getDisplayProperty(result)?.display?.displayValues ?? []
 
         expect(emittedValues.filter((displayValue) => !allowedValues.has(displayValue))).toEqual([])
       }
@@ -234,9 +257,9 @@ describe('toEditorReactComponent display conversion', () => {
             'div',
             matcherDataFromCss(`display: ${toCssSpelling(enumValue)}`),
           )
-          const result = toEditorReactComponent(createComponent(rootElement))
+          const result = toEditorReactComponent(createComponent(rootElement, true))
 
-          return result.editorElement?.cssProperties?.display?.display?.displayValues?.[1] !== enumValue
+          return getDisplayProperty(result)?.display?.displayValues?.[1] !== enumValue
         })
 
       expect(unreachable).toEqual([])

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

@@ -127,7 +127,7 @@ function buildEditorElement(
       component.innerElementProps,
       component.propUsages,
     ),
-    cssProperties: buildCssProperties(rootElement),
+    cssProperties: buildCssProperties(rootElement, true),
     cssCustomProperties: rootCustomProps,
     ...(rootStates && { states: rootStates }),
     ...(displayGroups && { displayGroups }),
@@ -224,7 +224,7 @@ function buildElements(
     const semanticClass = getSemanticBlockName(element)
 
     const data = innerEntry && propUsages ? buildData(innerEntry.props, propUsages) : undefined
-    const cssProps = buildCssProperties(element)
+    const cssProps = buildCssProperties(element, false)
     const cssCustomProps = nearestCommonAncestorCustomProps.get(element.traceId) ?? {}
 
     // Inner-element custom states come from custom-class triggers only; prop
@@ -563,7 +563,10 @@ function toDisplayEnumValue(cssValue: string): DisplayEnumValue {
   return (CSS_DISPLAY_TO_ENUM[cssValue] ?? cssValue) as DisplayEnumValue
 }
 
-function buildCssProperties(element: ExtractedElement | undefined): Record<string, CssPropertyItem> {
+function buildCssProperties(
+  element: ExtractedElement | undefined,
+  isRootElement: boolean,
+): Record<string, CssPropertyItem> {
   const result: Record<string, CssPropertyItem> = {}
 
   const cssData = element?.extractorData.get('css-properties') as CssPropertiesData | undefined
@@ -574,7 +577,9 @@ 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)
+      if (!isRootElement) {
+        result[propName] = buildDisplayProperty(element)
+      }
       continue
     }
     const resolvedValue = resolveLonghand(propName, cssPropertyValues)