@wix/zero-config-implementation 1.105.0 → 1.107.0

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

@@ -9,7 +9,7 @@ import type {
   CssDataType,
   NativePseudoClass,
   RegisteredCustomProperty,
-  RegisteredPropertyRange,
+  SelectorStateScope,
   StateClassRule,
 } from './types'
 
@@ -29,6 +29,7 @@ function isInsideKeyframes(currentContext: WalkContext): boolean {
 export function parseCss(cssString: string): CSSParserAPI {
   const parsedSelectors = new Map<string, Selector>()
   const { propertiesMap: allProperties, varUsagesByProperty } = parseAllProperties(cssString, parsedSelectors)
+  const stateScopeBySelector = new Map<string, SelectorStateScope>()
   const stateClasses = parseStateClasses(cssString)
   const registeredProperties = parseRegisteredProperties(cssString)
 
@@ -85,6 +86,15 @@ export function parseCss(cssString: string): CSSParserAPI {
       return getSelectorSpecificity(parsed)
     },
 
+    getSelectorStateScope(selector: string): SelectorStateScope {
+      const cachedScope = stateScopeBySelector.get(selector)
+      if (cachedScope) return cachedScope
+      const parsed = parsedSelectors.get(selector)
+      const scope = parsed ? classifySelectorStateScope(parsed) : REGULAR_SCOPE
+      stateScopeBySelector.set(selector, scope)
+      return scope
+    },
+
     getVarPropertyType(varName: string): string | undefined {
       // A `@property` registration is the declared type and wins over usage inference.
       const normalizedVarName = varName.startsWith('--') ? varName : `--${varName}`
@@ -145,6 +155,10 @@ function parseAllProperties(
 
         const selectorStrings: string[] = []
 
+        if (this.atrule && !isInsideKeyframes(this)) {
+          for (const property of properties) property.inAtRule = true
+        }
+
         if (isInsideKeyframes(this)) {
           const keyframeName = this.atrule?.prelude ? generate(this.atrule.prelude).trim() : ''
           if (!keyframeName) return
@@ -522,19 +536,6 @@ function extractAtruleDescriptors(block: CssNode): Map<string, string> {
   return descriptors
 }
 
-/** Picks the range descriptors out of the block; css-tree collects them like any other declaration. */
-function extractRangeDescriptors(descriptors: Map<string, string>): RegisteredPropertyRange | undefined {
-  const min = descriptors.get('--min')
-  const max = descriptors.get('--max')
-  const step = descriptors.get('--step')
-  if (min === undefined && max === undefined && step === undefined) return undefined
-  return {
-    ...(min !== undefined && { min }),
-    ...(max !== undefined && { max }),
-    ...(step !== undefined && { step }),
-  }
-}
-
 /**
  * Walks the stylesheet for `@property` at-rules and builds a map of registered custom
  * properties keyed by the `--`-prefixed variable name.
@@ -562,13 +563,11 @@ function parseRegisteredProperties(cssString: string): Map<string, RegisteredCus
       if (!resolved) return
       const { cssPropertyType, enumOptions } = resolved
       const initialValue = descriptors.get('initial-value')
-      const range = extractRangeDescriptors(descriptors)
 
       registered.set(varName, {
         cssPropertyType,
         ...(enumOptions && { enumOptions }),
         ...(initialValue !== undefined && { defaultValue: initialValue }),
-        ...(range && { range }),
       })
     },
   })
@@ -664,14 +663,8 @@ function analyzeCompound(componentNodes: CssNode[]): AnalyzedCompound | null {
   return { base, pseudoClass, modifiers }
 }
 
-/**
- * Splits a selector into compound selectors at combinators and analyzes each. A
- * `:global(.modifier)` (or native pseudo) belongs to the compound it is attached to,
- * so ancestor/descendant compounds in the same selector are ignored for the base —
- * e.g. `.header:global(.x--selected) .label` resolves to base `.header`, not
- * `.header .label`. Returns one entry per compound that carries a modifier or pseudo.
- */
-function analyzeStateSelector(selector: Selector): AnalyzedCompound[] {
+/** Splits a selector into its compound selectors (the parts between combinators), in order. */
+function splitIntoCompounds(selector: Selector): CssNode[][] {
   const compounds: CssNode[][] = [[]]
   for (const component of selector.children) {
     if (component.type === 'Combinator') {
@@ -680,6 +673,18 @@ function analyzeStateSelector(selector: Selector): AnalyzedCompound[] {
       compounds[compounds.length - 1].push(component)
     }
   }
+  return compounds
+}
+
+/**
+ * Splits a selector into compound selectors at combinators and analyzes each. A
+ * `:global(.modifier)` (or native pseudo) belongs to the compound it is attached to,
+ * so ancestor/descendant compounds in the same selector are ignored for the base —
+ * e.g. `.header:global(.x--selected) .label` resolves to base `.header`, not
+ * `.header .label`. Returns one entry per compound that carries a modifier or pseudo.
+ */
+function analyzeStateSelector(selector: Selector): AnalyzedCompound[] {
+  const compounds = splitIntoCompounds(selector)
 
   const results: AnalyzedCompound[] = []
   for (const compoundNodes of compounds) {
@@ -747,6 +752,90 @@ function parseStateClasses(cssString: string): StateClassRule[] {
   return results
 }
 
+// Dynamic pseudo-classes mapped to the design-state name a selector styles. Broader than
+// NATIVE_PSEUDO_BY_NAME: `:active`/`:checked` aren't native editor states, but a rule using
+// them still styles a state (e.g. the custom `active` state of `.root:global(.x--active), .root:active`)
+// and must not leak into the regular default. These names follow the pseudo-class, so they do
+// not line up with prop-derived custom states (`isActive` → `is-active`). `:focus-within` (a
+// descendant has focus) also maps to `focus`: the schema has a single focus state per element.
+const STATE_NAME_BY_PSEUDO: Record<string, string> = {
+  hover: 'hover',
+  active: 'active',
+  focus: 'focus',
+  'focus-visible': 'focus',
+  'focus-within': 'focus',
+  disabled: 'disabled',
+  invalid: 'invalid',
+  checked: 'checked',
+}
+
+// Pseudo-classes whose selector-list argument matches the element itself, so a state
+// condition inside them (`:is(:hover, :focus)`, `:is(:global(.x--selected))`) makes the
+// rule state-dependent.
+const SELECTOR_LIST_PSEUDO_NAMES = new Set(['is', 'where', 'has', 'matches'])
+
+const REGULAR_SCOPE: SelectorStateScope = { kind: 'regular' }
+const UNMAPPED_STATE_SCOPE: SelectorStateScope = { kind: 'unmappedState' }
+
+/** True when a node contains a state pseudo-class or a `:global(.modifier)` state class. */
+function containsStateCondition(node: CssNode): boolean {
+  let found = false
+  walk(node, (childNode) => {
+    if (
+      childNode.type === 'PseudoClassSelector' &&
+      (STATE_NAME_BY_PSEUDO[childNode.name] !== undefined || childNode.name === 'global')
+    ) {
+      found = true
+    }
+  })
+  return found
+}
+
+/**
+ * Collects the design-state names a single compound selector is conditioned on: its
+ * `:global(.modifier)` classes (split from the base exactly as `parseStateClasses` does)
+ * and its dynamic pseudo-classes. Returns null when a state condition is nested in a
+ * selector-list pseudo (`:is(:hover)`, `:is(:global(.x--selected))`), which cannot be
+ * attributed to a single state.
+ */
+function collectCompoundStateNames(compoundNodes: CssNode[]): Set<string> | null {
+  const stateNames = new Set<string>()
+  for (const modifier of analyzeCompound(compoundNodes)?.modifiers ?? []) {
+    stateNames.add(stateNameFromModifier(modifier))
+  }
+  for (const component of compoundNodes) {
+    if (component.type !== 'PseudoClassSelector') continue
+    const pseudoStateName = STATE_NAME_BY_PSEUDO[component.name]
+    if (pseudoStateName) {
+      stateNames.add(pseudoStateName)
+    } else if (SELECTOR_LIST_PSEUDO_NAMES.has(component.name) && containsStateCondition(component)) {
+      return null
+    }
+  }
+  return stateNames
+}
+
+/**
+ * Classifies which appearance of its subject (last) compound a selector styles. A state is
+ * attributed only when the subject alone carries exactly one state name; a state on an
+ * ancestor compound, several distinct states, or a nested state pseudo is `unmappedState`.
+ * `:not(...)` is ignored — `:not([dir])` and `:not(:disabled)` hold in the regular appearance.
+ */
+function classifySelectorStateScope(selector: Selector): SelectorStateScope {
+  const compounds = splitIntoCompounds(selector)
+
+  const subjectCompound = compounds[compounds.length - 1]
+  for (const ancestorCompound of compounds.slice(0, -1)) {
+    const ancestorStateNames = collectCompoundStateNames(ancestorCompound)
+    if (!ancestorStateNames || ancestorStateNames.size > 0) return UNMAPPED_STATE_SCOPE
+  }
+
+  const subjectStateNames = collectCompoundStateNames(subjectCompound)
+  if (!subjectStateNames || subjectStateNames.size > 1) return UNMAPPED_STATE_SCOPE
+  const [stateName] = subjectStateNames
+  return stateName ? { kind: 'state', stateName } : REGULAR_SCOPE
+}
+
 /**
  * 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).

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

@@ -50,9 +50,9 @@ export function matchCssSelectors(
 ): { 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>>()
+  // Build traceId -> matches map, split by the appearance (regular / per-state) each selector styles
+  const regularByTraceId = new Map<string, ScopedCssData>()
+  const stateByTraceId = new Map<string, Map<string, ScopedCssData>>()
   const varUsedByTraceId = new Map<string, Set<string>>()
 
   for (const cssInfo of cssInfos) {
@@ -66,6 +66,8 @@ export function matchCssSelectors(
       const domSelector = cssInfo.api.getDomSelector(selector)
       if (!domSelector) continue
 
+      const stateScope = cssInfo.api.getSelectorStateScope(selector)
+
       try {
         const selectorSpecificity = cssInfo.api.getSelectorSpecificity(selector) ?? [0, 0, 0]
 
@@ -76,39 +78,46 @@ export function matchCssSelectors(
           // Use reduce to separate regular and custom properties in one pass
           const { regular, custom } = properties.reduce<{
             regular: CSSProperty[]
-            custom: Record<string, string>
+            custom: CSSProperty[]
           }>(
             (accumulator, prop) => {
               if (prop.name.startsWith('--')) {
-                accumulator.custom[prop.name] = prop.value
+                accumulator.custom.push(prop)
               } else {
                 accumulator.regular.push(prop)
               }
               return accumulator
             },
-            { regular: [], custom: {} },
+            { regular: [], custom: [] },
           )
 
-          if (regular.length > 0) {
-            const existing = matchesByTraceId.get(traceId) ?? []
-            existing.push({ selector, properties: regular, specificity: selectorSpecificity })
-            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 regularProp.varRefs ?? []) {
-                const traceIdSet = varUsedByTraceId.get(varName) ?? new Set()
-                traceIdSet.add(traceId)
-                varUsedByTraceId.set(varName, traceIdSet)
-              }
+          // Track which CSS custom properties are used (via var()) by this element — in every
+          // scope, so a variable read only under `:hover` is still placed on its element.
+          for (const regularProp of regular) {
+            for (const varName of regularProp.varRefs ?? []) {
+              const traceIdSet = varUsedByTraceId.get(varName) ?? new Set()
+              traceIdSet.add(traceId)
+              varUsedByTraceId.set(varName, traceIdSet)
             }
           }
 
-          if (Object.keys(custom).length > 0) {
-            const existing = customPropsByTraceId.get(traceId) ?? {}
-            Object.assign(existing, custom)
-            customPropsByTraceId.set(traceId, existing)
+          // State-dependent rules that can't be attributed to one state of this element
+          // style neither its regular appearance nor any of its states.
+          if (stateScope.kind === 'unmappedState') return
+
+          const scopedData =
+            stateScope.kind === 'state'
+              ? getOrCreate(
+                  getOrCreate(stateByTraceId, traceId, () => new Map()),
+                  stateScope.stateName,
+                  createScopedData,
+                )
+              : getOrCreate(regularByTraceId, traceId, createScopedData)
+
+          if (regular.length > 0) {
+            scopedData.matches.push({ selector, properties: regular, specificity: selectorSpecificity })
           }
+          for (const customProp of custom) assignCustomProperty(scopedData, customProp)
         })
       } catch {
         // Invalid selector for Cheerio, skip
@@ -117,26 +126,72 @@ export function matchCssSelectors(
   }
 
   return {
-    elements: enrichElements(elements, matchesByTraceId, customPropsByTraceId),
+    elements: enrichElements(elements, regularByTraceId, stateByTraceId),
     varUsedByTraceId,
   }
 }
 
+interface ScopedCssData {
+  matches: CssSelectorMatch[]
+  customProperties: Record<string, string>
+  /** Custom properties declared outside any at-rule — a conditional (`@media`) value never overrides them. */
+  topLevelCustomPropertyNames: Set<string>
+}
+
+function createScopedData(): ScopedCssData {
+  return { matches: [], customProperties: {}, topLevelCustomPropertyNames: new Set() }
+}
+
+/** Later declaration wins, except that an at-rule declaration never overrides a top-level one. */
+function assignCustomProperty(scopedData: ScopedCssData, customProp: CSSProperty): void {
+  if (customProp.inAtRule && scopedData.topLevelCustomPropertyNames.has(customProp.name)) return
+  if (!customProp.inAtRule) scopedData.topLevelCustomPropertyNames.add(customProp.name)
+  scopedData.customProperties[customProp.name] = customProp.value
+}
+
+function getOrCreate<Key, Value>(map: Map<Key, Value>, key: Key, create: () => Value): Value {
+  const existing = map.get(key)
+  if (existing !== undefined) return existing
+  const created = create()
+  map.set(key, created)
+  return created
+}
+
+function buildStateData(
+  stateData: Map<string, ScopedCssData> | undefined,
+): Pick<MatchedCssData, 'stateMatches' | 'stateCustomProperties'> {
+  if (!stateData || stateData.size === 0) return {}
+  const stateMatches: Record<string, CssSelectorMatch[]> = {}
+  const stateCustomProperties: Record<string, Record<string, string>> = {}
+  for (const [stateName, scopedData] of stateData) {
+    if (scopedData.matches.length > 0) stateMatches[stateName] = scopedData.matches
+    if (Object.keys(scopedData.customProperties).length > 0) {
+      stateCustomProperties[stateName] = scopedData.customProperties
+    }
+  }
+  return {
+    ...(Object.keys(stateMatches).length > 0 && { stateMatches }),
+    ...(Object.keys(stateCustomProperties).length > 0 && { stateCustomProperties }),
+  }
+}
+
 function enrichElements(
   elements: ExtractedElement[],
-  matchesByTraceId: Map<string, CssSelectorMatch[]>,
-  customPropsByTraceId: Map<string, Record<string, string>>,
+  regularByTraceId: Map<string, ScopedCssData>,
+  stateByTraceId: Map<string, Map<string, ScopedCssData>>,
 ): ExtractedElement[] {
   return elements.map((element) => {
+    const regularData = regularByTraceId.get(element.traceId)
     const data: MatchedCssData = {
-      matches: matchesByTraceId.get(element.traceId) ?? [],
-      customProperties: customPropsByTraceId.get(element.traceId) ?? {},
+      matches: regularData?.matches ?? [],
+      customProperties: regularData?.customProperties ?? {},
+      ...buildStateData(stateByTraceId.get(element.traceId)),
     }
     element.extractorData.set('css-matcher', data)
 
     return {
       ...element,
-      children: enrichElements(element.children, matchesByTraceId, customPropsByTraceId),
+      children: enrichElements(element.children, regularByTraceId, stateByTraceId),
     }
   })
 }

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

@@ -15,6 +15,13 @@ export interface CSSProperty {
   valueAst?: CssNode
   /** CSS variable names referenced via var() in this property's value */
   varRefs?: string[]
+  /**
+   * True when the declaration sits inside an at-rule block (e.g. `@media`, `@supports`, `@layer`),
+   * other than `@keyframes`. A top-level declaration wins over one in an at-rule when resolving a
+   * default value — conditional rules don't describe the default appearance, and unlayered rules
+   * beat layered ones in the cascade.
+   */
+  inAtRule?: boolean
 }
 
 export interface CssSelectorMatch {
@@ -24,10 +31,25 @@ export interface CssSelectorMatch {
 }
 
 export interface MatchedCssData {
+  /** Matches whose selectors apply in the element's regular (non-state) appearance. */
   matches: CssSelectorMatch[]
+  /** Custom properties declared by regular-scope matches. */
   customProperties: Record<string, string>
+  /** Matches whose selectors apply only in one design state, keyed by state name (e.g. `hover`). */
+  stateMatches?: Record<string, CssSelectorMatch[]>
+  /** Custom properties declared by state-scope matches, keyed by state name. */
+  stateCustomProperties?: Record<string, Record<string, string>>
 }
 
+/**
+ * Which appearance of its subject element a selector styles:
+ *   - `regular`       — the element's default appearance (no state condition on the subject).
+ *   - `state`         — exactly one design state on the subject (`.root:hover`, `.root:global(.x--hover)`).
+ *   - `unmappedState` — state-dependent, but not attributable to a single state of the subject
+ *                       (an ancestor's state, several states combined, a state inside `:is()`).
+ */
+export type SelectorStateScope = { kind: 'regular' } | { kind: 'state'; stateName: string } | { kind: 'unmappedState' }
+
 /**
  * A CSS custom property registered via the standard `@property` at-rule.
  * The `syntax` descriptor gives the type (and, for a pipe-separated ident list, a
@@ -47,23 +69,6 @@ export interface RegisteredCustomProperty {
    * (`a | b | c`). Present only when `cssPropertyType` is `customEnum`.
    */
   enumOptions?: string[]
-  /**
-   * The numeric range for the control, as raw descriptor strings. Validated at
-   * conversion time. Meaningful only when `cssPropertyType` is `number`.
-   */
-  range?: RegisteredPropertyRange
-}
-
-/**
- * `--min` / `--max` / `--step` descriptors an importer may emit inside an `@property`
- * block. The `--` prefix keeps them in the author namespace: browsers ignore descriptors
- * they don't know, so the CSS stays valid and CSS can't standardise these names out from
- * under us.
- */
-export interface RegisteredPropertyRange {
-  min?: string
-  max?: string
-  step?: string
 }
 
 export type NativePseudoClass = 'hover' | 'focus' | 'disabled' | 'invalid'
@@ -133,6 +138,13 @@ export interface CSSParserAPI {
    */
   getSelectorSpecificity: (selector: string) => [number, number, number] | null
 
+  /**
+   * Classifies which appearance of its subject element a selector styles — regular, a single
+   * design state, or a state that cannot be attributed to the subject. Returns `regular` for
+   * selectors that were not parsed (e.g. keyframe selectors).
+   */
+  getSelectorStateScope: (selector: string) => SelectorStateScope
+
   /**
    * Determines the CSS property type this one stylesheet can attribute to a custom property.
    * A `@property` registration is the top-priority source (declared type). Otherwise falls back

package/src/manifest-pipeline.ts

@@ -373,10 +373,17 @@ function extractCssInfo(cssImportPaths: string[], componentName: string): Extrac
 
     const properties = new Map<string, string>()
     const customProperties = new Map<string, string>()
+    const topLevelCustomPropertyNames = new Set<string>()
 
-    for (const [, props] of allProps) {
+    for (const [selector, props] of allProps) {
+      // A state rule (`.root:hover { --x: … }`) must not supply the regular default.
+      const isRegularSelector = api.getSelectorStateScope(selector).kind === 'regular'
       for (const prop of props) {
         if (prop.name.startsWith('--')) {
+          if (!isRegularSelector) continue
+          // An at-rule (`@media`) value never overrides a top-level one.
+          if (prop.inAtRule && topLevelCustomPropertyNames.has(prop.name)) continue
+          if (!prop.inAtRule) topLevelCustomPropertyNames.add(prop.name)
           customProperties.set(prop.name, prop.value)
         } else {
           properties.set(prop.name, prop.value)