@wix/zero-config-implementation 1.98.0 → 1.100.0

package/package.json

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

package/src/component-renderer.ts

@@ -94,6 +94,16 @@ const isDOMTag = (type: unknown): type is string => typeof type === 'string' &&
 
 type ElementCreator = (type: unknown, props: unknown, ...rest: unknown[]) => ReactElement
 
+/**
+ * Whether a child slot rendered nothing - what a node prop mocked to null leaves
+ * behind. `false` is excluded: it is what an unrendered conditional leaves, and a
+ * conditional on a mocked boolean would make the slot depend on the faker sequence.
+ */
+function isEmptySlot(child: unknown): boolean {
+  if (Array.isArray(child)) return child.some(isEmptySlot)
+  return child === null || child === undefined
+}
+
 /**
  * Creates an intercepted version of an element creation function.
  * Works with both createElement (children as rest params) and jsx/jsxs (children in props).
@@ -103,14 +113,19 @@ function createInterceptor(
   listeners: CreateElementListener[],
   getNextId: () => string,
   store: ExtractorStore,
+  /** jsx/jsxs/jsxDEV take children in props and a key as the third argument. */
+  childrenInProps: boolean,
 ): ElementCreator {
   return (type, elementProps, ...rest) => {
     const props = (elementProps ?? {}) as Record<string, unknown>
     const isDomElement = isDOMTag(type)
     const traceId = isDomElement ? getNextId() : undefined
 
-    // Children location differs: createElement uses rest params, jsx/jsxs uses props.children
-    const children = rest.length > 0 ? rest : props.children ? [props.children] : []
+    // Children location differs: createElement takes rest params but also accepts them
+    // in props, jsx/jsxs only in props. Keyed on presence, not truthiness, so a slot
+    // that rendered nothing is still visible.
+    const children = childrenInProps || rest.length === 0 ? ('children' in props ? [props.children] : []) : rest
+    const hasEmptySlot = children.some(isEmptySlot)
 
     const event: CreateElementEvent = {
       type,
@@ -119,6 +134,7 @@ function createInterceptor(
       props: { ...props, children },
       traceId,
       children: children as unknown[],
+      hasEmptySlot,
       store,
     }
 
@@ -322,10 +338,11 @@ export function renderWithExtractors(
     listeners,
     getNextId,
     store,
+    false,
   )
-  const interceptedJsx = createInterceptor(originalJsx as ElementCreator, listeners, getNextId, store)
-  const interceptedJsxs = createInterceptor(originalJsxs as ElementCreator, listeners, getNextId, store)
-  const interceptedJsxDEV = createInterceptor(originalJsxDEV as ElementCreator, listeners, getNextId, store)
+  const interceptedJsx = createInterceptor(originalJsx as ElementCreator, listeners, getNextId, store, true)
+  const interceptedJsxs = createInterceptor(originalJsxs as ElementCreator, listeners, getNextId, store, true)
+  const interceptedJsxDEV = createInterceptor(originalJsxDEV as ElementCreator, listeners, getNextId, store, true)
 
   // The shim reads globalThis[REACT_KEY] on every hook call, so pointing it at
   // userReact ensures ESM hooks use the same dispatcher that SSR drives.

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

@@ -131,6 +131,41 @@ describe('resolveLonghand', () => {
     expect(resolveLonghand('paddingTop', new Map())).toBeUndefined()
   })
 
+  describe('margin family', () => {
+    it('marginTop falls back through marginBlockStart → marginBlock → margin', () => {
+      expect(resolveLonghand('marginTop', new Map([['marginBlockStart', '1px']]))).toBe('1px')
+      expect(resolveLonghand('marginTop', new Map([['marginBlock', '4px 8px']]))).toBe('4px')
+      expect(resolveLonghand('marginTop', new Map([['margin', '1rem 2rem']]))).toBe('1rem')
+    })
+
+    it('marginBottom falls back through marginBlockEnd → marginBlock → margin', () => {
+      expect(resolveLonghand('marginBottom', new Map([['marginBlockEnd', '2px']]))).toBe('2px')
+      expect(resolveLonghand('marginBottom', new Map([['marginBlock', '4px 8px']]))).toBe('8px')
+      expect(resolveLonghand('marginBottom', new Map([['margin', '1rem 2rem']]))).toBe('1rem')
+    })
+
+    it('marginInlineStart falls back through marginLeft → marginInline → margin', () => {
+      expect(resolveLonghand('marginInlineStart', new Map([['marginLeft', '7px']]))).toBe('7px')
+      expect(resolveLonghand('marginInlineStart', new Map([['marginInline', '12px']]))).toBe('12px')
+      expect(resolveLonghand('marginInlineStart', new Map([['marginInline', '12px 24px']]))).toBe('12px')
+      expect(resolveLonghand('marginInlineStart', new Map([['margin', '1px 2px 3px 4px']]))).toBe('4px')
+    })
+
+    it('marginInlineEnd falls back through marginRight → marginInline → margin', () => {
+      expect(resolveLonghand('marginInlineEnd', new Map([['marginRight', '9px']]))).toBe('9px')
+      expect(resolveLonghand('marginInlineEnd', new Map([['marginInline', '12px 24px']]))).toBe('24px')
+      expect(resolveLonghand('marginInlineEnd', new Map([['margin', '1px 2px 3px 4px']]))).toBe('2px')
+    })
+
+    it('prefers the literal longhand over any fallback', () => {
+      const values = new Map([
+        ['marginTop', '5px'],
+        ['margin', '10px'],
+      ])
+      expect(resolveLonghand('marginTop', values)).toBe('5px')
+    })
+  })
+
   describe('padding family', () => {
     it('paddingTop falls back through paddingBlockStart → paddingBlock → padding', () => {
       expect(resolveLonghand('paddingTop', new Map([['paddingBlockStart', '1px']]))).toBe('1px')

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

@@ -215,6 +215,18 @@ const fromTextDecorationLine: Fallback = (values) => {
   return lineTokens.join(' ')
 }
 
+/**
+ * `flex-flow: <flex-direction> || <flex-wrap>` — order is free and either
+ * part may be omitted. Pick out just the direction keyword for the schema.
+ */
+const FLEX_DIRECTION_KEYWORDS = new Set(['row', 'row-reverse', 'column', 'column-reverse'])
+
+const fromFlexFlowDirection: Fallback = (values) => {
+  const shorthand = values.get('flexFlow')
+  if (shorthand === undefined) return undefined
+  return splitTopLevelTokens(shorthand).find((token) => FLEX_DIRECTION_KEYWORDS.has(token.toLowerCase()))
+}
+
 // ─────────────────────────────────────────────────────────────────────────────
 // Resolution table
 //
@@ -233,6 +245,12 @@ const FALLBACKS: Partial<Record<CssPropertyName, Fallback[]>> = {
   paddingInlineStart: [fromKey('paddingLeft'), fromAxis('paddingInline', 'start'), fromBox('padding', 'left')],
   paddingInlineEnd: [fromKey('paddingRight'), fromAxis('paddingInline', 'end'), fromBox('padding', 'right')],
 
+  // Margin — same block/inline convention as padding above.
+  marginTop: [fromKey('marginBlockStart'), fromAxis('marginBlock', 'start'), fromBox('margin', 'top')],
+  marginBottom: [fromKey('marginBlockEnd'), fromAxis('marginBlock', 'end'), fromBox('margin', 'bottom')],
+  marginInlineStart: [fromKey('marginLeft'), fromAxis('marginInline', 'start'), fromBox('margin', 'left')],
+  marginInlineEnd: [fromKey('marginRight'), fromAxis('marginInline', 'end'), fromBox('margin', 'right')],
+
   // Border radius — schema uses all-logical corner names; physical names map under LTR/horizontal-tb.
   borderStartStartRadius: [fromKey('borderTopLeftRadius'), fromCorner('borderRadius', 'tl')],
   borderStartEndRadius: [fromKey('borderTopRightRadius'), fromCorner('borderRadius', 'tr')],
@@ -255,6 +273,10 @@ const FALLBACKS: Partial<Record<CssPropertyName, Fallback[]>> = {
   // and color in one declaration. Pick out just the line tokens for the schema.
   textDecorationLine: [fromTextDecorationLine],
 
+  // Flex — `flex-flow: column wrap` carries both direction and wrap; pick out
+  // just the direction keyword for the schema.
+  flexDirection: [fromFlexFlowDirection],
+
   // 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/states-builder.test.ts

@@ -11,6 +11,7 @@ function makeElement(input: { tag: string; className: string; attributes?: Recor
     boundProps: [],
     concatenatedAttrs: new Map(),
     eventHandlers: [],
+    hasEmptySlot: false,
   }
   return {
     traceId: 'trace-0',

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

@@ -346,6 +346,72 @@ describe('toEditorReactComponent — cssProperties defaultValue', () => {
       defaultValue: 'var(--wst-primary-background-color)',
     })
   })
+
+  it('excludes width/height from the root element (sizing is handled via layout config)', () => {
+    const extractorData = new Map<string, unknown>()
+    extractorData.set('css-matcher', matcherDataFromCss('width: 100px; height: 50px; overflow: hidden;'))
+    extractorData.set('css-properties', {
+      relevant: [
+        CSS_PROPERTIES.CSS_PROPERTY_TYPE.width,
+        CSS_PROPERTIES.CSS_PROPERTY_TYPE.height,
+        CSS_PROPERTIES.CSS_PROPERTY_TYPE.overflow,
+      ],
+    })
+
+    const rootElement: ExtractedElement = {
+      traceId: 'trace-root',
+      name: 'root',
+      tag: 'div',
+      attributes: {},
+      extractorData,
+      children: [],
+    }
+
+    const result = toEditorReactComponent(createComponent(rootElement))
+
+    expect(result.editorElement?.cssProperties?.width).toBeUndefined()
+    expect(result.editorElement?.cssProperties?.height).toBeUndefined()
+    expect(result.editorElement?.cssProperties?.overflow).toEqual({ defaultValue: 'hidden' })
+  })
+
+  it('keeps width/height on inner (non-root) elements', () => {
+    const rootExtractorData = new Map<string, unknown>()
+    rootExtractorData.set('css-matcher', matcherDataFromCss(''))
+    rootExtractorData.set('css-properties', { relevant: [] })
+
+    const childExtractorData = new Map<string, unknown>()
+    childExtractorData.set('css-matcher', matcherDataFromCss('width: 24px; height: 24px;'))
+    childExtractorData.set('css-properties', {
+      relevant: [CSS_PROPERTIES.CSS_PROPERTY_TYPE.width, CSS_PROPERTIES.CSS_PROPERTY_TYPE.height],
+    })
+
+    const childElement: ExtractedElement = {
+      traceId: 'trace-icon',
+      name: 'icon',
+      tag: 'img',
+      attributes: {},
+      extractorData: childExtractorData,
+      children: [],
+    }
+
+    const rootElement: ExtractedElement = {
+      traceId: 'trace-root',
+      name: 'root',
+      tag: 'div',
+      attributes: {},
+      extractorData: rootExtractorData,
+      children: [childElement],
+    }
+
+    const result = toEditorReactComponent(createComponent(rootElement))
+
+    expect(result.editorElement?.elements?.icon?.inlineElement?.cssProperties?.width).toEqual({
+      defaultValue: '24px',
+    })
+    expect(result.editorElement?.elements?.icon?.inlineElement?.cssProperties?.height).toEqual({
+      defaultValue: '24px',
+    })
+  })
 })
 
 describe('toEditorReactComponent selector conversion', () => {

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

@@ -25,7 +25,11 @@ import type {
   ExtractedElement,
   TrackingStores,
 } from '../information-extractors/react'
-import { getDefaultDisplayForTag, resolveDisplayValue } from '../information-extractors/react'
+import {
+  ROOT_DISPLAY_CUSTOM_PROPERTY,
+  getDefaultDisplayForTag,
+  resolveDisplayValue,
+} from '../information-extractors/react'
 import { findPreferredSemanticClass, normalizeClassNames } from '../utils/css-class'
 import { buildActiveItemDisplayGroups, buildActiveItemIndexDisplayFilters } from './active-item-index-builder'
 import { resolveLonghand } from './css-longhand-resolver'
@@ -307,7 +311,7 @@ function buildNearestCommonAncestorCustomProps(
   const nearestCommonAncestorCustomProps = new Map<string, Record<string, CssCustomPropertyItem>>()
 
   for (const varName of varNames) {
-    if (varName === '--display') continue
+    if (varName === ROOT_DISPLAY_CUSTOM_PROPERTY) continue
 
     const registration = registeredByVar.get(varName)
     // Prefer a concrete declared value; fall back to the @property initial-value so a
@@ -563,6 +567,10 @@ function toDisplayEnumValue(cssValue: string): DisplayEnumValue {
   return (CSS_DISPLAY_TO_ENUM[cssValue] ?? cssValue) as DisplayEnumValue
 }
 
+// Root sizing is handled separately via layout config, so `width`/`height`
+// are excluded from the root element's own `cssProperties`.
+const ROOT_EXCLUDED_CSS_PROPERTIES = new Set<string>([CSS_PROPERTY_TYPE.width, CSS_PROPERTY_TYPE.height])
+
 function buildCssProperties(
   element: ExtractedElement | undefined,
   isRootElement: boolean,
@@ -576,6 +584,9 @@ function buildCssProperties(
   }
   const cssPropertyValues = element ? getMatchedPropertyValues(element) : new Map<string, string>()
   for (const propName of decidedProperties) {
+    if (isRootElement && ROOT_EXCLUDED_CSS_PROPERTIES.has(propName)) {
+      continue
+    }
     if (propName === CSS_PROPERTY_TYPE.display && element) {
       if (!isRootElement) {
         result[propName] = buildDisplayProperty(element)

package/src/information-extractors/react/extractors/core/tree-builder.test.ts

@@ -0,0 +1,186 @@
+import { CSS_PROPERTIES } from '@wix/react-component-schema'
+import { describe, expect, it } from 'vitest'
+import type { CssPropertiesData } from '../css-properties'
+import { getCssPropertiesForTag } from '../css-properties'
+import { ExtractorStore } from './store'
+import { type ExtractedElement, buildElementTree } from './tree-builder'
+
+const { CSS_PROPERTY_TYPE } = CSS_PROPERTIES
+
+function createStoreForTags(tagsByTraceId: Record<string, string>, emptySlotTraceIds: string[] = []): ExtractorStore {
+  const store = new ExtractorStore()
+  for (const [traceId, tag] of Object.entries(tagsByTraceId)) {
+    store.set(traceId, 'css-properties', { relevant: getCssPropertiesForTag(tag) })
+    store.set(traceId, 'prop-tracker', {
+      tag,
+      boundProps: [],
+      concatenatedAttrs: new Map<string, string>(),
+      eventHandlers: [],
+      hasEmptySlot: emptySlotTraceIds.includes(traceId),
+    })
+  }
+  return store
+}
+
+function findElementByName(elements: ExtractedElement[], name: string): ExtractedElement | undefined {
+  for (const element of elements) {
+    if (element.name === name) return element
+    const match = findElementByName(element.children, name)
+    if (match) return match
+  }
+  return undefined
+}
+
+function relevantPropertiesOf(element: ExtractedElement): string[] {
+  const cssData = element.extractorData.get('css-properties') as CssPropertiesData | undefined
+  return cssData?.relevant ?? []
+}
+
+describe('buildElementTree - button typography', () => {
+  const TEXT_PROPERTIES = [
+    CSS_PROPERTY_TYPE.font,
+    CSS_PROPERTY_TYPE.lineHeight,
+    CSS_PROPERTY_TYPE.letterSpacing,
+    CSS_PROPERTY_TYPE.textDecorationLine,
+    CSS_PROPERTY_TYPE.textTransform,
+    CSS_PROPERTY_TYPE.textAlign,
+    CSS_PROPERTY_TYPE.textShadow,
+    CSS_PROPERTY_TYPE.color,
+  ]
+
+  it('gives a button the full text set when its label sits in a dropped wrapper', () => {
+    const html = `
+      <div data-trace-id="t1" class="label-button">
+        <button data-trace-id="t2" class="label-button__trigger">
+          <span data-trace-id="t3" class="_label_1x9fa">Play</span>
+        </button>
+      </div>
+    `
+    const store = createStoreForTags({ t1: 'div', t2: 'button', t3: 'span' })
+
+    const tree = buildElementTree(html, store)
+    const trigger = findElementByName(tree, 'labelButtonTrigger')
+
+    expect(trigger).toBeDefined()
+    expect(relevantPropertiesOf(trigger!)).toEqual(expect.arrayContaining(TEXT_PROPERTIES))
+  })
+
+  it('keeps a text-free button to color alone, with no typography', () => {
+    const html = `
+      <div data-trace-id="t1" class="icon-button">
+        <button data-trace-id="t2" class="icon-button__trigger" aria-label="Play">
+          <svg data-trace-id="t3" viewBox="0 0 24 24"><path d="M7 4v16l12-8z"></path></svg>
+        </button>
+      </div>
+    `
+    const store = createStoreForTags({ t1: 'div', t2: 'button', t3: 'svg' })
+
+    const tree = buildElementTree(html, store)
+    const trigger = findElementByName(tree, 'iconButtonTrigger')
+
+    expect(trigger).toBeDefined()
+    expect(relevantPropertiesOf(trigger!)).toContain(CSS_PROPERTY_TYPE.paddingTop)
+    expect(relevantPropertiesOf(trigger!)).toContain(CSS_PROPERTY_TYPE.color)
+    for (const textProperty of TEXT_PROPERTIES.filter((property) => property !== CSS_PROPERTY_TYPE.color)) {
+      expect(relevantPropertiesOf(trigger!)).not.toContain(textProperty)
+    }
+  })
+
+  it('keeps typography on a button whose content prop rendered nothing', () => {
+    const html = `
+      <div data-trace-id="t1" class="cta-button">
+        <button data-trace-id="t2" class="cta-button__trigger"></button>
+      </div>
+    `
+    const store = createStoreForTags({ t1: 'div', t2: 'button' }, ['t2'])
+
+    const tree = buildElementTree(html, store)
+    const trigger = findElementByName(tree, 'ctaButtonTrigger')
+
+    // Node props mock to null, so an empty button may still render text at runtime
+    expect(relevantPropertiesOf(trigger!)).toContain(CSS_PROPERTY_TYPE.font)
+  })
+
+  it('keeps typography on a button whose slotted label sits in a wrapper', () => {
+    const html = `
+      <div data-trace-id="t1" class="cta-button">
+        <button data-trace-id="t2" class="cta-button__trigger">
+          <span data-trace-id="t3" class="_label_1x9fa"></span>
+        </button>
+      </div>
+    `
+    const store = createStoreForTags({ t1: 'div', t2: 'button', t3: 'span' }, ['t3'])
+
+    const tree = buildElementTree(html, store)
+    const trigger = findElementByName(tree, 'ctaButtonTrigger')
+
+    // The wrapper is dropped and its slotted label mocked to null, so the button
+    // is the only element left that can carry the typography
+    expect(relevantPropertiesOf(trigger!)).toContain(CSS_PROPERTY_TYPE.font)
+  })
+
+  it('keeps typography on a button holding an icon beside a slotted label', () => {
+    const html = `
+      <div data-trace-id="t1" class="cta-button">
+        <button data-trace-id="t2" class="cta-button__trigger">
+          <svg data-trace-id="t3" viewBox="0 0 24 24"><path d="M7 4v16l12-8z"></path></svg>
+        </button>
+      </div>
+    `
+    const store = createStoreForTags({ t1: 'div', t2: 'button', t3: 'svg' }, ['t2'])
+
+    const tree = buildElementTree(html, store)
+    const trigger = findElementByName(tree, 'ctaButtonTrigger')
+
+    // The icon is the only child left once the slotted label mocks to null
+    expect(relevantPropertiesOf(trigger!)).toContain(CSS_PROPERTY_TYPE.font)
+  })
+
+  it('keeps typography off a button that rendered nothing at all', () => {
+    const html = `
+      <div data-trace-id="t1" class="spacer-button">
+        <button data-trace-id="t2" class="spacer-button__trigger"></button>
+      </div>
+    `
+    const store = createStoreForTags({ t1: 'div', t2: 'button' })
+
+    const tree = buildElementTree(html, store)
+    const trigger = findElementByName(tree, 'spacerButtonTrigger')
+
+    expect(relevantPropertiesOf(trigger!)).not.toContain(CSS_PROPERTY_TYPE.font)
+  })
+
+  it('finds a slot in a wrapper that also rendered an icon', () => {
+    const html = `
+      <div data-trace-id="t1" class="cta-button">
+        <button data-trace-id="t2" class="cta-button__trigger">
+          <span data-trace-id="t3" class="_content_1x9fa">
+            <svg data-trace-id="t4" viewBox="0 0 24 24"><path d="M7 4v16l12-8z"></path></svg>
+          </span>
+        </button>
+      </div>
+    `
+    const store = createStoreForTags({ t1: 'div', t2: 'button', t3: 'span', t4: 'svg' }, ['t3'])
+
+    const tree = buildElementTree(html, store)
+    const trigger = findElementByName(tree, 'ctaButtonTrigger')
+
+    expect(relevantPropertiesOf(trigger!)).toContain(CSS_PROPERTY_TYPE.font)
+  })
+
+  it('ignores text that only SVG metadata renders', () => {
+    const html = `
+      <div data-trace-id="t1" class="icon-button">
+        <button data-trace-id="t2" class="icon-button__trigger">
+          <svg data-trace-id="t3" viewBox="0 0 24 24"><title>Play</title><path d="M7 4v16l12-8z"></path></svg>
+        </button>
+      </div>
+    `
+    const store = createStoreForTags({ t1: 'div', t2: 'button', t3: 'svg' })
+
+    const tree = buildElementTree(html, store)
+    const trigger = findElementByName(tree, 'iconButtonTrigger')
+
+    expect(relevantPropertiesOf(trigger!)).not.toContain(CSS_PROPERTY_TYPE.font)
+  })
+})

package/src/information-extractors/react/extractors/core/tree-builder.ts

@@ -11,7 +11,7 @@ import { TRACE_ATTR } from '../../../../component-renderer'
 import { findPreferredSemanticClass, normalizeClassNames } from '../../../../utils/css-class'
 import { PRESETS_WRAPPER_CLASS_NAME } from '../../utils/mock-generator'
 import type { CssPropertiesData } from '../css-properties'
-import { addTextProperties } from '../css-properties'
+import { addTextProperties, rendersTextThroughContent } from '../css-properties'
 import type { PropTrackerData } from '../prop-tracker'
 import type { ExtractorStore } from './store'
 
@@ -111,11 +111,43 @@ const getAttributes = (element: Element): Record<string, string> => {
   return attrs
 }
 
+const hasVisibleText = (node: Node): boolean => isTextNode(node) && node.value.trim().length > 0
+
 /**
  * Checks if an element has direct text content (non-whitespace text nodes as children)
  */
-const hasDirectTextContent = (element: Element): boolean =>
-  element.childNodes.some((child) => isTextNode(child) && child.value.trim().length > 0)
+const hasDirectTextContent = (element: Element): boolean => element.childNodes.some(hasVisibleText)
+
+/** Tags whose text is metadata or source, never styleable text in the layout. */
+const NON_RENDERED_TEXT_TAGS = new Set(['title', 'desc', 'metadata', 'script', 'style', 'template'])
+
+/** An element whose own content can reach the page. */
+const isRenderedElement = (node: Node): node is Element =>
+  isElement(node) && !NON_RENDERED_TEXT_TAGS.has(node.tagName.toLowerCase())
+
+/** Checks if an element renders any text anywhere beneath it. */
+const hasDescendantTextContent = (element: Element): boolean =>
+  element.childNodes.some(
+    (child) => hasVisibleText(child) || (isRenderedElement(child) && hasDescendantTextContent(child)),
+  )
+
+/** Whether this element's own child slot rendered nothing. */
+const hasEmptySlot = (element: Element, store: ExtractorStore): boolean => {
+  const traceId = getAttribute(element, TRACE_ATTR)
+  return Boolean(traceId && store.get<PropTrackerData>(traceId, 'prop-tracker')?.hasEmptySlot)
+}
+
+/** Whether content is missing from this element's own slot, or from one below it. */
+const hasMissingContent = (element: Element, store: ExtractorStore): boolean =>
+  hasEmptySlot(element, store) ||
+  element.childNodes.some((child) => isElement(child) && hasMissingContent(child, store))
+
+/**
+ * Returns true if an element renders no text. Content the probe could not produce
+ * leaves this unknown, so an element missing content returns false.
+ */
+const rendersNoText = (element: Element, store: ExtractorStore): boolean =>
+  !hasDescendantTextContent(element) && !hasMissingContent(element, store)
 
 /**
  * Normalizes a tag name to its semantic camelCase form
@@ -275,8 +307,12 @@ export function buildElementTree(html: string, store: ExtractorStore): Extracted
       // Check for text content
       const hasText = hasDirectTextContent(node)
 
-      // If element has text content and has css-properties data, add text properties
-      if (hasText) {
+      // Wrappers without a semantic class never reach the tree, so an element whose
+      // text comes from its content must own the typography itself.
+      const rendersText = hasText || (rendersTextThroughContent(node.tagName) && !rendersNoText(node, store))
+
+      // If element renders text and has css-properties data, add text properties
+      if (rendersText) {
         const cssData = extractorData.get('css-properties') as CssPropertiesData | undefined
         if (cssData) {
           const enhanced: CssPropertiesData = {

package/src/information-extractors/react/extractors/core/types.ts

@@ -24,6 +24,8 @@ export interface CreateElementEvent {
   props: Record<string, unknown>
   traceId?: string
   children: unknown[]
+  /** True when a child slot rendered nothing, e.g. a `children` prop mocked to null. */
+  hasEmptySlot?: boolean
   store: ExtractorStore
 }