@wix/zero-config-implementation 1.100.0 → 1.101.0

package/package.json

@@ -4,7 +4,7 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "version": "1.100.0",
+  "version": "1.101.0",
   "description": "Core library for extracting component manifests from JS and CSS files",
   "type": "module",
   "main": "dist/index.js",
@@ -106,5 +106,5 @@
       ]
     }
   },
-  "falconPackageHash": "80ef17ffc1549b6c4d3f51396955cb0517fe8eceb7b20eed65fc7e7d"
+  "falconPackageHash": "7aa5841bf5ff6a0fa0800fc3d71a267d6e96dbe084125f5fd56fc333"
 }

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

@@ -725,6 +725,65 @@ describe('toEditorReactComponent — @property design tokens', () => {
     expect(editorElement?.cssProperties?.['sdf-safelight-color']).toBeUndefined()
     expect(editorElement?.cssProperties?.['--sdf-safelight-color']).toBeUndefined()
   })
+
+  it('places a declared custom property on its declaring element even when its only tracked usage was pruned from the tree', () => {
+    const buttonElement: ExtractedElement = {
+      traceId: 'trace-button',
+      name: 'button',
+      tag: 'button',
+      attributes: { class: 'play-button' },
+      extractorData: new Map<string, unknown>([
+        ['css-matcher', { matches: [], customProperties: { '--icon-color': 'red' } } as MatchedCssData],
+      ]),
+      children: [],
+    }
+    const rootElement: ExtractedElement = {
+      traceId: 'trace-root',
+      name: 'root',
+      tag: 'div',
+      attributes: {},
+      extractorData: new Map<string, unknown>(),
+      children: [buttonElement],
+    }
+    const component: ComponentInfoWithCss = {
+      componentName: 'IconButton',
+      props: {},
+      elements: [rootElement],
+      propUsages: new Map(),
+      css: [],
+      // The icon that actually consumes --icon-color has no semantic class, so it was
+      // already filtered out of `elements` upstream — its trace id survives only here.
+      varUsedByTraceId: new Map([['--icon-color', new Set(['trace-pruned-icon'])]]),
+    }
+
+    const editorElement = toEditorReactComponent(component).editorElement
+
+    expect(editorElement?.elements?.button?.inlineElement?.cssCustomProperties?.['icon-color']).toEqual({
+      displayName: 'Icon Color',
+      defaultValue: 'red',
+      cssPropertyType: 'color',
+    })
+    expect(editorElement?.cssCustomProperties?.['icon-color']).toBeUndefined()
+  })
+
+  it('falls back to the component root when a variable has no surviving declaration and only orphaned usage', () => {
+    const component: ComponentInfoWithCss = {
+      ...createComponentWithCss(`
+        @property --gap { syntax: "<length>"; inherits: true; initial-value: 4px; }
+      `),
+      // No element declares --gap locally; its only recorded usage is a trace id that
+      // never made it into `elements` (simulating a pruned consumer).
+      varUsedByTraceId: new Map([['--gap', new Set(['trace-orphan'])]]),
+    }
+
+    const customProps = toEditorReactComponent(component).editorElement?.cssCustomProperties
+
+    expect(customProps?.gap).toEqual({
+      displayName: 'Gap',
+      defaultValue: '4px',
+      cssPropertyType: 'length',
+    })
+  })
 })
 
 describe('toEditorReactComponent — ActiveItemIndex display groups', () => {

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

@@ -248,7 +248,7 @@ function buildElements(
         ...(data && Object.keys(data).length > 0 && { data }),
         // CSS properties from heuristic + matched CSS files
         ...(Object.keys(cssProps).length > 0 && { cssProperties: cssProps }),
-        // CSS custom properties placed on the Nearest Common Ancestor of all elements that use each variable
+        // CSS custom properties for this element
         ...(Object.keys(cssCustomProps).length > 0 && { cssCustomProperties: cssCustomProps }),
         ...(states && { states }),
         // Recursively build nested elements
@@ -277,8 +277,9 @@ function buildElements(
 
 /**
  * Pre-computes a map of traceId → custom property items to assign to each element.
- * Each custom property is placed on the nearest common ancestor (Nearest Common Ancestor) of all elements
- * that use it via var(). Falls back to the element that defines it if unused.
+ * A variable is placed on the element that declares it; if none survived pruning, it
+ * falls back to the nearest common ancestor of its usages, or the root for a registered
+ * but undeclared @property.
  */
 function buildNearestCommonAncestorCustomProps(
   component: ComponentInfoWithCss,
@@ -318,16 +319,25 @@ function buildNearestCommonAncestorCustomProps(
     // component doesn't need an element-level `--x: ...` declaration.
     const defaultValue = allCustomPropertyValues.get(varName) ?? registration?.defaultValue
 
-    const usedByTraceIds = component.varUsedByTraceId.get(varName) ?? new Set<string>()
+    // Declaration wins over usage; multiple declaring elements resolve to their NCA.
+    const definingTraceIds = findDefiningElements(component.elements, varName)
 
     let nearestCommonAncestorTraceId: string | undefined
-    if (usedByTraceIds.size > 0) {
-      nearestCommonAncestorTraceId = findNearestCommonAncestor(usedByTraceIds, parentMap)
+    if (definingTraceIds.size > 0) {
+      nearestCommonAncestorTraceId = findNearestCommonAncestor(definingTraceIds, parentMap)
     } else {
-      // Fallback: the element whose CSS selector defines the variable; failing that, a
-      // registered @property with no var() usage anchors on the component root.
+      // No surviving declaration — fall back to usage NCA, restricted to trace IDs still in the tree.
+      const usedByTraceIds = component.varUsedByTraceId.get(varName) ?? new Set<string>()
+      const survivingUsedByTraceIds = new Set(
+        [...usedByTraceIds].filter((traceId) => traceId === rootTraceId || parentMap.has(traceId)),
+      )
+
       nearestCommonAncestorTraceId =
-        findDefiningElement(component.elements, varName) ?? (registration ? rootTraceId : undefined)
+        survivingUsedByTraceIds.size > 0
+          ? findNearestCommonAncestor(survivingUsedByTraceIds, parentMap)
+          : registration
+            ? rootTraceId
+            : undefined
     }
 
     if (!nearestCommonAncestorTraceId) continue
@@ -506,17 +516,16 @@ function findNearestCommonAncestor(traceIds: Set<string>, parentMap: Map<string,
 }
 
 /**
- * Finds the traceId of the first element in the tree whose matched CSS rules
- * define the given custom property (fallback when var() usage is not tracked).
+ * Finds every surviving element whose matched CSS declares the given custom property.
  */
-function findDefiningElement(elements: ExtractedElement[], varName: string): string | undefined {
+function findDefiningElements(elements: ExtractedElement[], varName: string): Set<string> {
+  const definingTraceIds = new Set<string>()
   for (const element of elements) {
     const matcherData = element.extractorData.get('css-matcher') as MatchedCssData | undefined
-    if (matcherData?.customProperties[varName] !== undefined) return element.traceId
-    const childResult = findDefiningElement(element.children, varName)
-    if (childResult !== undefined) return childResult
+    if (matcherData?.customProperties[varName] !== undefined) definingTraceIds.add(element.traceId)
+    for (const traceId of findDefiningElements(element.children, varName)) definingTraceIds.add(traceId)
   }
-  return undefined
+  return definingTraceIds
 }
 
 // ─────────────────────────────────────────────────────────────────────────────