@wix/zero-config-implementation 1.62.0 → 1.63.0

package/package.json

@@ -4,7 +4,7 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "version": "1.62.0",
+  "version": "1.63.0",
   "description": "Core library for extracting component manifests from JS and CSS files",
   "type": "module",
   "main": "dist/index.js",
@@ -80,5 +80,5 @@
       ]
     }
   },
-  "falconPackageHash": "bd7035914229aba9dd44c1b5098381d537a4c3b4e7c58e03bd0c5e84"
+  "falconPackageHash": "fc05eca6895716f63fc1c075f50bf661142e5d08ab108de4d195403e"
 }

package/src/converters/css-longhand-resolver.test.ts

@@ -200,4 +200,162 @@ describe('resolveLonghand', () => {
       expect(resolveLonghand('background', values)).toBe('#001')
     })
   })
+
+  describe('font composition from longhands', () => {
+    it('composes size and family alone', () => {
+      const values = new Map([
+        ['fontSize', '14px'],
+        ['fontFamily', 'Arial'],
+      ])
+      expect(resolveLonghand('font', values)).toBe('14px Arial')
+    })
+
+    it('includes weight before size', () => {
+      const values = new Map([
+        ['fontSize', '16px'],
+        ['fontFamily', "'Helvetica Neue'"],
+        ['fontWeight', '600'],
+      ])
+      expect(resolveLonghand('font', values)).toBe("600 16px 'Helvetica Neue'")
+    })
+
+    it('joins size and line-height with /', () => {
+      const values = new Map([
+        ['fontSize', '14px'],
+        ['fontFamily', 'sans-serif'],
+        ['lineHeight', '1.5'],
+      ])
+      expect(resolveLonghand('font', values)).toBe('14px/1.5 sans-serif')
+    })
+
+    it('combines weight, size/line-height, family in spec order', () => {
+      const values = new Map([
+        ['fontStyle', 'italic'],
+        ['fontWeight', '700'],
+        ['fontSize', '20px'],
+        ['lineHeight', '1.3'],
+        ['fontFamily', 'serif'],
+      ])
+      expect(resolveLonghand('font', values)).toBe('italic 700 20px/1.3 serif')
+    })
+
+    it("omits modifiers with literal value 'normal'", () => {
+      const values = new Map([
+        ['fontStyle', 'normal'],
+        ['fontWeight', 'normal'],
+        ['fontSize', '16px'],
+        ['lineHeight', 'normal'],
+        ['fontFamily', 'Arial'],
+      ])
+      expect(resolveLonghand('font', values)).toBe('16px Arial')
+    })
+
+    it('returns undefined when fontSize is missing (strict)', () => {
+      const values = new Map([['fontFamily', 'Arial']])
+      expect(resolveLonghand('font', values)).toBeUndefined()
+    })
+
+    it('returns undefined when fontFamily is missing (strict)', () => {
+      const values = new Map([['fontSize', '14px']])
+      expect(resolveLonghand('font', values)).toBeUndefined()
+    })
+
+    it('returns undefined when only optional modifiers are present', () => {
+      const values = new Map([
+        ['fontWeight', '700'],
+        ['fontStyle', 'italic'],
+      ])
+      expect(resolveLonghand('font', values)).toBeUndefined()
+    })
+
+    it('prefers literal font shorthand over longhand composition', () => {
+      const values = new Map([
+        ['font', '400 14px Arial'],
+        ['fontSize', '99px'],
+        ['fontFamily', 'WrongFont'],
+      ])
+      expect(resolveLonghand('font', values)).toBe('400 14px Arial')
+    })
+  })
+
+  describe('gap composition from row-gap + column-gap', () => {
+    it('composes two distinct axis values in row/column order', () => {
+      const values = new Map([
+        ['rowGap', '8px'],
+        ['columnGap', '10px'],
+      ])
+      expect(resolveLonghand('gap', values)).toBe('8px 10px')
+    })
+
+    it('collapses to a single value when both axes are equal', () => {
+      const values = new Map([
+        ['rowGap', '4px'],
+        ['columnGap', '4px'],
+      ])
+      expect(resolveLonghand('gap', values)).toBe('4px')
+    })
+
+    it('returns undefined when rowGap is missing (strict)', () => {
+      const values = new Map([['columnGap', '10px']])
+      expect(resolveLonghand('gap', values)).toBeUndefined()
+    })
+
+    it('returns undefined when columnGap is missing (strict)', () => {
+      const values = new Map([['rowGap', '8px']])
+      expect(resolveLonghand('gap', values)).toBeUndefined()
+    })
+
+    it('prefers literal gap shorthand over longhand composition', () => {
+      const values = new Map([
+        ['gap', '12px'],
+        ['rowGap', '99px'],
+        ['columnGap', '99px'],
+      ])
+      expect(resolveLonghand('gap', values)).toBe('12px')
+    })
+  })
+
+  describe('textDecorationLine extraction from text-decoration shorthand', () => {
+    it('extracts the lone line keyword', () => {
+      expect(resolveLonghand('textDecorationLine', new Map([['textDecoration', 'underline']]))).toBe('underline')
+    })
+
+    it('extracts the line keyword and drops style + color tokens', () => {
+      expect(resolveLonghand('textDecorationLine', new Map([['textDecoration', 'underline wavy red']]))).toBe(
+        'underline',
+      )
+    })
+
+    it('ignores token order — line keyword can appear anywhere', () => {
+      expect(resolveLonghand('textDecorationLine', new Map([['textDecoration', 'red wavy underline']]))).toBe(
+        'underline',
+      )
+    })
+
+    it('keeps multiple line keywords joined (e.g. underline + overline)', () => {
+      expect(resolveLonghand('textDecorationLine', new Map([['textDecoration', 'underline overline']]))).toBe(
+        'underline overline',
+      )
+    })
+
+    it('extracts `none`', () => {
+      expect(resolveLonghand('textDecorationLine', new Map([['textDecoration', 'none']]))).toBe('none')
+    })
+
+    it('returns undefined when shorthand has no line keyword (just color/style)', () => {
+      expect(resolveLonghand('textDecorationLine', new Map([['textDecoration', 'red']]))).toBeUndefined()
+    })
+
+    it('returns undefined when textDecoration is absent', () => {
+      expect(resolveLonghand('textDecorationLine', new Map())).toBeUndefined()
+    })
+
+    it('prefers literal textDecorationLine over extracting from shorthand', () => {
+      const values = new Map([
+        ['textDecorationLine', 'overline'],
+        ['textDecoration', 'underline red'],
+      ])
+      expect(resolveLonghand('textDecorationLine', values)).toBe('overline')
+    })
+  })
 })

