@wix/zero-config-implementation 1.72.0 → 1.73.0

package/dist/{index-CSi4SZpQ.js → index-NbI-_ozJ.js}

@@ -1,4 +1,4 @@
-import { g as x } from "./index-CdHu4-o-.js";
+import { g as x } from "./index-K3lIO4FC.js";
 function h(r, a) {
   for (var i = 0; i < a.length; i++) {
     const o = a[i];

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import { ComponentType } from 'react';
+import { CssNode } from 'css-tree';
 import { default as default_2 } from 'typescript';
 import { EditorReactComponent } from '@wix/react-component-schema';
 import { Program } from 'typescript';
@@ -419,6 +420,11 @@ export declare interface CSSParserAPI {
      * @returns DOM-matchable selector string or null
      */
     getDomSelector: (selector: string) => string | null;
+    /**
+     * Gets the selector specificity tuple as [ids, classes/attrs/pseudo-classes, elements/pseudo-elements].
+     * Returns null when the selector was not parsed.
+     */
+    getSelectorSpecificity: (selector: string) => [number, number, number] | null;
     /**
      * Determines the CSS property type for a custom property based on how it is used.
      * If all usages of varName are within the same CSS property, returns that property name.
@@ -444,6 +450,8 @@ export declare interface CssPropertiesData {
 declare interface CSSProperty {
     name: string;
     value: string;
+    /** Parsed css-tree AST for the property's value. */
+    valueAst?: CssNode;
     /** CSS variable names referenced via var() in this property's value */
     varRefs?: string[];
 }

package/dist/index.js

@@ -1,4 +1,4 @@
-import { B as t, D as e, E as o, I as n, N as c, P as l, R as i, a as p, V as E, b as m, c as x, d as f, e as d, f as u, h as C, i as I, j as k, k as y, l as A, m as D, n as P, o as R, p as h, q as B, r as M, s as T, t as b, w } from "./index-CdHu4-o-.js";
+import { B as t, D as e, E as o, I as n, N as c, P as l, R as i, a as p, V as E, b as m, c as x, d as f, e as d, f as u, h as C, i as I, j as k, k as y, l as A, m as D, n as P, o as R, p as h, q as B, r as M, s as T, t as b, w } from "./index-K3lIO4FC.js";
 import "react";
 export {
   t as BaseError,

package/package.json

@@ -4,7 +4,7 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "version": "1.72.0",
+  "version": "1.73.0",
   "description": "Core library for extracting component manifests from JS and CSS files",
   "type": "module",
   "main": "dist/index.js",
@@ -82,5 +82,5 @@
       ]
     }
   },
-  "falconPackageHash": "2d1621ee1db1cc5a90b528fc0d45129b0534a3ba693b766403f23b2f"
+  "falconPackageHash": "398dcee4762e04fdaa11211df36bfb4ac7e2ea328d412a68f2e363f8"
 }

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

@@ -0,0 +1,88 @@
+import { CSS_PROPERTIES } from '@wix/react-component-schema'
+import { describe, expect, it } from 'vitest'
+import { parseCss } from '../information-extractors/css/parse'
+import type { MatchedCssData } from '../information-extractors/css/types'
+import type { ExtractedElement } from '../information-extractors/react'
+import type { ComponentInfoWithCss } from '../manifest-pipeline'
+import { toEditorReactComponent } from './to-editor-component'
+
+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('--')),
+        specificity: [0, 1, 0],
+      },
+    ],
+    customProperties,
+  }
+}
+
+function createElementWithDisplayMatcher(tag: string, matcherData: MatchedCssData): ExtractedElement {
+  const extractorData = new Map<string, unknown>()
+  extractorData.set('css-matcher', matcherData)
+  extractorData.set('css-properties', { relevant: [CSS_PROPERTIES.CSS_PROPERTY_TYPE.display] })
+
+  return {
+    traceId: 'trace-root',
+    name: 'root',
+    tag,
+    attributes: {},
+    extractorData,
+    children: [],
+  }
+}
+
+function createComponent(rootElement: ExtractedElement): ComponentInfoWithCss {
+  return {
+    componentName: 'DisplayComponent',
+    props: {},
+    elements: [rootElement],
+    propUsages: new Map(),
+    css: [],
+    varUsedByTraceId: new Map(),
+  }
+}
+
+describe('toEditorReactComponent display conversion', () => {
+  it('resolves local display fallback chains before emitting the manifest display value', () => {
+    const rootElement = createElementWithDisplayMatcher(
+      'span',
+      matcherDataFromCss(
+        'display: var(--component-display, inline); --component-display: var(--theme-display, inline-flex)',
+      ),
+    )
+
+    const result = toEditorReactComponent(createComponent(rootElement))
+    expect(result.editorElement).toBeDefined()
+
+    expect(result.editorElement?.cssProperties?.display).toEqual({
+      display: {
+        displayValues: [CSS_PROPERTIES.DISPLAY_VALUE.none, 'inlineFlex'],
+      },
+    })
+  })
+
+  it('keeps using the tag default when no display declaration exists', () => {
+    const rootElement = createElementWithDisplayMatcher('span', matcherDataFromCss(''))
+
+    const result = toEditorReactComponent(createComponent(rootElement))
+    expect(result.editorElement).toBeDefined()
+
+    expect(result.editorElement?.cssProperties?.display).toEqual({
+      display: {
+        displayValues: [CSS_PROPERTIES.DISPLAY_VALUE.none, 'inline'],
+      },
+    })
+  })
+})

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

