@wix/zero-config-implementation 1.105.0 → 1.107.0

package/package.json

@@ -4,7 +4,7 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "version": "1.105.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": "0c8ba866b638c1cacaeaecfc2e82c36a40e6307f5e3896c922c1dc25"
+  "falconPackageHash": "06e07178bd2c8944810a496429499f8a1f4a9007f694fdeb8d896363"
 }

package/src/converters/states-default-values.test.ts

@@ -0,0 +1,308 @@
+import { CSS_PROPERTIES } from '@wix/react-component-schema'
+import { describe, expect, it } from 'vitest'
+import { TRACE_ATTR } from '../component-renderer'
+import { parseCss } from '../information-extractors/css/parse'
+import { matchCssSelectors } from '../information-extractors/css/selector-matcher'
+import type { ExtractedElement } from '../information-extractors/react'
+import type { ComponentInfoWithCss, ExtractedCssInfo } from '../manifest-pipeline'
+import { toEditorReactComponent } from './to-editor-component'
+
+const { CSS_PROPERTY_TYPE } = CSS_PROPERTIES
+
+interface ElementSpec {
+  name: string
+  tag: string
+  className: string
+  relevant: string[]
+  children?: ElementSpec[]
+}
+
+function toExtractedElement(spec: ElementSpec): ExtractedElement {
+  return {
+    traceId: `trace-${spec.name}`,
+    name: spec.name,
+    tag: spec.tag,
+    attributes: { class: spec.className },
+    extractorData: new Map<string, unknown>([['css-properties', { relevant: spec.relevant }]]),
+    children: (spec.children ?? []).map(toExtractedElement),
+  }
+}
+
+function toHtml(spec: ElementSpec): string {
+  const childrenHtml = (spec.children ?? []).map(toHtml).join('')
+  return `<${spec.tag} ${TRACE_ATTR}="trace-${spec.name}" class="${spec.className}">${childrenHtml}</${spec.tag}>`
+}
+
+/** Runs the CSS through the real selector matcher, then converts the matched tree. */
+function convert(css: string, rootSpec: ElementSpec) {
+  const api = parseCss(css)
+  const cssInfo: ExtractedCssInfo = {
+    filePath: 'test.css',
+    api,
+    properties: new Map(),
+    customProperties: new Map(),
+    isCssModule: false,
+  }
+  const { elements, varUsedByTraceId } = matchCssSelectors(toHtml(rootSpec), [toExtractedElement(rootSpec)], [cssInfo])
+  const component: ComponentInfoWithCss = {
+    componentName: 'StateDefaults',
+    props: {},
+    elements,
+    propUsages: new Map(),
+    css: [cssInfo],
+    varUsedByTraceId,
+  }
+  const { editorElement } = toEditorReactComponent(component)
+  if (!editorElement) throw new Error('toEditorReactComponent produced no editorElement')
+  return editorElement
+}
+
+function rootButton(relevant: string[], children: ElementSpec[] = []): ElementSpec {
+  return { name: 'root', tag: 'button', className: 'widget', relevant, children }
+}
+
+describe('toEditorReactComponent — statesDefaultValues', () => {
+  it('keeps the regular default and moves a hover override into statesDefaultValues', () => {
+    const editorElement = convert(
+      `.widget { background: red; }
+       .widget:global(.widget--hover), .widget:hover { background: blue; }`,
+      rootButton([CSS_PROPERTY_TYPE.background]),
+    )
+
+    expect(editorElement.cssProperties?.background).toEqual({
+      defaultValue: 'red',
+      statesDefaultValues: { hover: 'blue' },
+    })
+  })
+
+  it('emits no statesDefaultValues when the hover rule does not touch the property', () => {
+    const editorElement = convert(
+      `.widget { background: red; }
+       .widget:hover { color: blue; }`,
+      rootButton([CSS_PROPERTY_TYPE.background]),
+    )
+
+    expect(editorElement.cssProperties?.background).toEqual({ defaultValue: 'red' })
+  })
+
+  it('omits a state value equal to the regular default', () => {
+    const editorElement = convert(
+      `.widget { background: red; }
+       .widget:hover { background: red; }`,
+      rootButton([CSS_PROPERTY_TYPE.background]),
+    )
+
+    expect(editorElement.cssProperties?.background).toEqual({ defaultValue: 'red' })
+  })
+
+  it('resolves a state shorthand into longhands without letting a regular longhand win', () => {
+    const editorElement = convert(
+      `.widget { padding-top: 1px; padding-bottom: 1px; }
+       .widget:hover { padding: 8px; }`,
+      rootButton([CSS_PROPERTY_TYPE.paddingTop, CSS_PROPERTY_TYPE.paddingBottom]),
+    )
+
+    expect(editorElement.cssProperties?.paddingTop).toEqual({
+      defaultValue: '1px',
+      statesDefaultValues: { hover: '8px' },
+    })
+  })
+
+  it('maps the custom `active` class trigger and the `:active` pseudo to the same state', () => {
+    const editorElement = convert(
+      `.widget { color: black; }
+       .widget:global(.widget--active), .widget:active { color: white; }`,
+      rootButton([CSS_PROPERTY_TYPE.color]),
+    )
+
+    expect(editorElement.states?.active).toEqual({ displayName: 'Active', className: 'widget--active' })
+    expect(editorElement.cssProperties?.color).toEqual({
+      defaultValue: 'black',
+      statesDefaultValues: { active: 'white' },
+    })
+  })
+
+  it('neither emits nor leaks a CSS state the element does not expose', () => {
+    // A plain <span> has no native states, so its `:hover` rule has nowhere to go.
+    const editorElement = convert(
+      `.widget__caption { color: black; }
+       .widget__caption:hover { color: blue; }`,
+      rootButton(
+        [],
+        [{ name: 'caption', tag: 'span', className: 'widget__caption', relevant: [CSS_PROPERTY_TYPE.color] }],
+      ),
+    )
+
+    expect(editorElement.elements?.caption?.inlineElement?.cssProperties?.color).toEqual({ defaultValue: 'black' })
+  })
+
+  it('emits statesDefaultValues on an inner element with its own native hover state', () => {
+    const editorElement = convert(
+      `.widget__action { color: black; }
+       .widget__action:hover { color: blue; }`,
+      rootButton(
+        [],
+        [{ name: 'action', tag: 'button', className: 'widget__action', relevant: [CSS_PROPERTY_TYPE.color] }],
+      ),
+    )
+
+    const actionElement = editorElement.elements?.action?.inlineElement
+    expect(actionElement?.states?.hover).toBeDefined()
+    expect(actionElement?.cssProperties?.color).toEqual({
+      defaultValue: 'black',
+      statesDefaultValues: { hover: 'blue' },
+    })
+  })
+
+  it("does not apply an ancestor's state rule to a descendant's regular default", () => {
+    const editorElement = convert(
+      `.widget__label { color: black; }
+       .widget:hover .widget__label { color: blue; }`,
+      rootButton([], [{ name: 'label', tag: 'span', className: 'widget__label', relevant: [CSS_PROPERTY_TYPE.color] }]),
+    )
+
+    expect(editorElement.elements?.label?.inlineElement?.cssProperties?.color).toEqual({ defaultValue: 'black' })
+  })
+
+  it('does not let a display declared only under hover change the regular display', () => {
+    const editorElement = convert(
+      `.widget__icon { display: inline; }
+       .widget:hover .widget__icon, .widget__icon:hover { display: none; }`,
+      rootButton([], [{ name: 'icon', tag: 'span', className: 'widget__icon', relevant: [CSS_PROPERTY_TYPE.display] }]),
+    )
+
+    expect(editorElement.elements?.icon?.inlineElement?.cssProperties?.display).toEqual({
+      display: { displayValues: ['none', 'inline'] },
+    })
+  })
+
+  it('does not let a conditional (@media) declaration beat the top-level one', () => {
+    const editorElement = convert(
+      `.widget { background: red; }
+       .widget:hover { background: blue; }
+       @media (prefers-reduced-motion: reduce) { .widget { background: gray; } .widget:hover { background: none; } }`,
+      rootButton([CSS_PROPERTY_TYPE.background]),
+    )
+
+    expect(editorElement.cssProperties?.background).toEqual({
+      defaultValue: 'red',
+      statesDefaultValues: { hover: 'blue' },
+    })
+  })
+
+  it('adds a state value to a custom property declared under that state on its own element', () => {
+    const editorElement = convert(
+      `.widget { --accent: red; color: var(--accent); }
+       .widget:hover { --accent: blue; }`,
+      rootButton([CSS_PROPERTY_TYPE.color]),
+    )
+
+    expect(editorElement.cssCustomProperties?.accent).toMatchObject({
+      defaultValue: 'red',
+      statesDefaultValues: { hover: 'blue' },
+    })
+  })
+
+  it("does not attach a descendant's state declaration to the ancestor a variable is placed on", () => {
+    // `--accent` is declared on both elements, so it is placed on their common ancestor (the root);
+    // the hover value belongs to the inner button's state, not the root's.
+    const editorElement = convert(
+      `.widget { --accent: red; }
+       .widget__action { --accent: green; }
+       .widget__action:hover { --accent: blue; }`,
+      rootButton([], [{ name: 'action', tag: 'button', className: 'widget__action', relevant: [] }]),
+    )
+
+    expect(editorElement.cssCustomProperties?.accent).not.toHaveProperty('statesDefaultValues')
+  })
+
+  it('does not let a conditional (@media) longhand beat a top-level shorthand', () => {
+    const editorElement = convert(
+      `.widget { padding: 0; }
+       @media (max-width: 600px) { .widget { padding-top: 10px; } }`,
+      rootButton([CSS_PROPERTY_TYPE.paddingTop]),
+    )
+
+    expect(editorElement.cssProperties?.paddingTop).toEqual({ defaultValue: '0' })
+  })
+
+  it('does not let a conditional (@media) custom property beat the top-level one', () => {
+    const editorElement = convert(
+      `.widget { --accent: red; color: var(--accent); }
+       @media (max-width: 600px) { .widget { --accent: blue; } }`,
+      rootButton([CSS_PROPERTY_TYPE.color]),
+    )
+
+    expect(editorElement.cssCustomProperties?.accent).toMatchObject({ defaultValue: 'red' })
+  })
+
+  it('emits no control for a variable declared only under a state the element does not expose', () => {
+    // A <button> has native hover/disabled states but no `active` state (no `--active` class trigger).
+    const editorElement = convert(
+      `.widget { color: var(--accent); }
+       .widget:active { --accent: blue; }`,
+      rootButton([CSS_PROPERTY_TYPE.color]),
+    )
+
+    expect(editorElement.states?.active).toBeUndefined()
+    expect(editorElement.cssCustomProperties).not.toHaveProperty('accent')
+  })
+
+  it('does not let a global state modifier nested in :is() leak into the regular default', () => {
+    const editorElement = convert(
+      `.widget { color: black; }
+       .widget:is(:global(.widget--selected)) { color: blue; }`,
+      rootButton([CSS_PROPERTY_TYPE.color]),
+    )
+
+    expect(editorElement.cssProperties?.color).toEqual({ defaultValue: 'black' })
+  })
+
+  it('emits a state display value while keeping the display options', () => {
+    const editorElement = convert(
+      `.widget__action { display: block; }
+       .widget__action:global(.widget__action--collapsed) { display: none; }
+       .widget__action:global(.widget__action--expanded) { display: flex; }`,
+      rootButton(
+        [],
+        [{ name: 'action', tag: 'button', className: 'widget__action', relevant: [CSS_PROPERTY_TYPE.display] }],
+      ),
+    )
+
+    const actionElement = editorElement.elements?.action?.inlineElement
+    expect(actionElement?.states?.collapsed).toBeDefined()
+    expect(actionElement?.cssProperties?.display).toEqual({
+      display: { displayValues: ['none', 'block', 'flex'] },
+      statesDefaultValues: { collapsed: 'none', expanded: 'flex' },
+    })
+  })
+
+  it('resolves a state display that only changes the variable the regular display reads', () => {
+    const editorElement = convert(
+      `.widget__action { display: var(--layout); --layout: block; }
+       .widget__action:hover { --layout: none; }`,
+      rootButton(
+        [],
+        [{ name: 'action', tag: 'button', className: 'widget__action', relevant: [CSS_PROPERTY_TYPE.display] }],
+      ),
+    )
+
+    expect(editorElement.elements?.action?.inlineElement?.cssProperties?.display).toEqual({
+      display: { displayValues: ['none', 'block'] },
+      statesDefaultValues: { hover: 'none' },
+    })
+  })
+
+  describe('known limitations', () => {
+    it('drops a state longhand that cannot be recomposed into a regular shorthand target', () => {
+      // `font` is composed from its longhands only when every one is declared in the same layer.
+      const editorElement = convert(
+        `.widget { font: 400 16px/1.5 Arial; }
+         .widget:hover { font-weight: 700; }`,
+        rootButton([CSS_PROPERTY_TYPE.font]),
+      )
+
+      expect(editorElement.cssProperties?.font).not.toHaveProperty('statesDefaultValues')
+    })
+  })
+})

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; }