@wix/zero-config-implementation 1.99.0 → 1.101.0

package/package.json

@@ -4,7 +4,7 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "version": "1.99.0",
+  "version": "1.101.0",
   "description": "Core library for extracting component manifests from JS and CSS files",
   "type": "module",
   "main": "dist/index.js",
@@ -106,5 +106,5 @@
       ]
     }
   },
-  "falconPackageHash": "905a961b05476216ee10b85e56b0d50818e5247abe594c0917619c0a"
+  "falconPackageHash": "7aa5841bf5ff6a0fa0800fc3d71a267d6e96dbe084125f5fd56fc333"
 }

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/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', () => {
@@ -659,6 +725,65 @@ describe('toEditorReactComponent — @property design tokens', () => {
     expect(editorElement?.cssProperties?.['sdf-safelight-color']).toBeUndefined()
     expect(editorElement?.cssProperties?.['--sdf-safelight-color']).toBeUndefined()
   })
+
+  it('places a declared custom property on its declaring element even when its only tracked usage was pruned from the tree', () => {
+    const buttonElement: ExtractedElement = {
+      traceId: 'trace-button',
+      name: 'button',
+      tag: 'button',
+      attributes: { class: 'play-button' },
+      extractorData: new Map<string, unknown>([
+        ['css-matcher', { matches: [], customProperties: { '--icon-color': 'red' } } as MatchedCssData],
+      ]),
+      children: [],
+    }
+    const rootElement: ExtractedElement = {
+      traceId: 'trace-root',
+      name: 'root',
+      tag: 'div',
+      attributes: {},
+      extractorData: new Map<string, unknown>(),
+      children: [buttonElement],
+    }
+    const component: ComponentInfoWithCss = {
+      componentName: 'IconButton',
+      props: {},
+      elements: [rootElement],
+      propUsages: new Map(),
+      css: [],
+      // The icon that actually consumes --icon-color has no semantic class, so it was
+      // already filtered out of `elements` upstream — its trace id survives only here.
+      varUsedByTraceId: new Map([['--icon-color', new Set(['trace-pruned-icon'])]]),
+    }
+
+    const editorElement = toEditorReactComponent(component).editorElement
+
+    expect(editorElement?.elements?.button?.inlineElement?.cssCustomProperties?.['icon-color']).toEqual({
+      displayName: 'Icon Color',
+      defaultValue: 'red',
+      cssPropertyType: 'color',
+    })
+    expect(editorElement?.cssCustomProperties?.['icon-color']).toBeUndefined()
+  })
+
+  it('falls back to the component root when a variable has no surviving declaration and only orphaned usage', () => {
+    const component: ComponentInfoWithCss = {
+      ...createComponentWithCss(`
+        @property --gap { syntax: "<length>"; inherits: true; initial-value: 4px; }
+      `),
+      // No element declares --gap locally; its only recorded usage is a trace id that
+      // never made it into `elements` (simulating a pruned consumer).
+      varUsedByTraceId: new Map([['--gap', new Set(['trace-orphan'])]]),
+    }
+
+    const customProps = toEditorReactComponent(component).editorElement?.cssCustomProperties
+
+    expect(customProps?.gap).toEqual({
+      displayName: 'Gap',
+      defaultValue: '4px',
+      cssPropertyType: 'length',
+    })
+  })
 })
 
 describe('toEditorReactComponent — ActiveItemIndex display groups', () => {

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'
@@ -244,7 +248,7 @@ function buildElements(
         ...(data && Object.keys(data).length > 0 && { data }),
         // CSS properties from heuristic + matched CSS files
         ...(Object.keys(cssProps).length > 0 && { cssProperties: cssProps }),
-        // CSS custom properties placed on the Nearest Common Ancestor of all elements that use each variable
+        // CSS custom properties for this element
         ...(Object.keys(cssCustomProps).length > 0 && { cssCustomProperties: cssCustomProps }),
         ...(states && { states }),
         // Recursively build nested elements
@@ -273,8 +277,9 @@ function buildElements(
 
 /**
  * Pre-computes a map of traceId → custom property items to assign to each element.
- * Each custom property is placed on the nearest common ancestor (Nearest Common Ancestor) of all elements
- * that use it via var(). Falls back to the element that defines it if unused.
+ * A variable is placed on the element that declares it; if none survived pruning, it
+ * falls back to the nearest common ancestor of its usages, or the root for a registered
+ * but undeclared @property.
  */
 function buildNearestCommonAncestorCustomProps(
   component: ComponentInfoWithCss,
@@ -307,23 +312,32 @@ 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
     // component doesn't need an element-level `--x: ...` declaration.
     const defaultValue = allCustomPropertyValues.get(varName) ?? registration?.defaultValue
 
-    const usedByTraceIds = component.varUsedByTraceId.get(varName) ?? new Set<string>()
+    // Declaration wins over usage; multiple declaring elements resolve to their NCA.
+    const definingTraceIds = findDefiningElements(component.elements, varName)
 
     let nearestCommonAncestorTraceId: string | undefined
-    if (usedByTraceIds.size > 0) {
-      nearestCommonAncestorTraceId = findNearestCommonAncestor(usedByTraceIds, parentMap)
+    if (definingTraceIds.size > 0) {
+      nearestCommonAncestorTraceId = findNearestCommonAncestor(definingTraceIds, parentMap)
     } else {
-      // Fallback: the element whose CSS selector defines the variable; failing that, a
-      // registered @property with no var() usage anchors on the component root.
+      // No surviving declaration — fall back to usage NCA, restricted to trace IDs still in the tree.
+      const usedByTraceIds = component.varUsedByTraceId.get(varName) ?? new Set<string>()
+      const survivingUsedByTraceIds = new Set(
+        [...usedByTraceIds].filter((traceId) => traceId === rootTraceId || parentMap.has(traceId)),
+      )
+
       nearestCommonAncestorTraceId =
-        findDefiningElement(component.elements, varName) ?? (registration ? rootTraceId : undefined)
+        survivingUsedByTraceIds.size > 0
+          ? findNearestCommonAncestor(survivingUsedByTraceIds, parentMap)
+          : registration
+            ? rootTraceId
+            : undefined
     }
 
     if (!nearestCommonAncestorTraceId) continue
@@ -502,17 +516,16 @@ function findNearestCommonAncestor(traceIds: Set<string>, parentMap: Map<string,
 }
 
 /**
- * Finds the traceId of the first element in the tree whose matched CSS rules
- * define the given custom property (fallback when var() usage is not tracked).
+ * Finds every surviving element whose matched CSS declares the given custom property.
  */
-function findDefiningElement(elements: ExtractedElement[], varName: string): string | undefined {
+function findDefiningElements(elements: ExtractedElement[], varName: string): Set<string> {
+  const definingTraceIds = new Set<string>()
   for (const element of elements) {
     const matcherData = element.extractorData.get('css-matcher') as MatchedCssData | undefined
-    if (matcherData?.customProperties[varName] !== undefined) return element.traceId
-    const childResult = findDefiningElement(element.children, varName)
-    if (childResult !== undefined) return childResult
+    if (matcherData?.customProperties[varName] !== undefined) definingTraceIds.add(element.traceId)
+    for (const traceId of findDefiningElements(element.children, varName)) definingTraceIds.add(traceId)
   }
-  return undefined
+  return definingTraceIds
 }
 
 // ─────────────────────────────────────────────────────────────────────────────
@@ -563,6 +576,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 +593,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/css-properties.test.ts

@@ -5,6 +5,7 @@ import type { MatchedCssData } from '../../css/types'
 import type { ExtractedElement } from './core/tree-builder'
 import {
   enrichContainerProperties,
+  enrichFlexProperties,
   getCssPropertiesForTag,
   getDefaultDisplayForTag,
   hasContainerLikeDisplay,
@@ -252,6 +253,131 @@ describe('getCssPropertiesForTag', () => {
     expect(relevantProperties).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.paddingTop)
     expect(relevantProperties).not.toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.font)
   })
+
+  it('gives block/replaced elements the full margin family regardless of box/text/media semantics', () => {
+    for (const tag of ['div', 'p', 'img']) {
+      const relevantProperties = getCssPropertiesForTag(tag)
+
+      expect(relevantProperties).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.marginTop)
+      expect(relevantProperties).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.marginBottom)
+      expect(relevantProperties).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.marginInlineStart)
+      expect(relevantProperties).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.marginInlineEnd)
+    }
+  })
+
+  it('gives non-replaced inline elements only the horizontal margins, per CSS margin-on-inline-boxes rules', () => {
+    for (const tag of ['span', 'a', 'em', 'b', 'i']) {
+      const relevantProperties = getCssPropertiesForTag(tag)
+
+      expect(relevantProperties).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.marginInlineStart)
+      expect(relevantProperties).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.marginInlineEnd)
+      expect(relevantProperties).not.toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.marginTop)
+      expect(relevantProperties).not.toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.marginBottom)
+    }
+  })
+
+  it('gives internal table display elements no margin at all, per CSS 2.1 §17.6.1', () => {
+    for (const tag of ['tr', 'thead', 'tbody', 'tfoot', 'col', 'colgroup', 'td', 'th']) {
+      const relevantProperties = getCssPropertiesForTag(tag)
+
+      expect(relevantProperties).not.toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.marginTop)
+      expect(relevantProperties).not.toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.marginBottom)
+      expect(relevantProperties).not.toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.marginInlineStart)
+      expect(relevantProperties).not.toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.marginInlineEnd)
+    }
+  })
+
+  it('gives box-generating elements width, height, overflow and mix-blend-mode', () => {
+    const relevantProperties = getCssPropertiesForTag('div')
+
+    expect(relevantProperties).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.width)
+    expect(relevantProperties).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.height)
+    expect(relevantProperties).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.overflow)
+    expect(relevantProperties).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.mixBlendMode)
+  })
+
+  it('gives media elements sizing, object-fit/position and mix-blend-mode', () => {
+    const relevantProperties = getCssPropertiesForTag('img')
+
+    expect(relevantProperties).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.width)
+    expect(relevantProperties).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.height)
+    expect(relevantProperties).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.overflow)
+    expect(relevantProperties).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.objectFit)
+    expect(relevantProperties).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.objectPosition)
+    expect(relevantProperties).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.mixBlendMode)
+  })
+
+  it('keeps text-only tags without width/height/overflow/object-fit', () => {
+    const relevantProperties = getCssPropertiesForTag('p')
+
+    expect(relevantProperties).not.toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.width)
+    expect(relevantProperties).not.toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.height)
+    expect(relevantProperties).not.toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.objectFit)
+  })
+})
+
+describe('enrichFlexProperties', () => {
+  it('adds flexDirection/justifyContent/alignItems to a flex container', () => {
+    const elements = [createElementWithCssProperties('div', 'display: flex')]
+
+    const [enrichedElement] = enrichFlexProperties(elements)
+    const cssData = enrichedElement.extractorData.get('css-properties') as { relevant: string[] }
+
+    expect(cssData.relevant).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.flexDirection)
+    expect(cssData.relevant).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.justifyContent)
+    expect(cssData.relevant).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.alignItems)
+    expect(cssData.relevant).not.toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.alignSelf)
+  })
+
+  it('does not add flex container properties to a non-flex/grid element', () => {
+    const elements = [createElementWithCssProperties('div', 'display: block')]
+
+    const [enrichedElement] = enrichFlexProperties(elements)
+    const cssData = enrichedElement.extractorData.get('css-properties') as { relevant: string[] }
+
+    expect(cssData.relevant).not.toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.flexDirection)
+    expect(cssData.relevant).not.toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.justifyContent)
+    expect(cssData.relevant).not.toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.alignItems)
+  })
+
+  it('adds alignSelf to direct children of a flex/grid container', () => {
+    const child = createElementWithCssProperties('span', '')
+    const parent: ExtractedElement = {
+      ...createElementWithCssProperties('div', 'display: flex'),
+      children: [child],
+    }
+
+    const [enrichedParent] = enrichFlexProperties([parent])
+    const enrichedChild = enrichedParent.children[0]
+    const childCssData = enrichedChild.extractorData.get('css-properties') as { relevant: string[] }
+
+    expect(childCssData.relevant).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.alignSelf)
+  })
+
+  it('does not add alignSelf to children of a non-flex/grid container', () => {
+    const child = createElementWithCssProperties('span', '')
+    const parent: ExtractedElement = {
+      ...createElementWithCssProperties('div', 'display: block'),
+      children: [child],
+    }
+
+    const [enrichedParent] = enrichFlexProperties([parent])
+    const enrichedChild = enrichedParent.children[0]
+    const childCssData = enrichedChild.extractorData.get('css-properties') as { relevant: string[] }
+
+    expect(childCssData.relevant).not.toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.alignSelf)
+  })
+
+  it('adds flex container properties to a grid container as well', () => {
+    const elements = [createElementWithCssProperties('div', 'display: grid')]
+
+    const [enrichedElement] = enrichFlexProperties(elements)
+    const cssData = enrichedElement.extractorData.get('css-properties') as { relevant: string[] }
+
+    expect(cssData.relevant).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.flexDirection)
+    expect(cssData.relevant).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.justifyContent)
+    expect(cssData.relevant).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.alignItems)
+  })
 })
 
 describe('getDefaultDisplayForTag', () => {
@@ -404,4 +530,14 @@ describe('enrichContainerProperties', () => {
     expect(cssData.relevant).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.font)
     expect(cssData.relevant).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.paddingTop)
   })
+
+  it('adds box properties to span when display is signaled only via the --display root convention, not a literal display declaration', () => {
+    const elements = [createElementWithCssProperties('span', '--display: block')]
+
+    const [enrichedElement] = enrichContainerProperties(elements)
+    const cssData = enrichedElement.extractorData.get('css-properties') as { relevant: string[] }
+
+    expect(cssData.relevant).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.font)
+    expect(cssData.relevant).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.paddingTop)
+  })
 })