@wix/zero-config-implementation 1.24.0 → 1.26.0

package/dist/information-extractors/css/types.d.ts

@@ -1,6 +1,8 @@
 export interface CSSProperty {
     name: string;
     value: string;
+    /** CSS variable names referenced via var() in this property's value */
+    varRefs?: string[];
 }
 export interface CssSelectorMatch {
     selector: string;

package/dist/manifest-pipeline.d.ts

@@ -14,6 +14,7 @@ export interface ExtractedCssInfo {
     api: CSSParserAPI;
     properties: Map<string, string>;
     customProperties: Map<string, string>;
+    isCssModule: boolean;
 }
 export interface ComponentInfoWithCss extends CoupledComponentInfo {
     css: ExtractedCssInfo[];

package/package.json

@@ -4,7 +4,7 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "version": "1.24.0",
+  "version": "1.26.0",
   "description": "Core library for extracting component manifests from JS and CSS files",
   "type": "module",
   "main": "dist/index.js",
@@ -83,5 +83,5 @@
       ]
     }
   },
-  "falconPackageHash": "79d9ab055f999610e162c914b9c616eed125490c1816f8b91e2dac53"
+  "falconPackageHash": "3dd0aab1018f95841806376f73376b94c1dcf15d586caa70806a01f8"
 }

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

@@ -345,7 +345,8 @@ function extractPropertyNameAndValue(decl: LightningDecl): CSSProperty | null {
       if (name) {
         const value = propertyValueToString(decl)
         if (value) {
-          return { name, value }
+          const varRefs = extractVarNamesFromTokens(unparsedValue.value ?? [])
+          return { name, value, ...(varRefs.length > 0 && { varRefs }) }
         }
       }
       return null
@@ -412,7 +413,7 @@ function serializeCustomPropertyValue(valueArray: unknown[]): string {
       } else if (tokenValue.type === 'dimension') {
         parts.push(`${tokenValue.value}${tokenValue.unit}`)
       } else if (tokenValue.type === 'white-space') {
-        parts.push(tokenValue.value as string)
+        // skip — parts.join(' ') already handles separation
       }
     }
   }

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

@@ -4,6 +4,45 @@ import type { ExtractedCssInfo } from '../../index'
 import type { ExtractedElement } from '../react/extractors/core/tree-builder'
 import type { CSSProperty, CssSelectorMatch, MatchedCssData } from './types'
 
