@wix/zero-config-implementation 1.32.0 → 1.33.0

package/package.json

@@ -4,7 +4,7 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "version": "1.32.0",
+  "version": "1.33.0",
   "description": "Core library for extracting component manifests from JS and CSS files",
   "type": "module",
   "main": "dist/index.js",
@@ -45,10 +45,11 @@
   },
   "dependencies": {
     "@wix/zero-config-schema": "1.1.0",
-    "lightningcss": "^1.31.1"
+    "css-tree": "^3.2.1"
   },
   "devDependencies": {
     "@faker-js/faker": "^10.2.0",
+    "@types/css-tree": "^2.3.11",
     "@types/node": "^20.0.0",
     "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.1",
@@ -83,5 +84,5 @@
       ]
     }
   },
-  "falconPackageHash": "459bf8c730865e0703e2a8248d887164542b0044ede2b6bcdae37271"
+  "falconPackageHash": "f8e67fc7279e8f0ef3dcc174a79f27788a086507530da6f9c3b5f169"
 }

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

@@ -1,10 +1,16 @@
 import { CSS_PROPERTIES } from '@wix/zero-config-schema'
 import { camelCase } from 'case-anything'
-import { transform } from 'lightningcss'
-import type { TokenOrValue } from 'lightningcss'
+import { generate, lexer, parse, walk } from 'css-tree'
+import type { Atrule, CssNode, Declaration, FunctionNode, Rule, Selector } from 'css-tree'
 import type { CSSParserAPI, CSSProperty } from './types'
