@wix/zero-config-implementation 1.19.0 → 1.21.0

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

@@ -1,4 +1,7 @@
+import { CSS_PROPERTIES } from '@wix/zero-config-schema'
+import { camelCase } from 'case-anything'
 import { transform } from 'lightningcss'
+import type { TokenOrValue } from 'lightningcss'
 import type { CSSParserAPI, CSSProperty } from './types'
 // Store parsed selectors for later DOM selector computation
 const parsedSelectors = new Map<string, unknown[]>()
@@ -13,7 +16,7 @@ export function parseCss(cssString: string): CSSParserAPI {
   parsedSelectors.clear()
 
   // Parse all properties eagerly at initialization using lightningcss
-  const allProperties = parseAllProperties(cssString)
+  const { propertiesMap: allProperties, varUsagesByProperty } = parseAllProperties(cssString)
 
   return {
     getPropertiesForSelector(selector: string): CSSProperty[] {
@@ -25,27 +28,8 @@ export function parseCss(cssString: string): CSSParserAPI {
     },
 
     getVarUsages(varName: string): string[] {
-      // Normalize variable name to include --
       const normalizedVarName = varName.startsWith('--') ? varName : `--${varName}`
-
-      const propertyNames = new Set<string>()
-
-      // Search through all properties for var() usage
-      for (const properties of allProperties.values()) {
-        for (const property of properties) {
-          // Check if the value contains var(--varName)
-          const varPattern = new RegExp(`var\\(\\s*${escapeRegex(normalizedVarName)}\\s*[,)]`, 'i')
-
-          if (varPattern.test(property.value)) {
-            // Ignore shorthand properties (values with multiple space-separated values)
-            if (!isShorthandValue(property.value)) {
-              propertyNames.add(property.name)
-            }
-          }
-        }
-      }
-
-      return Array.from(propertyNames)
+      return [...(varUsagesByProperty.get(normalizedVarName) ?? [])]
     },
 
     getUniqueProperties(selectors: string[]): Map<string, string> {
@@ -76,17 +60,35 @@ export function parseCss(cssString: string): CSSParserAPI {
       if (!parsed) return null
       return buildDomSelector(parsed)
     },
+
+    getVarPropertyType(varName: string, defaultValue: string): string | undefined {
+      const usages = this.getVarUsages(varName)
+      if (usages.length === 0) return undefined
+      const uniqueProperties = [...new Set(usages)]
+      if (uniqueProperties.length === 1) {
+        const camelCased = camelCase(uniqueProperties[0])
+        const validValues = Object.values(CSS_PROPERTIES.CSS_PROPERTY_TYPE) as string[]
+        if (validValues.includes(camelCased)) return camelCased
+      }
+      return inferCssDataType(defaultValue)
+    },
   }
 }
 
 /**
- * Parses all selectors and their properties from the CSS using lightningcss
+ * Parses all selectors and their properties from the CSS using lightningcss.
+ * Also builds a direct map of var() usages by scanning unparsed declaration tokens,
+ * since serialized property values lose var() references.
  * Supports @media rules, @keyframes, and nested selectors
  * @param cssString - CSS string to parse
- * @returns Map from selector to its CSS properties
+ * @returns propertiesMap (selector → properties) and varUsagesByProperty (varName → CSS property names)
  */
-function parseAllProperties(cssString: string): Map<string, CSSProperty[]> {
+function parseAllProperties(cssString: string): {
+  propertiesMap: Map<string, CSSProperty[]>
+  varUsagesByProperty: Map<string, Set<string>>
+} {
   const propertiesMap = new Map<string, CSSProperty[]>()
+  const varUsagesByProperty = new Map<string, Set<string>>()
 
   try {
     // Use lightningcss transform with visitor to collect properties
@@ -113,10 +115,26 @@ function parseAllProperties(cssString: string): Map<string, CSSProperty[]> {
               // Extract properties from declarations
               const properties: CSSProperty[] = []
               for (const decl of rule.value.declarations?.declarations ?? []) {
-                const extracted = extractPropertyNameAndValue(decl)
+                const declTyped = decl as LightningDecl
+                const extracted = extractPropertyNameAndValue(declTyped)
                 if (extracted) {
                   properties.push(extracted)
                 }
+
+                // Track var() usages by scanning unparsed declaration tokens directly.
+                // propertyValueToString cannot recover var() from unparsed values, so
+                // we inspect the token array instead.
+                if (declTyped.property === 'unparsed') {
+                  const unparsed = declTyped.value as { propertyId?: { property?: string }; value?: unknown[] }
+                  const cssPropertyName = unparsed.propertyId?.property
+                  if (cssPropertyName) {
+                    for (const varName of extractVarNamesFromTokens(unparsed.value ?? [])) {
+                      const usageSet = varUsagesByProperty.get(varName) ?? new Set<string>()
+                      usageSet.add(cssPropertyName)
+                      varUsagesByProperty.set(varName, usageSet)
+                    }
+                  }
+                }
               }
 
               // Store properties for each selector
@@ -176,7 +194,36 @@ function parseAllProperties(cssString: string): Map<string, CSSProperty[]> {
     console.error('CSS parsing error:', error)
   }
 
-  return propertiesMap
+  return { propertiesMap, varUsagesByProperty }
+}
+
+/**
+ * Extracts all CSS custom property names referenced via var() from a lightningcss token array.
+ * Handles nested token arrays recursively (e.g. tokens inside function arguments).
+ */
+function extractVarNamesFromTokens(tokens: unknown[]): string[] {
+  const varNames: string[] = []
+
+  for (const token of tokens) {
+    if (!token || typeof token !== 'object') continue
+    const tokenObj = token as Record<string, unknown>
+
+    if (tokenObj.type === 'var') {
+      const varValue = tokenObj.value as Record<string, unknown> | undefined
+      const nameObj = varValue?.name as Record<string, unknown> | undefined
+      const identName = nameObj?.ident as string | undefined
+      if (identName) {
+        varNames.push(identName.startsWith('--') ? identName : `--${identName}`)
+      }
+    } else if (tokenObj.type === 'function' || Array.isArray(tokenObj.value)) {
+      const nestedTokens = tokenObj.value as unknown[]
+      if (Array.isArray(nestedTokens)) {
+        varNames.push(...extractVarNamesFromTokens(nestedTokens))
+      }
+    }
+  }
+
+  return varNames
 }
 
 /**
@@ -271,7 +318,7 @@ interface LightningDecl {
 
 interface CustomPropertyValue {
   name: string
-  value: unknown[]
+  value: TokenOrValue[]
 }
 
 /**
@@ -339,19 +386,33 @@ function serializeCustomPropertyValue(valueArray: unknown[]): string {
           parts.push(`rgba(${r}, ${g}, ${b}, ${a})`)
         }
       }
-    } else if (t.type === 'length' || t.type === 'dimension') {
-      const dim = (t.value as Record<string, unknown>) ?? t
-      const unit = dim.unit as string
-      const val = dim.value as number
-      parts.push(`${val}${unit}`)
-    } else if (t.type === 'number') {
-      parts.push(String(t.value))
+    } else if (t.type === 'length' || t.type === 'resolution') {
+      // length/resolution: { unit: string, value: number }
+      const dim = t.value as Record<string, unknown>
+      parts.push(`${dim.value}${dim.unit}`)
+    } else if (t.type === 'angle') {
+      // angle: { type: 'deg' | 'rad' | 'grad' | 'turn', value: number }
+      const dim = t.value as Record<string, unknown>
+      parts.push(`${dim.value}${dim.type}`)
+    } else if (t.type === 'time') {
+      // time: { type: 'seconds' | 'milliseconds', value: number }
+      const dim = t.value as Record<string, unknown>
+      const unit = dim.type === 'milliseconds' ? 'ms' : 's'
+      parts.push(`${dim.value}${unit}`)
     } else if (t.type === 'token') {
       const tokenValue = t.value as Record<string, unknown>
       if (tokenValue.type === 'ident') {
         parts.push(tokenValue.value as string)
       } else if (tokenValue.type === 'string') {
         parts.push(`"${tokenValue.value}"`)
+      } else if (tokenValue.type === 'number') {
+        parts.push(String(tokenValue.value))
+      } else if (tokenValue.type === 'percentage') {
+        parts.push(`${(tokenValue.value as number) * 100}%`)
+      } else if (tokenValue.type === 'dimension') {
+        parts.push(`${tokenValue.value}${tokenValue.unit}`)
+      } else if (tokenValue.type === 'white-space') {
+        parts.push(tokenValue.value as string)
       }
     }
   }
@@ -448,3 +509,69 @@ function isShorthandValue(value: string): boolean {
 function escapeRegex(str: string): string {
   return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
 }
+
+const ANGLE_UNITS = new Set(['deg', 'rad', 'grad', 'turn'])
+const TIME_UNITS = new Set(['s', 'ms'])
+
+/**
+ * Infers the CSS data type category from a custom property's initial value string.
+ * Uses lightningcss to parse the value and inspect the first token's type.
+ * Returns a value from CSS_PROPERTIES.CSS_DATA_TYPE.
+ */
+function inferCssDataType(defaultValue: string): string {
+  const { CSS_DATA_TYPE } = CSS_PROPERTIES
+  let inferredType: string = CSS_DATA_TYPE.string
+
+  try {
+    transform({
+      filename: 'input.css',
+      code: Buffer.from(`.x { --foo: ${defaultValue}; }`),
+      minify: false,
+      visitor: {
+        Rule: {
+          style(rule) {
+            for (const declaration of rule.value.declarations?.declarations ?? []) {
+              const decl = declaration as LightningDecl
+              if (decl.property === 'custom') {
+                const tokens = (decl.value as CustomPropertyValue).value
+                if (tokens?.length > 0) {
+                  const firstToken = tokens[0]
+                  if (firstToken.type === 'color') {
+                    inferredType = CSS_DATA_TYPE.color
+                  } else if (firstToken.type === 'length') {
+                    inferredType = CSS_DATA_TYPE.length
+                  } else if (firstToken.type === 'angle') {
+                    inferredType = CSS_DATA_TYPE.angle
+                  } else if (firstToken.type === 'time') {
+                    inferredType = CSS_DATA_TYPE.time
+                  } else if (firstToken.type === 'token') {
+                    const raw = firstToken.value
+                    if (raw.type === 'number') {
+                      inferredType = CSS_DATA_TYPE.number
+                    } else if (raw.type === 'percentage') {
+                      inferredType = CSS_DATA_TYPE.percentage
+                    } else if (raw.type === 'dimension') {
+                      const unit = raw.unit.toString()
+                      if (ANGLE_UNITS.has(unit)) {
+                        inferredType = CSS_DATA_TYPE.angle
+                      } else if (TIME_UNITS.has(unit)) {
+                        inferredType = CSS_DATA_TYPE.time
+                      } else {
+                        inferredType = CSS_DATA_TYPE.length
+                      }
+                    }
+                  }
+                }
+              }
+            }
+            return undefined
+          },
+        },
+      },
+    })
+  } catch {
+    // Fall back to 'string' if parsing fails
+  }
+
+  return inferredType
+}

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

@@ -8,12 +8,13 @@ export function matchCssSelectors(
   html: string,
   elements: ExtractedElement[],
   cssInfos: ExtractedCssInfo[],
-): ExtractedElement[] {
+): { elements: ExtractedElement[]; varUsedByTraceId: Map<string, Set<string>> } {
   const $ = cheerio.load(html)
 
   // Build traceId -> matches map
   const matchesByTraceId = new Map<string, CssSelectorMatch[]>()
   const customPropsByTraceId = new Map<string, Record<string, string>>()
+  const varUsedByTraceId = new Map<string, Set<string>>()
 
   for (const cssInfo of cssInfos) {
     const allProps = cssInfo.api.getAllProperties()
@@ -51,6 +52,15 @@ export function matchCssSelectors(
             const existing = matchesByTraceId.get(traceId) ?? []
             existing.push({ selector, properties: regular })
             matchesByTraceId.set(traceId, existing)
+
+            // Track which CSS custom properties are used (via var()) by this element
+            for (const regularProp of regular) {
+              for (const varName of extractVarRefs(regularProp.value)) {
+                const traceIdSet = varUsedByTraceId.get(varName) ?? new Set()
+                traceIdSet.add(traceId)
+                varUsedByTraceId.set(varName, traceIdSet)
+              }
+            }
           }
 
           if (Object.keys(custom).length > 0) {
@@ -65,7 +75,24 @@ export function matchCssSelectors(
     }
   }
 
-  return enrichElements(elements, matchesByTraceId, customPropsByTraceId)
+  return {
+    elements: enrichElements(elements, matchesByTraceId, customPropsByTraceId),
+    varUsedByTraceId,
+  }
+}
+
+/**
+ * Extracts all CSS custom property names referenced via var() in a property value string.
+ */
+function extractVarRefs(value: string): string[] {
+  const varNames: string[] = []
+  const varPattern = /var\(\s*(--[\w-]+)/g
+  let varMatch = varPattern.exec(value)
+  while (varMatch !== null) {
+    varNames.push(varMatch[1])
+    varMatch = varPattern.exec(value)
+  }
+  return varNames
 }
 
 function enrichElements(

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

@@ -53,4 +53,15 @@ export interface CSSParserAPI {
    * @returns DOM-matchable selector string or null
    */
   getDomSelector: (selector: string) => string | 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.
+   * If usages differ, returns the CSS data type inferred from the initial value
+   * ('color', 'length', 'number', or 'string').
+   * Returns undefined if the variable is never used via var().
+   * @param varName - The CSS variable name (with or without --)
+   * @param defaultValue - The initial value string of the custom property
+   */
+  getVarPropertyType: (varName: string, defaultValue: string) => string | undefined
 }

package/src/information-extractors/ts/utils/semantic-type-resolver.ts

@@ -1,13 +1,11 @@
 import * as fs from 'node:fs'
 import * as path from 'node:path'
 import ts from 'typescript'
-import { DATA } from '../../../schema'
+import { WIX_TYPE_TO_DATA_TYPE } from '../../../wix-type-to-data-type'
 import type { PropInfo, ResolvedType } from '../types'
 
 const MAX_RESOLVE_DEPTH = 30
 
-const { WIX_TYPE_TO_DATA_TYPE } = DATA
-
 /**
  * Cache for package name lookups
  */

package/src/manifest-pipeline.ts

@@ -39,6 +39,7 @@ export interface ExtractedCssInfo {
 
 export interface ComponentInfoWithCss extends CoupledComponentInfo {
   css: ExtractedCssInfo[]
+  varUsedByTraceId: Map<string, Set<string>>
 }
 
 /** The result of processing a single component through the manifest pipeline. */
@@ -147,13 +148,15 @@ export function processComponent(
   warnings.push(...cssWarnings)
 
   // Match CSS selectors to elements
+  let varUsedByTraceId = new Map<string, Set<string>>()
   if (html && extractedElements.length > 0 && css.length > 0) {
     try {
-      const enrichedElements = matchCssSelectors(html, extractedElements, css)
+      const matchResult = matchCssSelectors(html, extractedElements, css)
       enhancedInfo = {
         ...enhancedInfo,
-        elements: convertElements(enrichedElements),
+        elements: convertElements(matchResult.elements),
       }
+      varUsedByTraceId = matchResult.varUsedByTraceId
     } catch (error) {
       warnings.push({
         componentName: componentInfo.componentName,
@@ -168,6 +171,7 @@ export function processComponent(
     component: {
       ...enhancedInfo,
       css,
+      varUsedByTraceId,
     },
     warnings,
   }

package/src/wix-type-to-data-type.ts

@@ -0,0 +1,33 @@
+import type { DATA } from '@wix/zero-config-schema'
+
+/**
+ * Maps @wix/public-schemas type names (PascalCase) to their DATA_TYPE keys.
+ * Derived from the exports of @wix/public-schemas.
+ */
+export const WIX_TYPE_TO_DATA_TYPE: Record<string, keyof typeof DATA.DATA_TYPE> = {
+  Link: 'link',
+  Image: 'image',
+  Video: 'video',
+  VectorArt: 'vectorArt',
+  A11y: 'a11y',
+  Audio: 'audio',
+  MenuItems: 'menuItems',
+  Schema: 'schema',
+  Text: 'text',
+  TextEnum: 'textEnum',
+  NumberType: 'number',
+  BooleanValue: 'booleanValue',
+  LocalDate: 'localDate',
+  LocalTime: 'localTime',
+  LocalDateTime: 'localDateTime',
+  WebUrl: 'webUrl',
+  Email: 'email',
+  Phone: 'phone',
+  Hostname: 'hostname',
+  Regex: 'regex',
+  Guid: 'guid',
+  RichText: 'richText',
+  Container: 'container',
+  ArrayItems: 'arrayItems',
+  Direction: 'direction',
+}

package/dist/schema.d.ts

@@ -1,168 +0,0 @@
-export declare const DATA: {
-    DATA_TYPE: {
-        readonly UNKNOWN_DataType: "UNKNOWN_DataType";
-        readonly text: "text";
-        readonly textEnum: "textEnum";
-        readonly number: "number";
-        readonly booleanValue: "booleanValue";
-        readonly a11y: "a11y";
-        readonly link: "link";
-        readonly image: "image";
-        readonly video: "video";
-        readonly vectorArt: "vectorArt";
-        readonly audio: "audio";
-        readonly schema: "schema";
-        readonly localDate: "localDate";
-        readonly localTime: "localTime";
-        readonly localDateTime: "localDateTime";
-        readonly webUrl: "webUrl";
-        readonly email: "email";
-        readonly phone: "phone";
-        readonly hostname: "hostname";
-        readonly regex: "regex";
-        readonly guid: "guid";
-        readonly richText: "richText";
-        readonly container: "container";
-        readonly arrayItems: "arrayItems";
-        readonly direction: "direction";
-        readonly menuItems: "menuItems";
-        readonly data: "data";
-        readonly function: "function";
-        readonly onClick: "onClick";
-        readonly onChange: "onChange";
-        readonly onKeyPress: "onKeyPress";
-        readonly onKeyUp: "onKeyUp";
-        readonly onSubmit: "onSubmit";
-    };
-    A11Y_ATTRIBUTES: {
-        readonly Unknown_AriaAttributes: "Unknown_AriaAttributes";
-        readonly tabIndex: "tabIndex";
-        readonly ariaLevel: "ariaLevel";
-        readonly ariaExpanded: "ariaExpanded";
-        readonly ariaDisabled: "ariaDisabled";
-        readonly ariaAtomic: "ariaAtomic";
-        readonly ariaHidden: "ariaHidden";
-        readonly ariaBusy: "ariaBusy";
-        readonly multiline: "multiline";
-        readonly ariaAutocomplete: "ariaAutocomplete";
-        readonly ariaPressed: "ariaPressed";
-        readonly ariaHaspopup: "ariaHaspopup";
-        readonly ariaRelevant: "ariaRelevant";
-        readonly role: "role";
-        readonly ariaLive: "ariaLive";
-        readonly ariaCurrent: "ariaCurrent";
-        readonly ariaLabel: "ariaLabel";
-        readonly ariaRoledescription: "ariaRoledescription";
-        readonly ariaDescribedby: "ariaDescribedby";
-        readonly ariaLabelledby: "ariaLabelledby";
-        readonly ariaErrormessage: "ariaErrormessage";
-        readonly ariaOwns: "ariaOwns";
-        readonly ariaControls: "ariaControls";
-        readonly tag: "tag";
-        readonly ariaMultiline: "ariaMultiline";
-        readonly ariaInvalid: "ariaInvalid";
-    };
-    LINK_TYPE: {
-        readonly UNKNOWN_LinkType: "UNKNOWN_LinkType";
-        readonly externalLink: "externalLink";
-        readonly anchorLink: "anchorLink";
-        readonly emailLink: "emailLink";
-        readonly phoneLink: "phoneLink";
-        readonly dynamicPageLink: "dynamicPageLink";
-        readonly pageLink: "pageLink";
-        readonly whatsAppLink: "whatsAppLink";
-        readonly documentLink: "documentLink";
-        readonly popupLink: "popupLink";
-        readonly addressLink: "addressLink";
-        readonly edgeAnchorLinks: "edgeAnchorLinks";
-        readonly loginToWixLink: "loginToWixLink";
-    };
-    WIX_TYPE_TO_DATA_TYPE: Record<string, "number" | "function" | "UNKNOWN_DataType" | "text" | "textEnum" | "booleanValue" | "a11y" | "link" | "image" | "video" | "vectorArt" | "audio" | "schema" | "localDate" | "localTime" | "localDateTime" | "webUrl" | "email" | "phone" | "hostname" | "regex" | "guid" | "richText" | "container" | "arrayItems" | "direction" | "menuItems" | "data" | "onClick" | "onChange" | "onKeyPress" | "onKeyUp" | "onSubmit">;
-};
-export declare const MEDIA: {
-    VIDEO_CATEGORY: {
-        readonly UNKNOWN_VideoCategoryTypes: "UNKNOWN_VideoCategoryTypes";
-        readonly VIDEO: "VIDEO";
-        readonly VIDEO_TRANSPARENT: "VIDEO_TRANSPARENT";
-        readonly VIDEO_OPAQUE: "VIDEO_OPAQUE";
-    };
-    VECTOR_ART_CATEGORY: {
-        readonly UNKNOWN_VectorArtCategoryTypes: "UNKNOWN_VectorArtCategoryTypes";
-        readonly SHAPE_ALL: "SHAPE_ALL";
-        readonly SHAPE_BASIC: "SHAPE_BASIC";
-        readonly SHAPE_ART: "SHAPE_ART";
-        readonly ICON_SOCIAL: "ICON_SOCIAL";
-        readonly SHAPE_DIVIDERS: "SHAPE_DIVIDERS";
-        readonly SHAPE_LOCATION: "SHAPE_LOCATION";
-        readonly SHAPE_DOCUMENTS: "SHAPE_DOCUMENTS";
-        readonly SHAPE_SOCIAL: "SHAPE_SOCIAL";
-        readonly SHAPE_ARROWS: "SHAPE_ARROWS";
-    };
-    IMAGE_CATEGORY: {
-        readonly UNKNOWN_CategoryName: "UNKNOWN_CategoryName";
-        readonly IMAGE: "IMAGE";
-        readonly IMAGE_BACKGROUND: "IMAGE_BACKGROUND";
-    };
-};
-export declare const ELEMENTS: {
-    ELEMENT_TYPE: {
-        readonly UNKNOWN_ElementType: "UNKNOWN_ElementType";
-        readonly inlineElement: "inlineElement";
-        readonly refElement: "refElement";
-    };
-};
-export interface DataItem {
-    displayName?: string;
-    defaultValue?: unknown;
-    dataType?: string;
-    text?: Record<string, unknown>;
-    number?: Record<string, unknown>;
-    booleanValue?: unknown;
-    textEnum?: {
-        options: Array<{
-            value: string;
-            displayName?: string;
-        }>;
-    };
-    arrayItems?: {
-        dataItem?: DataItem;
-    };
-    data?: {
-        items?: Record<string, DataItem>;
-    };
-    function?: Record<string, unknown>;
-    link?: {
-        linkTypes?: string[];
-    };
-    image?: {
-        category?: string;
-    };
-}
-export interface CssPropertyItem {
-    defaultValue?: string;
-}
-export interface CssCustomPropertyItem {
-    defaultValue?: string;
-}
-export interface EditorElement {
-    selector?: string;
-    displayName?: string;
-    data?: Record<string, DataItem>;
-    elements?: Record<string, ElementItem>;
-    cssProperties?: Record<string, CssPropertyItem>;
-    cssCustomProperties?: Record<string, CssCustomPropertyItem>;
-}
-export interface ElementItem {
-    elementType?: string;
-    inlineElement?: {
-        selector?: string;
-        displayName?: string;
-        data?: Record<string, DataItem>;
-        cssProperties?: Record<string, CssPropertyItem>;
-        cssCustomProperties?: Record<string, CssCustomPropertyItem>;
-        elements?: Record<string, ElementItem>;
-    };
-}
-export interface EditorReactComponent {
-    editorElement?: EditorElement;
-}