@wix/zero-config-implementation 1.90.0 → 1.91.0

package/package.json

@@ -4,7 +4,7 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "version": "1.90.0",
+  "version": "1.91.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": "7232f116f870e20fe94caa49ba503a0a945ec4eed14c9f9b55544590"
 }

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

@@ -225,6 +225,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,
@@ -324,6 +325,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 +334,7 @@ function buildNearestCommonAncestorCustomProps(
       ...(defaultValue !== undefined && { defaultValue }),
       ...(cssPropertyType !== undefined && { cssPropertyType }),
       ...(customEnum && { customEnum }),
+      ...(numberLimits && { number: numberLimits }),
     }
     nearestCommonAncestorCustomProps.set(nearestCommonAncestorTraceId, existingProps)
   }
@@ -368,6 +371,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'