@wix/zero-config-implementation 1.90.0 → 1.92.0

package/package.json

@@ -4,7 +4,7 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "version": "1.90.0",
+  "version": "1.92.0",
   "description": "Core library for extracting component manifests from JS and CSS files",
   "type": "module",
   "main": "dist/index.js",
@@ -106,5 +106,5 @@
       ]
     }
   },
-  "falconPackageHash": "3d380033b2cb76ee95040a71fda50b5bbee8d8cb70460bfb8c8a5313"
+  "falconPackageHash": "db2c3fec617a486d30e2d52ed7e239747365a40d14666a5ea04cf07d"
 }

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

@@ -166,6 +166,71 @@ describe('toEditorReactComponent display conversion', () => {
   })
 })
 
+describe('toEditorReactComponent selector conversion', () => {
+  it.each([
+    ['a', 'a___'],
+    ['div', 'div_'],
+    ['span', 'span'],
+  ])('pads the root selector %j to at least four characters', (tag, expectedSelector) => {
+    const rootElement = createElementWithDisplayMatcher(tag, matcherDataFromCss(''))
+
+    const editorElement = toEditorReactComponent(createComponent(rootElement)).editorElement
+
+    expect(editorElement?.selector).toBe(expectedSelector)
+  })
+
+  it('pads a short semantic class selector', () => {
+    const rootElement = createSemanticElement({
+      traceId: 'trace-root',
+      name: 'root',
+      className: 'a',
+    })
+
+    const editorElement = toEditorReactComponent(createComponent(rootElement)).editorElement
+
+    expect(editorElement?.selector).toBe('.a__')
+  })
+
+  it('pads short inline and ref element selectors', () => {
+    const inlineElement: ExtractedElement = {
+      traceId: 'trace-link',
+      name: 'link',
+      tag: 'a',
+      attributes: {},
+      extractorData: new Map<string, unknown>(),
+      children: [],
+    }
+    const refElement: ExtractedElement = {
+      traceId: 'trace-action-button',
+      name: 'actionButton',
+      tag: 'div',
+      attributes: {},
+      extractorData: new Map<string, unknown>([
+        [
+          'ref-element',
+          {
+            elementPropsPath: 'actionButton',
+            refComponentType: 'test.Button',
+            selector: '.a',
+          },
+        ],
+      ]),
+      children: [],
+    }
+    const rootElement = createSemanticElement({
+      traceId: 'trace-root',
+      name: 'root',
+      className: 'root',
+      children: [inlineElement, refElement],
+    })
+
+    const elements = toEditorReactComponent(createComponent(rootElement)).editorElement?.elements
+
+    expect(elements?.link?.inlineElement?.selector).toBe('a___')
+    expect(elements?.actionButton?.refElement?.selector).toBe('.a__')
+  })
+})
+
 function cssInfoFromStylesheet(cssString: string): ExtractedCssInfo {
   const api = parseCss(cssString)
   const properties = new Map<string, string>()
@@ -225,6 +290,91 @@ describe('toEditorReactComponent — @property design tokens', () => {
     })
   })
 