@@ -436,6 +436,17 @@ function buildCssProperties(element: ExtractedElement | undefined): Record<strin
 function buildDisplayProperty(element: ExtractedElement): CssPropertyItem {
   const matcherData = element.extractorData.get('css-matcher') as MatchedCssData | undefined
   const resolvedFromCss = matcherData ? resolveDisplayValue(matcherData) : undefined
+  const hasExplicitDisplayDeclaration =
+    matcherData?.matches.some((match) => match.properties.some((property) => property.name === 'display')) ?? false
+
+  if (hasExplicitDisplayDeclaration && resolvedFromCss === undefined) {
+    return {
+      display: {
+        displayValues: [DISPLAY_VALUE.none],
+      },
+    }
+  }
+
   const currentValue = resolvedFromCss ?? getDefaultDisplayForTag(element.tag)
   const currentEnumValue = toDisplayEnumValue(currentValue)
 

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

@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { parseCss } from './parse'
+import { parseCss, resolveCssPropertyValue } from './parse'
 
 describe('parseCss — getStateClasses', () => {
   it('extracts a custom-class modifier with no paired pseudo', () => {
@@ -120,3 +120,51 @@ describe('parseCss — getStateClasses', () => {
     expect(stateClasses).toEqual([])
   })
 })
+
+describe('resolveCssPropertyValue', () => {
+  it('uses the fallback when a referenced custom property is missing from the property-level map', () => {
+    const [displayProperty] = parseCss(`
+      .title {
+        display: var(--layout-display, inline);
+      }
+    `).getPropertiesForSelector('.title')
+
+    expect(resolveCssPropertyValue(displayProperty, {})).toBe('inline')
+  })
+
+  it('uses the outer fallback when a referenced custom property is known locally but resolves cyclically', () => {
+    const [displayProperty] = parseCss(`
+      .title {
+        display: var(--layout-display, inline);
+      }
+    `).getPropertiesForSelector('.title')
+
+    expect(resolveCssPropertyValue(displayProperty, { '--layout-display': 'var(--layout-display)' })).toBe('inline')
+  })
+
+  it('does not use an inner fallback from a cyclic custom property definition', () => {
+    const [displayProperty] = parseCss(`
+      .title {
+        display: var(--layout-display, inline);
+      }
+    `).getPropertiesForSelector('.title')
+
+    expect(resolveCssPropertyValue(displayProperty, { '--layout-display': 'var(--layout-display, inline-flex)' })).toBe(
+      'inline',
+    )
+  })
+
+  it('resolves a local custom property chain through its nested fallback when the missing variable is local to the chain', () => {
+    const [displayProperty] = parseCss(`
+      .title {
+        display: var(--component-display, inline);
+      }
+    `).getPropertiesForSelector('.title')
+
+    expect(
+      resolveCssPropertyValue(displayProperty, {
+        '--component-display': 'var(--theme-display, inline-flex)',
+      }),
+    ).toBe('inline-flex')
+  })
+})

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

@@ -1,7 +1,7 @@
 import { CSS_PROPERTIES } from '@wix/react-component-schema'
 import { camelCase } from 'case-anything'
 import { generate, lexer, parse, walk } from 'css-tree'
-import type { Atrule, CssNode, Declaration, FunctionNode, Rule, Selector } from 'css-tree'
+import type { Atrule, CssNode, Declaration, FunctionNode, Rule, Selector, Value } from 'css-tree'
 import { stateNameFromModifier } from '../../utils/css-class'
 import type { CSSParserAPI, CSSProperty, NativePseudoClass, StateClassRule } from './types'
 
@@ -70,6 +70,12 @@ export function parseCss(cssString: string): CSSParserAPI {
       return buildDomSelector(parsed)
     },
 
+    getSelectorSpecificity(selector: string): [number, number, number] | null {
+      const parsed = parsedSelectors.get(selector)
+      if (!parsed) return null
+      return getSelectorSpecificity(parsed)
+    },
+
     getVarPropertyType(varName: string, defaultValue: string): string | undefined {
       const usages = this.getVarUsages(varName)
       if (usages.length === 0) return undefined
@@ -173,14 +179,133 @@ function extractProperty(declaration: Declaration, varUsagesByProperty: Map<stri
     }
 
     if (varRefs.length > 0) {
-      return { name, value, varRefs }
+      return { name, value, valueAst: declaration.value, varRefs }
     }
-    return { name, value }
+    return { name, value, valueAst: declaration.value }
   } catch {
     return null
   }
 }
 
+type ResolvedCssValue = { kind: 'resolved'; value: string } | { kind: 'unresolved' } | { kind: 'invalid' }
+
+function resolvedCssValue(value: string): ResolvedCssValue {
+  return { kind: 'resolved', value }
+}
+
+function unresolvedCssValue(): ResolvedCssValue {
+  return { kind: 'unresolved' }
+}
+
+function invalidCssValue(): ResolvedCssValue {
+  return { kind: 'invalid' }
+}
+
+function resolveValueSequence(
+  valueNodes: CssNode[],
+  customProperties: Record<string, string>,
+  seenVariables: Set<string>,
+): ResolvedCssValue {
+  const resolvedParts: string[] = []
+
+  for (const valueNode of valueNodes) {
+    const resolvedPart = resolveValueNode(valueNode, customProperties, seenVariables)
+    if (resolvedPart.kind !== 'resolved') return resolvedPart
+    if (resolvedPart.value.length > 0) {
+      resolvedParts.push(resolvedPart.value)
+    }
+  }
+
+  return resolvedCssValue(resolvedParts.join(' '))
+}
+
+function resolveVariableFunction(
+  functionNode: FunctionNode,
+  customProperties: Record<string, string>,
+  seenVariables: Set<string>,
+): ResolvedCssValue {
+  const functionArguments = [...functionNode.children]
+  const firstCommaIndex = functionArguments.findIndex(
+    (argumentNode) => argumentNode.type === 'Operator' && argumentNode.value === ',',
+  )
+
+  const variableReferenceNodes =
+    firstCommaIndex === -1 ? functionArguments : functionArguments.slice(0, firstCommaIndex)
+  const fallbackNodes = firstCommaIndex === -1 ? [] : functionArguments.slice(firstCommaIndex + 1)
+
+  const variableReference = variableReferenceNodes
+    .map((argumentNode) => generate(argumentNode))
+    .join('')
+    .trim()
+  const normalizedVariableName = variableReference.startsWith('--') ? variableReference : `--${variableReference}`
+
+  if (seenVariables.has(normalizedVariableName)) {
+    return invalidCssValue()
+  }
+
+  const customPropertyValue = customProperties[normalizedVariableName]
+  if (customPropertyValue !== undefined) {
+    try {
+      const customPropertyValueAst = parse(customPropertyValue, { context: 'value' }) as Value
+      const nextSeenVariables = new Set(seenVariables)
+      nextSeenVariables.add(normalizedVariableName)
+      const resolvedCustomPropertyValue = resolveValueSequence(
+        [...customPropertyValueAst.children],
+        customProperties,
+        nextSeenVariables,
+      )
+
+      if (resolvedCustomPropertyValue.kind === 'resolved') {
+        return resolvedCustomPropertyValue
+      }
+
+      if (resolvedCustomPropertyValue.kind === 'invalid') {
+        return fallbackNodes.length > 0
+          ? resolveValueSequence(fallbackNodes, customProperties, seenVariables)
+          : invalidCssValue()
+      }
+
+      return unresolvedCssValue()
+    } catch {
+      return invalidCssValue()
+    }
+  }
+
+  if (fallbackNodes.length > 0) {
+    return resolveValueSequence(fallbackNodes, customProperties, seenVariables)
+  }
+
+  return unresolvedCssValue()
+}
+
+function resolveValueNode(
+  valueNode: CssNode,
+  customProperties: Record<string, string>,
+  seenVariables: Set<string>,
+): ResolvedCssValue {
+  if (valueNode.type === 'Value') {
+    return resolveValueSequence([...valueNode.children], customProperties, seenVariables)
+  }
+
+  if (valueNode.type === 'Function' && valueNode.name === 'var') {
+    return resolveVariableFunction(valueNode, customProperties, seenVariables)
+  }
+
+  return resolvedCssValue(generate(valueNode).trim())
+}
+
+export function resolveCssPropertyValue(
+  property: CSSProperty,
+  customProperties: Record<string, string>,
+): string | undefined {
+  if (!property.valueAst || !property.varRefs || property.varRefs.length === 0) {
+    return property.value
+  }
+
+  const resolvedPropertyValue = resolveValueNode(property.valueAst, customProperties, new Set())
+  return resolvedPropertyValue.kind === 'resolved' ? resolvedPropertyValue.value : undefined
+}
+
 /**
  * Extracts all CSS custom property names referenced via var() by walking
  * the declaration value AST for Function nodes named "var".
@@ -395,6 +520,45 @@ function buildDomSelector(selector: Selector): string | null {
   return result || null
 }
 
+function getSelectorSpecificity(selector: Selector): [number, number, number] {
+  let idCount = 0
+  let classLikeCount = 0
+  let typeLikeCount = 0
+
+  for (const component of selector.children) {
+    if (component.type === 'IdSelector') {
+      idCount += 1
+      continue
+    }
+
+    if (component.type === 'ClassSelector' || component.type === 'AttributeSelector') {
+      classLikeCount += 1
+      continue
+    }
+
+    if (component.type === 'TypeSelector') {
+      if (component.name !== '*') {
+        typeLikeCount += 1
+      }
+      continue
+    }
+
+    if (component.type === 'PseudoElementSelector') {
+      typeLikeCount += 1
+      continue
+    }
+
+    if (component.type === 'PseudoClassSelector') {
+      if (component.name === 'where') {
+        continue
+      }
+      classLikeCount += 1
+    }
+  }
+
+  return [idCount, classLikeCount, typeLikeCount]
+}
+
 /**
  * Checks whether a CSS value matches a given CSS type (e.g. 'color', 'length').
  * Uses css-tree's lexer; returns true when the value conforms to the type grammar.

package/src/information-extractors/css/selector-matcher.ts

@@ -67,6 +67,8 @@ export function matchCssSelectors(
       if (!domSelector) continue
 
       try {
+        const selectorSpecificity = cssInfo.api.getSelectorSpecificity(selector) ?? [0, 0, 0]
+
         findMatchingElements($, domSelector, cssInfo.isCssModule).each((_index, element) => {
           const traceId = $(element).attr(TRACE_ATTR)
           if (!traceId) return
@@ -89,7 +91,7 @@ export function matchCssSelectors(
 
           if (regular.length > 0) {
             const existing = matchesByTraceId.get(traceId) ?? []
-            existing.push({ selector, properties: regular })
+            existing.push({ selector, properties: regular, specificity: selectorSpecificity })
             matchesByTraceId.set(traceId, existing)
 
             // Track which CSS custom properties are used (via var()) by this element

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

@@ -1,6 +1,10 @@
+import type { CssNode } from 'css-tree'
+
 export interface CSSProperty {
   name: string
   value: string
+  /** Parsed css-tree AST for the property's value. */
+  valueAst?: CssNode
   /** CSS variable names referenced via var() in this property's value */
   varRefs?: string[]
 }
@@ -8,6 +12,7 @@ export interface CSSProperty {
 export interface CssSelectorMatch {
   selector: string
   properties: CSSProperty[]
+  specificity: [number, number, number]
 }
 
 export interface MatchedCssData {
@@ -76,6 +81,12 @@ export interface CSSParserAPI {
    */
   getDomSelector: (selector: string) => string | null
 
+  /**
+   * Gets the selector specificity tuple as [ids, classes/attrs/pseudo-classes, elements/pseudo-elements].
+   * Returns null when the selector was not parsed.
+   */
+  getSelectorSpecificity: (selector: string) => [number, number, number] | null
+
   /**
    * Determines the CSS property type for a custom property based on how it is used.
    * If all usages of varName are within the same CSS property, returns that property name.