@wix/zero-config-implementation 1.105.0 → 1.106.0

package/package.json

@@ -4,7 +4,7 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "version": "1.105.0",
+  "version": "1.106.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": "257681de48c644877515f4fab42d8af3418a370d31f219d70153597a"
 }

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')
+    })
+  })
+})