+  it('carries the --min / --max / --step descriptors of a number @property into number limits', () => {
+    const component = createComponentWithCss(`
+      @property --speed { syntax: "<number>"; inherits: true; initial-value: 4; --min: 1; --max: 10; --step: 0.5; }
+    `)
+
+    const customProps = toEditorReactComponent(component).editorElement?.cssCustomProperties
+
+    expect(customProps?.speed).toEqual({
+      displayName: 'Speed',
+      defaultValue: '4',
+      cssPropertyType: 'number',
+      number: { min: '1', max: '10', multiplier: '0.5' },
+    })
+  })
+
+  it('emits only the usable half of a partial range and omits the rest', () => {
+    const component = createComponentWithCss(`
+      @property --weight { syntax: "<number>"; inherits: true; initial-value: 2; --min: 0; }
+      @property --tempo { syntax: "<number>"; inherits: true; initial-value: 3; --max: 9; --step: nonsense; }
+      @property --offset { syntax: "<number>"; inherits: true; initial-value: 0; --min: ; --max: 12; }
+    `)
+
+    const customProps = toEditorReactComponent(component).editorElement?.cssCustomProperties
+
+    expect(customProps?.weight).toEqual({
+      displayName: 'Weight',
+      defaultValue: '2',
+      cssPropertyType: 'number',
+      number: { min: '0' },
+    })
+    expect(customProps?.tempo).toEqual({
+      displayName: 'Tempo',
+      defaultValue: '3',
+      cssPropertyType: 'number',
+      number: { max: '9' },
+    })
+    expect(customProps?.offset).toEqual({
+      displayName: 'Offset',
+      defaultValue: '0',
+      cssPropertyType: 'number',
+      number: { max: '12' },
+    })
+  })
+
+  it('drops an inverted range and a non-positive step, omitting `number` when nothing is usable', () => {
+    const component = createComponentWithCss(`
+      @property --span { syntax: "<number>"; inherits: true; initial-value: 5; --min: 10; --max: 2; --step: 0; }
+      @property --frozen { syntax: "<number>"; inherits: true; initial-value: 5; --min: 5; --max: 5; --step: 1; }
+    `)
+
+    const customProps = toEditorReactComponent(component).editorElement?.cssCustomProperties
+
+    expect(customProps?.span).toEqual({
+      displayName: 'Span',
+      defaultValue: '5',
+      cssPropertyType: 'number',
+    })
+    expect(customProps?.frozen).toEqual({
+      displayName: 'Frozen',
+      defaultValue: '5',
+      cssPropertyType: 'number',
+      number: { multiplier: '1' },
+    })
+  })
+
+  it('ignores range descriptors on a non-number @property', () => {
+    const component = createComponentWithCss(`
+      @property --sdf-safelight-color { syntax: "<color>"; inherits: true; initial-value: #F02011; --min: 1; --max: 10; }
+      @property --gap { syntax: "<length>"; inherits: true; initial-value: 4px; --min: 1; --max: 10; --step: 1; }
+    `)
+
+    const customProps = toEditorReactComponent(component).editorElement?.cssCustomProperties
+
+    expect(customProps?.['sdf-safelight-color']).toEqual({
+      displayName: 'Sdf Safelight Color',
+      defaultValue: '#F02011',
+      cssPropertyType: 'color',
+    })
+    expect(customProps?.gap).toEqual({
+      displayName: 'Gap',
+      defaultValue: '4px',
+      cssPropertyType: 'length',
+    })
+  })
+
   it('emits a customEnum dropdown for a pipe-separated ident-list @property', () => {
     const component = createComponentWithCss(`
       @property --sdf-palette { syntax: "warm | cool | neutral"; inherits: false; initial-value: warm; }

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

@@ -1,5 +1,6 @@
 import type {
   CssCustomPropertyItem,
+  CssNumber,
   CssPropertyItem,
   CustomPropertyEnum,
   DataItem,
@@ -33,6 +34,8 @@ import type { StateClassTrigger } from './state-class-trigger'
 import { buildStatesBlock } from './states-builder'
 import { formatDisplayName } from './utils'
 
+const MINIMUM_SELECTOR_LENGTH = 4
+
 /**
  * Merges native and custom state blocks. Native states take precedence on any
  * key collision (e.g. an author wrapping `isDisabled` in `ElementState<>` does not
@@ -139,9 +142,13 @@ function getSemanticBlockName(element: ExtractedElement | undefined): string | u
 function buildSelector(rootElement?: ExtractedElement): string {
   if (rootElement?.attributes.class) {
     const semanticClass = findPreferredSemanticClass(normalizeClassNames(rootElement.attributes.class))
-    if (semanticClass) return `.${semanticClass}`
+    if (semanticClass) return padSelector(`.${semanticClass}`)
   }
-  return rootElement?.tag ?? ''
+  return padSelector(rootElement?.tag ?? '')
+}
+
+function padSelector(selector: string): string {
+  return selector.padEnd(MINIMUM_SELECTOR_LENGTH, '_')
 }
 
 function buildInnerElementDisplayName(element: ExtractedElement, ancestorSemanticClasses: string[]): string {
@@ -205,7 +212,7 @@ function buildElements(
       result[buildRefElementManifestKey(refElementMatch.elementPropsPath, parentElementPropsPath)] = {
         elementType: ELEMENTS.ELEMENT_TYPE.refElement,
         refElement: {
-          selector: refElementMatch.selector,
+          selector: padSelector(refElementMatch.selector),
           type: refElementMatch.refComponentType,
         },
       }
@@ -324,6 +331,7 @@ function buildNearestCommonAncestorCustomProps(
       ? registration.cssPropertyType
       : getVarPropertyTypeFromCssInfos(varName, defaultValue ?? '', component.css)
     const customEnum = buildCustomEnum(registration)
+    const numberLimits = buildCssNumber(registration, cssPropertyType)
     const cleanVarName = varName.startsWith('--') ? varName.slice(2) : varName
 
     const existingProps = nearestCommonAncestorCustomProps.get(nearestCommonAncestorTraceId) ?? {}
@@ -332,6 +340,7 @@ function buildNearestCommonAncestorCustomProps(
       ...(defaultValue !== undefined && { defaultValue }),
       ...(cssPropertyType !== undefined && { cssPropertyType }),
       ...(customEnum && { customEnum }),
+      ...(numberLimits && { number: numberLimits }),
     }
     nearestCommonAncestorCustomProps.set(nearestCommonAncestorTraceId, existingProps)
   }
@@ -368,6 +377,42 @@ function buildCustomEnum(registration: RegisteredCustomProperty | undefined): Cu
   }
 }
 
+function parseFiniteDescriptor(rawValue: string | undefined): number | undefined {
+  const trimmed = rawValue?.trim()
+  if (!trimmed) return undefined
+  const parsed = Number(trimmed)
+  return Number.isFinite(parsed) ? parsed : undefined
+}
+
+/**
+ * Builds the clamp the panel's number control applies, from an @property's range
+ * descriptors. Anything unusable is dropped rather than passed through.
+ */
+function buildCssNumber(
+  registration: RegisteredCustomProperty | undefined,
+  cssPropertyType: CssCustomPropertyItem['cssPropertyType'],
+): CssNumber | undefined {
+  if (!registration?.range || cssPropertyType !== CSS_PROPERTIES.CSS_DATA_TYPE.number) return undefined
+
+  let min = parseFiniteDescriptor(registration.range.min)
+  let max = parseFiniteDescriptor(registration.range.max)
+  if (min !== undefined && max !== undefined && min >= max) {
+    min = undefined
+    max = undefined
+  }
+
+  const step = parseFiniteDescriptor(registration.range.step)
+  const multiplier = step !== undefined && step > 0 ? step : undefined
+
+  if (min === undefined && max === undefined && multiplier === undefined) return undefined
+
+  return {
+    ...(min !== undefined && { min: String(min) }),
+    ...(max !== undefined && { max: String(max) }),
+    ...(multiplier !== undefined && { multiplier: String(multiplier) }),
+  }
+}
+
 /**
  * Queries each CSS parser API for the property type of a variable and returns
  * the first defined result.

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

@@ -9,6 +9,7 @@ import type {
   CssDataType,
   NativePseudoClass,
   RegisteredCustomProperty,
+  RegisteredPropertyRange,
   StateClassRule,
 } from './types'
 
@@ -501,6 +502,19 @@ 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.
@@ -528,11 +542,13 @@ 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 }),
       })
     },
   })

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

@@ -47,6 +47,23 @@ 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'