@wix/zero-config-implementation 1.71.0 → 1.73.0

package/src/information-extractors/css/parse.ts

@@ -1,7 +1,7 @@
 import { CSS_PROPERTIES } from '@wix/react-component-schema'
 import { camelCase } from 'case-anything'
 import { generate, lexer, parse, walk } from 'css-tree'
-import type { Atrule, CssNode, Declaration, FunctionNode, Rule, Selector } from 'css-tree'
+import type { Atrule, CssNode, Declaration, FunctionNode, Rule, Selector, Value } from 'css-tree'
 import { stateNameFromModifier } from '../../utils/css-class'
 import type { CSSParserAPI, CSSProperty, NativePseudoClass, StateClassRule } from './types'
 
@@ -70,6 +70,12 @@ export function parseCss(cssString: string): CSSParserAPI {
       return buildDomSelector(parsed)
     },
 
+    getSelectorSpecificity(selector: string): [number, number, number] | null {
+      const parsed = parsedSelectors.get(selector)
+      if (!parsed) return null
+      return getSelectorSpecificity(parsed)
+    },
+
     getVarPropertyType(varName: string, defaultValue: string): string | undefined {
       const usages = this.getVarUsages(varName)
       if (usages.length === 0) return undefined
@@ -173,14 +179,133 @@ function extractProperty(declaration: Declaration, varUsagesByProperty: Map<stri
     }
 
     if (varRefs.length > 0) {
-      return { name, value, varRefs }
+      return { name, value, valueAst: declaration.value, varRefs }
     }
-    return { name, value }
+    return { name, value, valueAst: declaration.value }
   } catch {
     return null
   }
 }
 
