@wix/zero-config-implementation 1.61.0 → 1.63.0

package/src/converters/css-shorthand-composer.ts

@@ -0,0 +1,83 @@
+/**
+ * Composes a CSS shorthand value (`font`, …) from longhand declarations the
+ * developer wrote. Inverse of the splitters in `css-longhand-resolver.ts`:
+ *
+ *   resolver splits:    `padding: 1rem`             →  `paddingTop: "1rem"`
+ *   composer assembles: `font-family + font-size`   →  `font: "16px Arial"`
+ *
+ * Strict policy: when the CSS spec marks a piece as required and it's missing
+ * from the map, the composer returns `undefined` rather than emit a partial
+ * string the editor's value parser would reject as invalid shorthand.
+ */
+
+type Composer = (values: Map<string, string>) => string | undefined
+
+/**
+ * Builds a `font` shorthand value from longhand declarations, per CSS spec:
+ *   [ <font-style> || <font-variant> || <font-weight> || <font-stretch> ]?
+ *   <font-size> [ / <line-height> ]? <font-family>
+ *
+ * Returns undefined unless both required pieces (font-size and font-family)
+ * are present. Modifiers with the literal value `normal` are omitted (they're
+ * the shorthand's implicit default and would add noise to the emitted string).
+ */
+export function composeFontShorthand(values: Map<string, string>): string | undefined {
+  const size = values.get('fontSize')
+  const family = values.get('fontFamily')
+  if (size === undefined || family === undefined) return undefined
+
+  const parts: string[] = []
+
+  // Optional modifiers (style, variant, weight, stretch). Order matters per CSS
+  // spec but their order relative to each other is free; size always follows.
+  for (const key of ['fontStyle', 'fontVariant', 'fontWeight', 'fontStretch']) {
+    const value = values.get(key)
+    if (value !== undefined && value.toLowerCase() !== 'normal') parts.push(value)
+  }
+
+  const lineHeight = values.get('lineHeight')
+  if (lineHeight !== undefined && lineHeight.toLowerCase() !== 'normal') {
+    parts.push(`${size}/${lineHeight}`)
+  } else {
+    parts.push(size)
+  }
+
+  // Family names may carry CSS double-quotes (`"Helvetica Neue"`). Normalize to
+  // single quotes so the emitted shorthand can be embedded in JSON / snapshot
+  // strings without the inner `"` colliding with the outer delimiter. CSS
+  // accepts both quote styles equally for family names.
+  parts.push(family.replace(/"/g, "'"))
+  return parts.join(' ')
+}
+
+/**
+ * Builds a `gap` shorthand value from `row-gap` + `column-gap` longhands.
+ *
+ *   gap: <row-gap> [<column-gap>]?
+ *
+ * Strict: both axes required. Composing from just one would lie about intent —
+ * `gap: 8px` sets BOTH axes to 8px, whereas the developer's `row-gap: 8px`
+ * alone leaves column-gap at its initial value. Collapses to a single value
+ * when the two axes are equal, matching how developers write it by hand.
+ */
+export function composeGapShorthand(values: Map<string, string>): string | undefined {
+  const rowGap = values.get('rowGap')
+  const columnGap = values.get('columnGap')
+  if (rowGap === undefined || columnGap === undefined) return undefined
+
+  if (rowGap === columnGap) return rowGap
+  return `${rowGap} ${columnGap}`
+}
+
+/**
+ * Routing table for shorthand targets the schema asks for. Maps each target
+ * to the composer(s) that build its value from longhand declarations. The
+ * resolver in `css-longhand-resolver.ts` merges this in when dispatching
+ * `resolveLonghand`.
+ *
+ * Add new shorthand targets here as they're needed (background, border, …).
+ */
+export const SHORTHAND_FALLBACKS: Record<string, Composer[]> = {
+  font: [composeFontShorthand],
+  gap: [composeGapShorthand],
+}

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

@@ -8,6 +8,7 @@ import type {
   ElementItem,
 } from '@wix/react-component-schema'
 import { CSS_PROPERTIES, ELEMENTS } from '@wix/react-component-schema'
+import { camelCase } from 'case-anything'
 import type { ComponentInfoWithCss } from '../index'
 import type { MatchedCssData } from '../information-extractors/css/types'
 import type {
@@ -19,6 +20,7 @@ import type {
 } from '../information-extractors/react'
 import { getDefaultDisplayForTag, resolveDisplayValue } from '../information-extractors/react'
 import { findPreferredSemanticClass } from '../utils/css-class'
+import { resolveLonghand } from './css-longhand-resolver'
 import { buildDataItem } from './data-item-builder'
 import { formatDisplayName } from './utils'
 
@@ -305,7 +307,7 @@ function getMatchedPropertyValues(element: ExtractedElement): Map<string, string
   const values = new Map<string, string>()
   for (const match of matches) {
     for (const prop of match.properties) {
-      values.set(prop.name, prop.value)
+      values.set(camelCase(prop.name), prop.value)
     }
   }
   return values
@@ -340,7 +342,7 @@ function buildCssProperties(element: ExtractedElement | undefined): Record<strin
       result[propName] = buildDisplayProperty(element)
       continue
     }
-    const defaultValue = cssPropertyValues.get(propName)
+    const defaultValue = resolveLonghand(propName, cssPropertyValues)
     result[propName] = {
       ...(defaultValue !== undefined && { defaultValue }),
     }