+/**
+ * Matches selectors composed entirely of one or more class selectors with no combinators,
+ * pseudo-classes, tag names, or IDs — e.g. `.wrapper`, `.wrapper.active`.
+ * Used to identify selectors eligible for CSS module prefix matching.
+ */
+const SIMPLE_CLASS_SELECTOR_PATTERN = /^(\.[a-zA-Z][\w-]*)+$/
+
+/**
+ * Finds DOM elements matching a CSS selector, with special handling for CSS module files.
+ *
+ * For CSS module files, class names in the source CSS (e.g. `.wrapper`) are hashed at build
+ * time into names like `wrapper_AbCdE`. When the selector is a simple class selector
+ * (e.g. `.wrapper` or `.wrapper.active`), this function matches elements whose class list
+ * contains a class that exactly equals the local name OR starts with `localName_` /
+ * `_localName_` (the two most common Vite CSS module hash patterns).
+ *
+ * For non-module files, or for selectors that contain combinators or non-class parts
+ * (e.g. `div .wrapper`, `#id`), falls back to a direct Cheerio query.
+ */
+function findMatchingElements($: cheerio.CheerioAPI, domSelector: string, isCssModule: boolean) {
+  if (isCssModule && SIMPLE_CLASS_SELECTOR_PATTERN.test(domSelector)) {
+    const classNames = domSelector.split('.').filter(Boolean)
+    return $('[class]').filter((_index, element) => {
+      const classAttr = $(element).attr('class')
+      if (!classAttr) return false
+      const elementClasses = classAttr.trim().split(/\s+/)
+      return classNames.every((localName) =>
+        elementClasses.some(
+          (elementClass) =>
+            elementClass === localName ||
+            elementClass.startsWith(`${localName}_`) ||
+            elementClass.startsWith(`_${localName}_`),
+        ),
+      )
+    })
+  }
+  return $(domSelector)
+}
+
 export function matchCssSelectors(
   html: string,
   elements: ExtractedElement[],
@@ -28,8 +67,8 @@ export function matchCssSelectors(
       if (!domSelector) continue
 
       try {
-        $(domSelector).each((_, elem) => {
-          const traceId = $(elem).attr(TRACE_ATTR)
+        findMatchingElements($, domSelector, cssInfo.isCssModule).each((_index, element) => {
+          const traceId = $(element).attr(TRACE_ATTR)
           if (!traceId) return
 
           // Use reduce to separate regular and custom properties in one pass
@@ -37,13 +76,13 @@ export function matchCssSelectors(
             regular: CSSProperty[]
             custom: Record<string, string>
           }>(
-            (acc, prop) => {
+            (accumulator, prop) => {
               if (prop.name.startsWith('--')) {
-                acc.custom[prop.name] = prop.value
+                accumulator.custom[prop.name] = prop.value
               } else {
-                acc.regular.push(prop)
+                accumulator.regular.push(prop)
               }
-              return acc
+              return accumulator
             },
             { regular: [], custom: {} },
           )
@@ -55,7 +94,7 @@ export function matchCssSelectors(
 
             // Track which CSS custom properties are used (via var()) by this element
             for (const regularProp of regular) {
-              for (const varName of extractVarRefs(regularProp.value)) {
+              for (const varName of regularProp.varRefs ?? []) {
                 const traceIdSet = varUsedByTraceId.get(varName) ?? new Set()
                 traceIdSet.add(traceId)
                 varUsedByTraceId.set(varName, traceIdSet)
@@ -81,20 +120,6 @@ export function matchCssSelectors(
   }
 }
 
-/**
- * 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(
   elements: ExtractedElement[],
   matchesByTraceId: Map<string, CssSelectorMatch[]>,

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

@@ -1,6 +1,8 @@
 export interface CSSProperty {
   name: string
   value: string
+  /** CSS variable names referenced via var() in this property's value */
+  varRefs?: string[]
 }
 
 export interface CssSelectorMatch {

package/src/information-extractors/react/extractors/css-properties.ts

@@ -5,6 +5,7 @@
  * based on its tag, role, and whether it has text content.
  */
 
+import { CSS_PROPERTIES } from '@wix/zero-config-schema'
 import type { CreateElementEvent, ReactExtractor } from './core/types'
 
 // ─────────────────────────────────────────────────────────────────────────────
@@ -62,41 +63,50 @@ const INTERACTIVE_TAGS = new Set(['button', 'input', 'textarea', 'select'])
 /**
  * CSS properties for Layout Containers and Interactive Elements
  */
+const { CSS_PROPERTY_TYPE } = CSS_PROPERTIES
+
 const CONTAINER_CSS_PROPERTIES = [
-  'background',
-  'border-block-start',
-  'border-block-end',
-  'border-inline-start',
-  'border-inline-end',
-  'padding-block-start',
-  'padding-block-end',
-  'padding-inline-start',
-  'padding-inline-end',
-  'border-start-start-radius',
-  'border-start-end-radius',
-  'border-end-start-radius',
-  'border-end-end-radius',
-  'box-shadow',
+  CSS_PROPERTY_TYPE.background,
+  CSS_PROPERTY_TYPE.borderTop,
+  CSS_PROPERTY_TYPE.borderBottom,
+  CSS_PROPERTY_TYPE.borderInlineStart,
+  CSS_PROPERTY_TYPE.borderInlineEnd,
+  CSS_PROPERTY_TYPE.paddingTop,
+  CSS_PROPERTY_TYPE.paddingBottom,
+  CSS_PROPERTY_TYPE.paddingInlineStart,
+  CSS_PROPERTY_TYPE.paddingInlineEnd,
+  CSS_PROPERTY_TYPE.borderStartStartRadius,
+  CSS_PROPERTY_TYPE.borderStartEndRadius,
+  CSS_PROPERTY_TYPE.borderEndStartRadius,
+  CSS_PROPERTY_TYPE.borderEndEndRadius,
+  CSS_PROPERTY_TYPE.boxShadow,
 ]
 
 /**
  * CSS properties for Text elements and leaf elements with textContent
  */
-const TEXT_CSS_PROPERTIES = ['font', 'line-height', 'letter-spacing', 'text-decoration']
+const TEXT_CSS_PROPERTIES = [
+  CSS_PROPERTY_TYPE.font,
+  CSS_PROPERTY_TYPE.lineHeight,
+  CSS_PROPERTY_TYPE.letterSpacing,
+  CSS_PROPERTY_TYPE.textDecorationLine,
+  CSS_PROPERTY_TYPE.textTransform,
+  CSS_PROPERTY_TYPE.color,
+]
 
 /**
  * CSS properties for Media elements (excluding svg)
  */
 const MEDIA_CSS_PROPERTIES = [
-  'border-block-start',
-  'border-block-end',
-  'border-inline-start',
-  'border-inline-end',
-  'border-start-start-radius',
-  'border-start-end-radius',
-  'border-end-start-radius',
-  'border-end-end-radius',
-  'box-shadow',
+  CSS_PROPERTY_TYPE.borderTop,
+  CSS_PROPERTY_TYPE.borderBottom,
+  CSS_PROPERTY_TYPE.borderInlineStart,
+  CSS_PROPERTY_TYPE.borderInlineEnd,
+  CSS_PROPERTY_TYPE.borderStartStartRadius,
+  CSS_PROPERTY_TYPE.borderStartEndRadius,
+  CSS_PROPERTY_TYPE.borderEndStartRadius,
+  CSS_PROPERTY_TYPE.borderEndEndRadius,
+  CSS_PROPERTY_TYPE.boxShadow,
 ]
 
 // ─────────────────────────────────────────────────────────────────────────────

package/src/manifest-pipeline.ts

@@ -36,6 +36,7 @@ export interface ExtractedCssInfo {
   api: CSSParserAPI
   properties: Map<string, string>
   customProperties: Map<string, string>
+  isCssModule: boolean
 }
 
 export interface ComponentInfoWithCss extends CoupledComponentInfo {
@@ -378,6 +379,7 @@ function extractCssInfo(
         api,
         properties,
         customProperties,
+        isCssModule: /\.module\.(css|scss|sass)$/.test(cssPath),
       })
     } catch (error) {
       warnings.push({

package/src/module-loader.ts

@@ -1,5 +1,4 @@
 import { createRequire } from 'node:module'
-import { pascalCase } from 'case-anything'
 import { ResultAsync, errAsync, okAsync } from 'neverthrow'
 import type { ComponentType } from 'react'
 import { IoError } from './errors'
@@ -37,12 +36,8 @@ export function loadModule(entryPath: string): ResultAsync<Record<string, unknow
   })
 }
 
-function isPascalCase(name: string): boolean {
-  return name.length > 0 && pascalCase(name) === name
-}
-
 function isComponent(value: unknown): value is ComponentType<unknown> {
-  if (typeof value === 'function') return isPascalCase(value.name)
+  if (typeof value === 'function') return true
   // React.memo() and React.forwardRef() return objects, not functions
   if (typeof value === 'object' && value !== null && '$$typeof' in value) return true
   return false
@@ -51,7 +46,7 @@ function isComponent(value: unknown): value is ComponentType<unknown> {
 export function findComponent(moduleExports: Record<string, unknown>, name: string): ComponentType<unknown> | null {
   // Direct named export
   const direct = moduleExports[name]
-  if ((typeof direct === 'function' && isPascalCase(name)) || isComponent(direct)) {
+  if (isComponent(direct)) {
     return direct as ComponentType<unknown>
   }