+type ResolvedCssValue = { kind: 'resolved'; value: string } | { kind: 'unresolved' } | { kind: 'invalid' }
+
+function resolvedCssValue(value: string): ResolvedCssValue {
+  return { kind: 'resolved', value }
+}
+
+function unresolvedCssValue(): ResolvedCssValue {
+  return { kind: 'unresolved' }
+}
+
+function invalidCssValue(): ResolvedCssValue {
+  return { kind: 'invalid' }
+}
+
+function resolveValueSequence(
+  valueNodes: CssNode[],
+  customProperties: Record<string, string>,
+  seenVariables: Set<string>,
+): ResolvedCssValue {
+  const resolvedParts: string[] = []
+
+  for (const valueNode of valueNodes) {
+    const resolvedPart = resolveValueNode(valueNode, customProperties, seenVariables)
+    if (resolvedPart.kind !== 'resolved') return resolvedPart
+    if (resolvedPart.value.length > 0) {
+      resolvedParts.push(resolvedPart.value)
+    }
+  }
+
+  return resolvedCssValue(resolvedParts.join(' '))
+}
+
+function resolveVariableFunction(
+  functionNode: FunctionNode,
+  customProperties: Record<string, string>,
+  seenVariables: Set<string>,
+): ResolvedCssValue {
+  const functionArguments = [...functionNode.children]
+  const firstCommaIndex = functionArguments.findIndex(
+    (argumentNode) => argumentNode.type === 'Operator' && argumentNode.value === ',',
+  )
+
+  const variableReferenceNodes =
+    firstCommaIndex === -1 ? functionArguments : functionArguments.slice(0, firstCommaIndex)
+  const fallbackNodes = firstCommaIndex === -1 ? [] : functionArguments.slice(firstCommaIndex + 1)
+
+  const variableReference = variableReferenceNodes
+    .map((argumentNode) => generate(argumentNode))
+    .join('')
+    .trim()
+  const normalizedVariableName = variableReference.startsWith('--') ? variableReference : `--${variableReference}`
+
+  if (seenVariables.has(normalizedVariableName)) {
+    return invalidCssValue()
+  }
+
+  const customPropertyValue = customProperties[normalizedVariableName]
+  if (customPropertyValue !== undefined) {
+    try {
+      const customPropertyValueAst = parse(customPropertyValue, { context: 'value' }) as Value
+      const nextSeenVariables = new Set(seenVariables)
+      nextSeenVariables.add(normalizedVariableName)
+      const resolvedCustomPropertyValue = resolveValueSequence(
+        [...customPropertyValueAst.children],
+        customProperties,
+        nextSeenVariables,
+      )
+
+      if (resolvedCustomPropertyValue.kind === 'resolved') {
+        return resolvedCustomPropertyValue
+      }
+
+      if (resolvedCustomPropertyValue.kind === 'invalid') {
+        return fallbackNodes.length > 0
+          ? resolveValueSequence(fallbackNodes, customProperties, seenVariables)
+          : invalidCssValue()
+      }
+
+      return unresolvedCssValue()
+    } catch {
+      return invalidCssValue()
+    }
+  }
+
+  if (fallbackNodes.length > 0) {
+    return resolveValueSequence(fallbackNodes, customProperties, seenVariables)
+  }
+
+  return unresolvedCssValue()
+}
+
+function resolveValueNode(
+  valueNode: CssNode,
+  customProperties: Record<string, string>,
+  seenVariables: Set<string>,
+): ResolvedCssValue {
+  if (valueNode.type === 'Value') {
+    return resolveValueSequence([...valueNode.children], customProperties, seenVariables)
+  }
+
+  if (valueNode.type === 'Function' && valueNode.name === 'var') {
+    return resolveVariableFunction(valueNode, customProperties, seenVariables)
+  }
+
+  return resolvedCssValue(generate(valueNode).trim())
+}
+
+export function resolveCssPropertyValue(
+  property: CSSProperty,
+  customProperties: Record<string, string>,
+): string | undefined {
+  if (!property.valueAst || !property.varRefs || property.varRefs.length === 0) {
+    return property.value
+  }
+
+  const resolvedPropertyValue = resolveValueNode(property.valueAst, customProperties, new Set())
+  return resolvedPropertyValue.kind === 'resolved' ? resolvedPropertyValue.value : undefined
+}
+
 /**
  * Extracts all CSS custom property names referenced via var() by walking
  * the declaration value AST for Function nodes named "var".
@@ -395,6 +520,45 @@ function buildDomSelector(selector: Selector): string | null {
   return result || null
 }
 
+function getSelectorSpecificity(selector: Selector): [number, number, number] {
+  let idCount = 0
+  let classLikeCount = 0
+  let typeLikeCount = 0
+
+  for (const component of selector.children) {
+    if (component.type === 'IdSelector') {
+      idCount += 1
+      continue
+    }
+
+    if (component.type === 'ClassSelector' || component.type === 'AttributeSelector') {
+      classLikeCount += 1
+      continue
+    }
+
+    if (component.type === 'TypeSelector') {
+      if (component.name !== '*') {
+        typeLikeCount += 1
+      }
+      continue
+    }
+
+    if (component.type === 'PseudoElementSelector') {
+      typeLikeCount += 1
+      continue
+    }
+
+    if (component.type === 'PseudoClassSelector') {
+      if (component.name === 'where') {
+        continue
+      }
+      classLikeCount += 1
+    }
+  }
+
+  return [idCount, classLikeCount, typeLikeCount]
+}
+
 /**
  * Checks whether a CSS value matches a given CSS type (e.g. 'color', 'length').
  * Uses css-tree's lexer; returns true when the value conforms to the type grammar.

package/src/information-extractors/css/selector-matcher.ts

@@ -67,6 +67,8 @@ export function matchCssSelectors(
       if (!domSelector) continue
 
       try {
+        const selectorSpecificity = cssInfo.api.getSelectorSpecificity(selector) ?? [0, 0, 0]
+
         findMatchingElements($, domSelector, cssInfo.isCssModule).each((_index, element) => {
           const traceId = $(element).attr(TRACE_ATTR)
           if (!traceId) return
@@ -89,7 +91,7 @@ export function matchCssSelectors(
 
           if (regular.length > 0) {
             const existing = matchesByTraceId.get(traceId) ?? []
-            existing.push({ selector, properties: regular })
+            existing.push({ selector, properties: regular, specificity: selectorSpecificity })
             matchesByTraceId.set(traceId, existing)
 
             // Track which CSS custom properties are used (via var()) by this element

package/src/information-extractors/css/types.ts

@@ -1,6 +1,10 @@
+import type { CssNode } from 'css-tree'
+
 export interface CSSProperty {
   name: string
   value: string
+  /** Parsed css-tree AST for the property's value. */
+  valueAst?: CssNode
   /** CSS variable names referenced via var() in this property's value */
   varRefs?: string[]
 }
