@wix/zero-config-implementation 1.106.0 → 1.107.0

package/package.json

@@ -4,7 +4,7 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "version": "1.106.0",
+  "version": "1.107.0",
   "description": "Core library for extracting component manifests from JS and CSS files",
   "type": "module",
   "main": "dist/index.js",
@@ -106,5 +106,5 @@
       ]
     }
   },
-  "falconPackageHash": "257681de48c644877515f4fab42d8af3418a370d31f219d70153597a"
+  "falconPackageHash": "06e07178bd2c8944810a496429499f8a1f4a9007f694fdeb8d896363"
 }

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

@@ -590,91 +590,6 @@ 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,6 +1,5 @@
 import type {
   CssCustomPropertyItem,
-  CssNumber,
   CssPropertyItem,
   CustomPropertyEnum,
   DataItem,
@@ -387,7 +386,6 @@ function buildNearestCommonAncestorCustomProps(
       ? registration.cssPropertyType
       : getVarPropertyTypeFromCssInfos(varName, valueForTypeInference, component.css)
     const customEnum = buildCustomEnum(registration)
-    const numberLimits = buildCssNumber(registration, cssPropertyType)
     const cleanVarName = varName.startsWith('--') ? varName.slice(2) : varName
 
     const existingProps = nearestCommonAncestorCustomProps.get(nearestCommonAncestorTraceId) ?? {}
@@ -397,7 +395,6 @@ function buildNearestCommonAncestorCustomProps(
       ...(statesDefaultValues && { statesDefaultValues }),
       ...(cssPropertyType !== undefined && { cssPropertyType }),
       ...(customEnum && { customEnum }),
-      ...(numberLimits && { number: numberLimits }),
     }
     nearestCommonAncestorCustomProps.set(nearestCommonAncestorTraceId, existingProps)
   }
@@ -493,42 +490,6 @@ 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) }),
-  }
-}
-
 function getVarPropertyTypeFromCssInfos(
   varName: string,
   defaultValue: string,

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

@@ -9,7 +9,6 @@ import type {
   CssDataType,
   NativePseudoClass,
   RegisteredCustomProperty,
-  RegisteredPropertyRange,
   SelectorStateScope,
   StateClassRule,
 } from './types'
@@ -537,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.
@@ -577,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 }),
       })
     },
   })

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

@@ -69,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'