package/src/converters/css-longhand-resolver.ts

@@ -1,5 +1,6 @@
 import type { CSS_PROPERTIES } from '@wix/react-component-schema'
 import { type Value, generate, parse } from 'css-tree'
+import { SHORTHAND_FALLBACKS } from './css-shorthand-composer'
 
 /**
  * Resolves a CSS longhand to its default value by reading the developer's
@@ -195,6 +196,25 @@ function fromCorner(from: string, corner: keyof CornerValues): Fallback {
   }
 }
 
+/**
+ * `text-decoration: <line> || <style> || <color>` — order is free and any
+ * subset is valid. The schema asks for `textDecorationLine` specifically, so
+ * we filter the shorthand's tokens down to just the line-keyword ones.
+ *
+ * Closed set of legal line keywords per the CSS spec (case-insensitive).
+ */
+const TEXT_DECORATION_LINE_KEYWORDS = new Set(['none', 'underline', 'overline', 'line-through', 'blink'])
+
+const fromTextDecorationLine: Fallback = (values) => {
+  const shorthand = values.get('textDecoration')
+  if (shorthand === undefined) return undefined
+  const lineTokens = splitTopLevelTokens(shorthand).filter((token) =>
+    TEXT_DECORATION_LINE_KEYWORDS.has(token.toLowerCase()),
+  )
+  if (lineTokens.length === 0) return undefined
+  return lineTokens.join(' ')
+}
+
 // ─────────────────────────────────────────────────────────────────────────────
 // Resolution table
 //
@@ -230,6 +250,14 @@ const FALLBACKS: Partial<Record<CssPropertyName, Fallback[]>> = {
   // Background — populate the schema's `background` from `background-color` when
   // the developer only wrote the color.
   background: [fromKey('backgroundColor')],
+
+  // Text-decoration — `text-decoration: underline wavy red` carries line, style,
+  // and color in one declaration. Pick out just the line tokens for the schema.
+  textDecorationLine: [fromTextDecorationLine],
+
+  // Shorthand targets (e.g. `font`) live in css-shorthand-composer.ts and are
+  // merged in here — composer-driven, conceptually the inverse of the rows above.
+  ...SHORTHAND_FALLBACKS,
 }
 
 // ─────────────────────────────────────────────────────────────────────────────

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],
+}