@wix/zero-config-implementation 1.72.0 → 1.73.0

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)
+  })
+})