-// Store parsed selectors for later DOM selector computation
-const parsedSelectors = new Map<string, unknown[]>()
+
+type WalkContext = {
+  atrule?: Atrule | null
+}
+
+function isInsideKeyframes(currentContext: WalkContext): boolean {
+  return currentContext.atrule?.name === 'keyframes'
+}
 
 /**
  * Factory function that parses CSS and returns an API to query the parsed result
@@ -12,11 +18,8 @@ const parsedSelectors = new Map<string, unknown[]>()
  * @returns API object with methods to query the parsed CSS
  */
 export function parseCss(cssString: string): CSSParserAPI {
-  // Clear previous selectors for this parse
-  parsedSelectors.clear()
-
-  // Parse all properties eagerly at initialization using lightningcss
-  const { propertiesMap: allProperties, varUsagesByProperty } = parseAllProperties(cssString)
+  const parsedSelectors = new Map<string, Selector>()
+  const { propertiesMap: allProperties, varUsagesByProperty } = parseAllProperties(cssString, parsedSelectors)
 
   return {
     getPropertiesForSelector(selector: string): CSSProperty[] {
@@ -76,14 +79,17 @@ export function parseCss(cssString: string): CSSParserAPI {
 }
 
 /**
- * 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.
+ * Parses all selectors and their properties from the CSS using css-tree.
+ * Also builds a direct map of var() usages by walking declaration value ASTs.
  * Supports @media rules, @keyframes, and nested selectors
  * @param cssString - CSS string to parse
+ * @param parsedSelectors - Map to store extracted Selectors for DOM matching
  * @returns propertiesMap (selector → properties) and varUsagesByProperty (varName → CSS property names)
  */
-function parseAllProperties(cssString: string): {
+function parseAllProperties(
+  cssString: string,
+  parsedSelectors: Map<string, Selector>,
+): {
   propertiesMap: Map<string, CSSProperty[]>
   varUsagesByProperty: Map<string, Set<string>>
 } {
@@ -91,106 +97,51 @@ function parseAllProperties(cssString: string): {
   const varUsagesByProperty = new Map<string, Set<string>>()
 
   try {
-    // Use lightningcss transform with visitor to collect properties
-    // Note: We don't return the rule from visitors - just collect data
-    transform({
-      filename: 'input.css',
-      code: Buffer.from(cssString),
-      minify: false,
-      visitor: {
-        Rule: {
-          style(rule) {
-            try {
-              // Extract selector string from the rule
-              const selectors = rule.value.selectors
-              if (!selectors?.length) return undefined
-
-              // Convert selector AST to string representation and store parsed selectors
-              const selectorStrings = selectors.map((sel: unknown[]) => {
-                const str = selectorToString(sel)
-                parsedSelectors.set(str, sel)
-                return str
-              })
-
-              // Extract properties from declarations
-              const properties: CSSProperty[] = []
-              for (const decl of rule.value.declarations?.declarations ?? []) {
-                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
-              if (properties.length > 0) {
-                for (const selector of selectorStrings) {
-                  const existing = propertiesMap.get(selector) ?? []
-                  propertiesMap.set(selector, [...existing, ...properties])
-                }
-              }
-            } catch {
-              // Skip rules that can't be processed
+    const ast = parse(cssString, { parseCustomProperty: true })
+
+    walk(ast, {
+      visit: 'Rule',
+      enter(this: WalkContext, rule: Rule) {
+        try {
+          const properties: CSSProperty[] = []
+          for (const child of rule.block.children) {
+            if (child.type !== 'Declaration') continue
+            const extracted = extractProperty(child, varUsagesByProperty)
+            if (extracted) {
+              properties.push(extracted)
             }
+          }
+
+          if (properties.length === 0) return
 
-            return undefined
-          },
-
-          keyframes(rule) {
-            try {
-              // Extract @keyframes name and its keyframe selectors
-              const keyframeName = rule.value.name.type === 'ident' ? rule.value.name.value : rule.value.name.value
-
-              for (const keyframe of rule.value.keyframes) {
-                // Each keyframe has selectors like 'from', 'to', '50%'
-                const keyframeSelectors = keyframe.selectors.map((selector) => {
-                  if (typeof selector === 'string') return selector
-                  if ('percentage' in selector) return `${selector.percentage}%`
-                  return String(selector)
-                })
-
-                const properties: CSSProperty[] = []
-                for (const decl of keyframe.declarations?.declarations ?? []) {
-                  const extracted = extractPropertyNameAndValue(decl)
-                  if (extracted) {
-                    properties.push(extracted)
-                  }
-                }
-
-                if (properties.length > 0) {
-                  for (const selector of keyframeSelectors) {
-                    const fullSelector = `@keyframes ${keyframeName} ${selector}`
-                    const existing = propertiesMap.get(fullSelector) ?? []
-                    propertiesMap.set(fullSelector, [...existing, ...properties])
-                  }
-                }
-              }
-            } catch {
-              // Skip keyframes that can't be processed
+          const selectorStrings: string[] = []
+
+          if (isInsideKeyframes(this)) {
+            const keyframeName = this.atrule?.prelude ? generate(this.atrule.prelude).trim() : ''
+            if (!keyframeName) return
+
+            const keyframeSelector = generate(rule.prelude).trim()
+            selectorStrings.push(`@keyframes ${keyframeName} ${keyframeSelector}`)
+          } else {
+            if (rule.prelude.type !== 'SelectorList') return
+            for (const selectorNode of rule.prelude.children) {
+              if (selectorNode.type !== 'Selector') continue
+              const selectorString = generate(selectorNode)
+              parsedSelectors.set(selectorString, selectorNode)
+              selectorStrings.push(selectorString)
             }
+          }
 
-            return undefined
-          },
-        },
+          for (const selectorString of selectorStrings) {
+            const existing = propertiesMap.get(selectorString) ?? []
+            propertiesMap.set(selectorString, [...existing, ...properties])
+          }
+        } catch {
+          // Skip rules that can't be processed
+        }
       },
     })
   } catch (error) {
-    // If parsing fails, return empty map
     console.error('CSS parsing error:', error)
   }
 
@@ -198,381 +149,106 @@ function parseAllProperties(cssString: string): {
 }
 
 /**
- * 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).
+ * Extracts property name, value, and var() references from a css-tree Declaration node.
+ * Also records var() usages in the provided tracking map.
  */
-function extractVarNamesFromTokens(tokens: unknown[]): string[] {
-  const varNames: string[] = []
+function extractProperty(declaration: Declaration, varUsagesByProperty: Map<string, Set<string>>): CSSProperty | null {
+  try {
+    const name = declaration.property
+    const value = generate(declaration.value)
+    if (!name || !value) return null
 
-  for (const token of tokens) {
-    if (!token || typeof token !== 'object') continue
-    const tokenObj = token as Record<string, unknown>
+    const varRefs = extractVarNames(declaration.value)
 
-    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))
-      }
+    for (const varName of varRefs) {
+      const usageSet = varUsagesByProperty.get(varName) ?? new Set<string>()
+      usageSet.add(name)
+      varUsagesByProperty.set(varName, usageSet)
     }
-  }
-
-  return varNames
-}
 
-/**
- * Converts a single selector component to a string
- */
-function selectorComponentToString(component: unknown): string {
-  if (!component || typeof component !== 'object') return ''
-  const comp = component as Record<string, unknown>
-
-  try {
-    if (comp.type === 'class') {
-      return `.${comp.name}`
-    }
-    if (comp.type === 'id') {
-      return `#${comp.name}`
-    }
-    if (comp.type === 'type') {
-      return comp.name as string
-    }
-    if (comp.type === 'universal') {
-      return '*'
-    }
-    if (comp.type === 'attribute') {
-      const attr = comp as { name: string; operation?: { operator: string; value: string } }
-      if (attr.operation) {
-        return `[${attr.name}${attr.operation.operator}"${attr.operation.value}"]`
-      }
-      return `[${attr.name}]`
-    }
-    if (comp.type === 'pseudo-class') {
-      const pseudo = comp as { kind: string; name?: string }
-      return `:${pseudo.kind === 'custom' ? pseudo.name : pseudo.kind}`
-    }
-    if (comp.type === 'pseudo-element') {
-      const pseudo = comp as { kind: string; name?: string }
-      return `::${pseudo.kind === 'custom' ? pseudo.name : pseudo.kind}`
-    }
-    if (comp.type === 'combinator') {
-      const combinator = comp.value as string
-      if (combinator === 'descendant') return ' '
-      if (combinator === 'child') return ' > '
-      if (combinator === 'next-sibling') return ' + '
-      if (combinator === 'later-sibling') return ' ~ '
+    if (varRefs.length > 0) {
+      return { name, value, varRefs }
     }
+    return { name, value }
   } catch {
-    // Skip components that can't be processed
+    return null
   }
-
-  return ''
 }
 
 /**
- * Converts a selector AST node to a string
+ * Extracts all CSS custom property names referenced via var() by walking
+ * the declaration value AST for Function nodes named "var".
  */
-function selectorToString(selector: unknown[]): string {
-  return selector.map(selectorComponentToString).join('')
+function extractVarNames(valueNode: CssNode): string[] {
+  const varNames: string[] = []
+
+  walk(valueNode, {
+    visit: 'Function',
+    enter(functionNode: FunctionNode) {
+      if (functionNode.name !== 'var') return
+
+      const firstChild = functionNode.children.first
+      if (firstChild && firstChild.type === 'Identifier') {
+        const identName = firstChild.name
+        varNames.push(identName.startsWith('--') ? identName : `--${identName}`)
+      }
+    },
+  })
+
+  return varNames
 }
 
 /**
  * Builds a DOM-queryable selector by filtering out pseudo-classes and pseudo-elements.
  * Returns null if the selector contains pseudo-elements (unmatchable against real DOM).
  */
-function buildDomSelector(selector: unknown[]): string | null {
+function buildDomSelector(selector: Selector): string | null {
   const parts: string[] = []
 
-  for (const component of selector) {
-    if (!component || typeof component !== 'object') continue
-    const comp = component as Record<string, unknown>
-
-    // Pseudo-elements cannot be matched against real DOM
-    if (comp.type === 'pseudo-element') {
+  for (const component of selector.children) {
+    if (component.type === 'PseudoElementSelector') {
       return null
     }
-
-    // Skip pseudo-classes (they apply to states, not static DOM)
-    if (comp.type === 'pseudo-class') {
+    if (component.type === 'PseudoClassSelector') {
       continue
     }
-
-    parts.push(selectorComponentToString(component))
+    parts.push(generate(component))
   }
 
   const result = parts.join('')
   return result || null
 }
 
-// Type for lightningcss declaration with custom property support
-interface LightningDecl {
-  property: string
-  value: unknown
-}
-
-interface CustomPropertyValue {
-  name: string
-  value: TokenOrValue[]
-}
-
-/**
- * Extracts the property name and value from a lightningcss declaration.
- * Handles special cases like custom properties (CSS variables) and unparsed values.
- */
-function extractPropertyNameAndValue(decl: LightningDecl): CSSProperty | null {
-  try {
-    // Handle CSS custom properties (variables)
-    if (decl.property === 'custom') {
-      const customValue = decl.value as CustomPropertyValue
-      const name = customValue.name // e.g., "--primary-color"
-      const value = serializeCustomPropertyValue(customValue.value)
-      if (name && value) {
-        return { name, value }
-      }
-      return null
-    }
-
-    // Handle unparsed properties (e.g., properties using var())
-    if (decl.property === 'unparsed') {
-      const unparsedValue = decl.value as { propertyId: { property: string }; value: unknown[] }
-      const name = unparsedValue.propertyId?.property
-      if (name) {
-        const value = propertyValueToString(decl)
-        if (value) {
-          const varRefs = extractVarNamesFromTokens(unparsedValue.value ?? [])
-          return { name, value, ...(varRefs.length > 0 && { varRefs }) }
-        }
-      }
-      return null
-    }
-
-    // Standard property
-    const name = propertyNameToString(decl.property)
-    const value = propertyValueToString(decl)
-    if (name && value) {
-      return { name, value }
-    }
-    return null
-  } catch {
-    return null
-  }
-}
-
-/**
- * Serializes a custom property value array to a CSS string
- */
-function serializeCustomPropertyValue(valueArray: unknown[]): string {
-  const parts: string[] = []
-
-  for (const token of valueArray) {
-    if (!token || typeof token !== 'object') continue
-    const t = token as Record<string, unknown>
-
-    if (t.type === 'color') {
-      const color = t.value as Record<string, unknown>
-      if (color.type === 'rgb') {
-        const r = color.r as number
-        const g = color.g as number
-        const b = color.b as number
-        const a = color.alpha as number
-        if (a === 1) {
-          parts.push(`#${toHex(r)}${toHex(g)}${toHex(b)}`)
-        } else {
-          parts.push(`rgba(${r}, ${g}, ${b}, ${a})`)
-        }
-      }
-    } 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') {
-        // skip — parts.join(' ') already handles separation
-      }
-    }
-  }
-
-  return parts.join(' ')
-}
-
-function toHex(n: number): string {
-  return Math.round(n).toString(16).padStart(2, '0')
-}
-
-/**
- * Converts a property name enum to a CSS property string
- */
-function propertyNameToString(property: string): string {
-  // lightningcss provides property names in kebab-case format
-  // Handle both string names and enum values
-  if (typeof property === 'string') {
-    // Convert camelCase to kebab-case if needed
-    return property.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`)
-  }
-  return String(property)
-}
-
-/**
- * Converts a declaration AST back to a CSS string using lightningcss's own serializer.
- * This approach uses lightningcss transform with a visitor to inject the AST node
- * into a dummy rule, then extracts the serialized value from the output.
- */
-function propertyValueToString(decl: { value: unknown; property: string }): string {
-  try {
-    // Create a dummy CSS rule with a placeholder value
-    const dummyCss = `.x { ${decl.property}: 0; }`
-
-    const result = transform({
-      filename: 'input.css',
-      code: Buffer.from(dummyCss),
-      minify: false,
-      visitor: {
-        // Use property-specific visitor by creating an object with the property name as key
-        Declaration: {
-          [decl.property]: () => decl,
-        } as Record<string, () => typeof decl>,
-      },
-    })
-
-    // Extract just the property value from the output
-    const output = result.code.toString()
-    const match = output.match(/\.x\s*\{\s*([^}]+)\s*\}/)
-
-    if (match) {
-      // Parse the property: value pair and extract just the value
-      const declaration = match[1].trim()
-      const colonIndex = declaration.indexOf(':')
-      if (colonIndex !== -1) {
-        return declaration
-          .slice(colonIndex + 1)
-          .trim()
-          .replace(/;$/, '')
-      }
-    }
-
-    return ''
-  } catch {
-    // Fallback for any errors
-    return ''
-  }
-}
-
-/**
- * Checks if a CSS property value is a shorthand (has multiple space-separated values)
- * Ignores spaces inside parentheses (like in var() or calc())
- */
-function isShorthandValue(value: string): boolean {
-  let depth = 0
-  let result = ''
-
-  for (const char of value) {
-    if (char === '(') {
-      depth++
-    } else if (char === ')') {
-      depth--
-    } else if (depth === 0) {
-      result += char
-    }
-  }
-
-  return result.trim().includes(' ')
-}
-
 /**
- * Escapes special regex characters in a string to use it as a literal pattern
+ * 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.
+ * The `error` field is null on a successful match (the typed `matched` field is not
+ * exposed by @types/css-tree, so we check `error` instead).
  */
-function escapeRegex(str: string): string {
-  return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+function matchesCssType(typeName: string, value: CssNode): boolean {
+  return !lexer.matchType(typeName, value).error
 }
 
-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.
+ * Uses css-tree's lexer to match the value against known CSS types.
  * 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
-          },
-        },
-      },
-    })
+    const valueAst = parse(defaultValue, { context: 'value' })
+
+    if (matchesCssType('color', valueAst)) return CSS_DATA_TYPE.color
+    if (matchesCssType('length', valueAst)) return CSS_DATA_TYPE.length
+    if (matchesCssType('angle', valueAst)) return CSS_DATA_TYPE.angle
+    if (matchesCssType('time', valueAst)) return CSS_DATA_TYPE.time
+    if (matchesCssType('number', valueAst)) return CSS_DATA_TYPE.number
+    if (matchesCssType('percentage', valueAst)) return CSS_DATA_TYPE.percentage
   } catch {
     // Fall back to 'string' if parsing fails
   }
 
-  return inferredType
+  return CSS_DATA_TYPE.string
 }

package/vite.config.ts

@@ -22,8 +22,8 @@ export default defineConfig(({ mode }) => ({
     },
     rollupOptions: {
       external: (id) => {
-        // Externalize Node.js built-ins (both node: prefixed and bare), typescript (peer dep), and lightningcss (native bindings)
-        if (id.startsWith('node:') || builtinModules.includes(id) || ['typescript', 'lightningcss'].includes(id)) {
+        // Externalize Node.js built-ins (both node: prefixed and bare) and typescript (peer dep)
+        if (id.startsWith('node:') || builtinModules.includes(id) || id === 'typescript') {
           return true
         }
         // Externalize React so the host project's React instance is used at runtime.