@@ -8,6 +12,7 @@ export interface CSSProperty {
 export interface CssSelectorMatch {
   selector: string
   properties: CSSProperty[]
+  specificity: [number, number, number]
 }
 
 export interface MatchedCssData {
@@ -76,6 +81,12 @@ export interface CSSParserAPI {
    */
   getDomSelector: (selector: string) => string | null
 
+  /**
+   * Gets the selector specificity tuple as [ids, classes/attrs/pseudo-classes, elements/pseudo-elements].
+   * Returns null when the selector was not parsed.
+   */
+  getSelectorSpecificity: (selector: string) => [number, number, number] | null
+
   /**
    * Determines the CSS property type for a custom property based on how it is used.
    * If all usages of varName are within the same CSS property, returns that property name.

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

@@ -8,7 +8,7 @@
 import { camelCase } from 'case-anything'
 import { type DefaultTreeAdapterMap, parseFragment } from 'parse5'
 import { TRACE_ATTR } from '../../../../component-renderer'
-import { findPreferredSemanticClass } from '../../../../utils/css-class'
+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'
@@ -174,7 +174,7 @@ function getElementNamePart(element: Element, getElementById: (id: string) => El
 
   const classAttr = getAttribute(element, 'class')
   if (classAttr) {
-    const semanticClass = findPreferredSemanticClass(classAttr.split(' '))
+    const semanticClass = findPreferredSemanticClass(normalizeClassNames(classAttr))
     if (semanticClass) elementName = semanticClass
   }
 
@@ -197,7 +197,7 @@ function getElementNamePart(element: Element, getElementById: (id: string) => El
 function hasClassNameCriteria(element: Element, extractorData: Map<string, unknown>): boolean {
   const classAttr = getAttribute(element, 'class')
   if (classAttr) {
-    const semanticClass = findPreferredSemanticClass(classAttr.split(' '))
+    const semanticClass = findPreferredSemanticClass(normalizeClassNames(classAttr))
     if (semanticClass) return true
   }
 

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

@@ -17,13 +17,12 @@ export interface RenderContext {
   store: ExtractorStore
 }
 
-/**
- * Event emitted for each DOM element created during render.
- */
 export interface CreateElementEvent {
-  tag: string
+  type: unknown
+  isDomElement: boolean
+  tag?: string
   props: Record<string, unknown>
-  traceId: string
+  traceId?: string
   children: unknown[]
   store: ExtractorStore
 }

package/src/information-extractors/react/extractors/css-properties.test.ts

@@ -1,7 +1,15 @@
+import { CSS_PROPERTIES } from '@wix/react-component-schema'
 import { describe, expect, it } from 'vitest'
 import { parseCss } from '../../css/parse'
 import type { MatchedCssData } from '../../css/types'
-import { hasFlexOrGridDisplay } from './css-properties'
+import type { ExtractedElement } from './core/tree-builder'
+import {
+  enrichContainerProperties,
+  getCssPropertiesForTag,
+  getDefaultDisplayForTag,
+  hasContainerLikeDisplay,
+  hasFlexOrGridDisplay,
+} from './css-properties'
 
 function matcherDataFromCss(declarations: string): MatchedCssData {
   const properties = parseCss(`.test { ${declarations} }`).getPropertiesForSelector('.test')
@@ -12,16 +20,49 @@ function matcherDataFromCss(declarations: string): MatchedCssData {
     }
   }
   return {
-    matches: [{ selector: '.test', properties: properties.filter((property) => !property.name.startsWith('--')) }],
+    matches: [
+      {
+        selector: '.test',
+        properties: properties.filter((property) => !property.name.startsWith('--')),
+        specificity: [0, 1, 0],
+      },
+    ],
     customProperties,
   }
 }
 
+function createElementWithCssProperties(
+  tag: string,
+  declarations: string,
+  attributes: Record<string, string> = {},
+): ExtractedElement {
+  const extractorData = new Map<string, unknown>()
+  extractorData.set('css-matcher', matcherDataFromCss(declarations))
+  extractorData.set('css-properties', { relevant: getCssPropertiesForTag(tag, attributes.role) })
+
+  return {
+    traceId: 'trace-1',
+    name: 'element',
+    tag,
+    attributes,
+    extractorData,
+    children: [],
+  }
+}
+
 describe('hasFlexOrGridDisplay', () => {
   it('returns true for display: flex', () => {
     expect(hasFlexOrGridDisplay(matcherDataFromCss('display: flex'))).toBe(true)
   })
 
+  it('returns true for display: block flex', () => {
+    expect(hasFlexOrGridDisplay(matcherDataFromCss('display: block flex'))).toBe(true)
+  })
+
+  it('returns true for display: inline grid', () => {
+    expect(hasFlexOrGridDisplay(matcherDataFromCss('display: inline grid'))).toBe(true)
+  })
+
   it('returns false for display: block', () => {
     expect(hasFlexOrGridDisplay(matcherDataFromCss('display: block'))).toBe(false)
   })
@@ -42,3 +83,254 @@ describe('hasFlexOrGridDisplay', () => {
     expect(hasFlexOrGridDisplay(matcherDataFromCss('display: var(--d)'))).toBe(true)
   })
 })
+
+describe('hasContainerLikeDisplay', () => {
+  it('returns true for display: block', () => {
+    expect(hasContainerLikeDisplay(matcherDataFromCss('display: block'))).toBe(true)
+  })
+
+  it('returns true for display: inline-block', () => {
+    expect(hasContainerLikeDisplay(matcherDataFromCss('display: inline-block'))).toBe(true)
+  })
+
+  it('returns false for display: inline', () => {
+    expect(hasContainerLikeDisplay(matcherDataFromCss('display: inline'))).toBe(false)
+  })
+
+  it('returns true when var cannot be resolved', () => {
+    expect(hasContainerLikeDisplay(matcherDataFromCss('display: var(--d)'))).toBe(true)
+  })
+
+  it('returns false when a missing local var falls back to inline', () => {
+    expect(hasContainerLikeDisplay(matcherDataFromCss('display: var(--d, inline)'))).toBe(false)
+  })
+
+  it('returns true when a local custom property chain falls back to inline-flex', () => {
+    expect(
+      hasContainerLikeDisplay(
+        matcherDataFromCss(
+          'display: var(--component-display, inline); --component-display: var(--theme-display, inline-flex)',
+        ),
+      ),
+    ).toBe(true)
+  })
+
+  it('returns false when a locally defined cyclic var falls back to inline', () => {
+    expect(hasContainerLikeDisplay(matcherDataFromCss('display: var(--d, inline); --d: var(--d)'))).toBe(false)
+  })
+
+  it('returns false when a cyclic custom property has its own inner fallback but display falls back to inline', () => {
+    expect(hasContainerLikeDisplay(matcherDataFromCss('display: var(--d, inline); --d: var(--d, inline-flex)'))).toBe(
+      false,
+    )
+  })
+
+  it('uses the last matched display declaration when selectors conflict', () => {
+    const matcherData: MatchedCssData = {
+      matches: [
+        { selector: '.label', properties: [{ name: 'display', value: 'block' }], specificity: [0, 1, 0] },
+        { selector: '.label.compact', properties: [{ name: 'display', value: 'inline' }], specificity: [0, 2, 0] },
+      ],
+      customProperties: {},
+    }
+
+    expect(hasContainerLikeDisplay(matcherData)).toBe(false)
+  })
+
+  it('uses selector specificity before source order when display rules conflict', () => {
+    const matcherData: MatchedCssData = {
+      matches: [
+        { selector: '.card.compact', properties: [{ name: 'display', value: 'flex' }], specificity: [0, 2, 0] },
+        { selector: '.compact', properties: [{ name: 'display', value: 'inline' }], specificity: [0, 1, 0] },
+      ],
+      customProperties: {},
+    }
+
+    expect(hasContainerLikeDisplay(matcherData)).toBe(true)
+    expect(hasFlexOrGridDisplay(matcherData)).toBe(true)
+  })
+})
+
+describe('getCssPropertiesForTag', () => {
+  it('treats ul as a box-generating element', () => {
+    const relevantProperties = getCssPropertiesForTag('ul')
+
+    expect(relevantProperties).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.paddingTop)
+    expect(relevantProperties).not.toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.font)
+  })
+
+  it('treats ol as a box-generating element', () => {
+    const relevantProperties = getCssPropertiesForTag('ol')
+
+    expect(relevantProperties).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.paddingTop)
+    expect(relevantProperties).not.toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.font)
+  })
+
+  it('treats table cells as box-generating elements', () => {
+    const relevantProperties = getCssPropertiesForTag('td')
+
+    expect(relevantProperties).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.paddingTop)
+    expect(relevantProperties).not.toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.font)
+  })
+
+  it('derives box properties from default display for controls', () => {
+    const relevantProperties = getCssPropertiesForTag('button')
+
+    expect(relevantProperties).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.paddingTop)
+    expect(relevantProperties).not.toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.font)
+  })
+
+  it('keeps media elements out of box properties even when their default display is non-inline', () => {
+    const relevantProperties = getCssPropertiesForTag('img')
+
+    expect(relevantProperties).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderTop)
+    expect(relevantProperties).not.toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.background)
+    expect(relevantProperties).not.toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.font)
+  })
+
+  it('composes text and box properties for semantic text with box-generating default display', () => {
+    const relevantProperties = getCssPropertiesForTag('p')
+
+    expect(relevantProperties).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.font)
+    expect(relevantProperties).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.paddingTop)
+  })
+
+  it('falls back to box properties for unknown non-media tags', () => {
+    const relevantProperties = getCssPropertiesForTag('svg')
+
+    expect(relevantProperties).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.paddingTop)
+    expect(relevantProperties).not.toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.font)
+  })
+})
+
+describe('getDefaultDisplayForTag', () => {
+  it('returns UA defaults for representative structural elements', () => {
+    expect(getDefaultDisplayForTag('html')).toBe('block')
+    expect(getDefaultDisplayForTag('legend')).toBe('block')
+    expect(getDefaultDisplayForTag('li')).toBe('list-item')
+    expect(getDefaultDisplayForTag('table')).toBe('table')
+    expect(getDefaultDisplayForTag('tbody')).toBe('table-row-group')
+    expect(getDefaultDisplayForTag('td')).toBe('table-cell')
+  })
+
+  it('returns UA defaults for representative inline and replaced elements', () => {
+    expect(getDefaultDisplayForTag('a')).toBe('inline')
+    expect(getDefaultDisplayForTag('q')).toBe('inline')
+    expect(getDefaultDisplayForTag('img')).toBe('inline')
+    expect(getDefaultDisplayForTag('iframe')).toBe('inline')
+    expect(getDefaultDisplayForTag('input')).toBe('inline-block')
+    expect(getDefaultDisplayForTag('textarea')).toBe('inline-block')
+  })
+
+  it('returns UA defaults for non-rendered metadata elements', () => {
+    expect(getDefaultDisplayForTag('head')).toBe('none')
+    expect(getDefaultDisplayForTag('meta')).toBe('none')
+    expect(getDefaultDisplayForTag('script')).toBe('none')
+    expect(getDefaultDisplayForTag('template')).toBe('none')
+  })
+
+  it('falls back to block for unknown tags', () => {
+    expect(getDefaultDisplayForTag('custom-element')).toBe('block')
+  })
+})
+
+describe('enrichContainerProperties', () => {
+  it('adds box properties to span when display becomes block', () => {
+    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)
+  })
+
+  it('does not add box properties to span when display stays inline', () => {
+    const elements = [createElementWithCssProperties('span', 'display: inline')]
+
+    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).not.toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.paddingTop)
+  })
+
+  it('adds box properties to li when it relies on its default list-item display', () => {
+    const elements = [createElementWithCssProperties('li', '')]
+
+    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)
+  })
+
+  it('adds box properties to strong when display becomes inline-flex', () => {
+    const elements = [createElementWithCssProperties('strong', 'display: inline-flex')]
+
+    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)
+  })
+
+  it('does not add box properties when display var is missing locally and falls back to inline', () => {
+    const elements = [createElementWithCssProperties('span', 'display: var(--display, inline)')]
+
+    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).not.toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.paddingTop)
+  })
+
+  it('adds box properties when a local custom property chain falls back to inline-flex', () => {
+    const elements = [
+      createElementWithCssProperties(
+        'span',
+        'display: var(--component-display, inline); --component-display: var(--theme-display, inline-flex)',
+      ),
+    ]
+
+    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)
+  })
+
+  it('does not add box properties when a locally defined cyclic display var falls back to inline', () => {
+    const elements = [
+      createElementWithCssProperties('span', 'display: var(--display, inline); --display: var(--display)'),
+    ]
+
+    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).not.toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.paddingTop)
+  })
+
+  it('does not add box properties when a cyclic display var has its own inner fallback but display falls back to inline', () => {
+    const elements = [
+      createElementWithCssProperties('span', 'display: var(--display, inline); --display: var(--display, inline-flex)'),
+    ]
+
+    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).not.toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.paddingTop)
+  })
+
+  it('adds box properties to role-based text elements when display becomes inline-flex', () => {
+    const elements = [createElementWithCssProperties('div', 'display: inline-flex', { role: 'heading' })]
+
+    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)
+  })
+})