@wix/zero-config-implementation 1.73.0 → 1.74.0

package/dist/index.js

@@ -1,4 +1,4 @@
-import { B as t, D as e, E as o, I as n, N as c, P as l, R as i, a as p, V as E, b as m, c as x, d as f, e as d, f as u, h as C, i as I, j as k, k as y, l as A, m as D, n as P, o as R, p as h, q as B, r as M, s as T, t as b, w } from "./index-K3lIO4FC.js";
+import { B as t, D as e, E as o, I as n, N as c, P as l, R as i, a as p, V as E, b as m, c as x, d as f, e as d, f as u, h as C, i as I, j as k, k as y, l as A, m as D, n as P, o as R, p as h, q as B, r as M, s as T, t as b, w } from "./index-FEhWzHzO.js";
 import "react";
 export {
   t as BaseError,

package/package.json

@@ -4,7 +4,7 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "version": "1.73.0",
+  "version": "1.74.0",
   "description": "Core library for extracting component manifests from JS and CSS files",
   "type": "module",
   "main": "dist/index.js",
@@ -82,5 +82,5 @@
       ]
     }
   },
-  "falconPackageHash": "398dcee4762e04fdaa11211df36bfb4ac7e2ea328d412a68f2e363f8"
+  "falconPackageHash": "9af6c0faf11670fde2ed8a2ae3c7eac531b2a4a90069d9192b84da4d"
 }

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

@@ -188,11 +188,25 @@ describe('getCssPropertiesForTag', () => {
     expect(relevantProperties).not.toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.font)
   })
 
-  it('composes text and box properties for semantic text with box-generating default display', () => {
+  it('keeps paragraph tags text-only by default', () => {
     const relevantProperties = getCssPropertiesForTag('p')
 
     expect(relevantProperties).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.font)
-    expect(relevantProperties).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.paddingTop)
+    expect(relevantProperties).not.toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.paddingTop)
+  })
+
+  it('keeps heading tags text-only by default', () => {
+    const relevantProperties = getCssPropertiesForTag('h2')
+
+    expect(relevantProperties).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.font)
+    expect(relevantProperties).not.toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.paddingTop)
+  })
+
+  it('keeps role-based heading text-only by default', () => {
+    const relevantProperties = getCssPropertiesForTag('div', 'heading')
+
+    expect(relevantProperties).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.font)
+    expect(relevantProperties).not.toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.paddingTop)
   })
 
   it('falls back to box properties for unknown non-media tags', () => {
@@ -265,6 +279,26 @@ describe('enrichContainerProperties', () => {
     expect(cssData.relevant).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.paddingTop)
   })
 
+  it('does not add box properties to p when it relies on its default block display', () => {
+    const elements = [createElementWithCssProperties('p', '')]
+
+    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 p when display is explicitly overridden to block', () => {
+    const elements = [createElementWithCssProperties('p', '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('adds box properties to strong when display becomes inline-flex', () => {
     const elements = [createElementWithCssProperties('strong', 'display: inline-flex')]
 

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

@@ -44,6 +44,8 @@ const TEXT_TAGS = new Set([
   'i',
 ])
 
+const DEFAULT_NON_BOX_TEXT_TAGS = new Set(['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'])
+
 /**
  * Media & Visuals - elements requiring aspect ratio control (excluding svg)
  */
@@ -137,7 +139,7 @@ export function getCssPropertiesForTag(tag: string, role?: string): string[] {
   const properties: string[] = []
   const hasTextProperties = hasTextSemantics(tag, role)
   const hasMediaProperties = hasMediaSemantics(tag, role)
-  const hasBoxProperties = hasContainerLikeDefaultDisplay(tag) && !hasMediaProperties
+  const hasBoxProperties = hasDefaultBoxProperties(tag, role) && !hasMediaProperties
 
   if (hasTextProperties) {
     properties.push(...TEXT_CSS_PROPERTIES)
@@ -406,12 +408,30 @@ function hasContainerLikeDefaultDisplay(tag: string): boolean {
   return displayCreatesContainerBox(getDefaultDisplayForTag(tag))
 }
 
-function hasEffectiveContainerDisplay(tag: string, matcherData?: MatchedCssData): boolean {
+function suppressesDefaultBoxProperties(tag: string, role?: string): boolean {
+  const normalizedTag = tag.toLowerCase()
+  if (DEFAULT_NON_BOX_TEXT_TAGS.has(normalizedTag)) {
+    return true
+  }
+
+  const normalizedRole = role?.toLowerCase()
+  return normalizedRole === 'heading' || normalizedRole === 'paragraph'
+}
+
+function hasDefaultBoxProperties(tag: string, role?: string): boolean {
+  if (suppressesDefaultBoxProperties(tag, role)) {
+    return false
+  }
+
+  return hasContainerLikeDefaultDisplay(tag)
+}
+
+function hasEffectiveContainerDisplay(tag: string, role?: string, matcherData?: MatchedCssData): boolean {
   if (matcherData && hasDisplayDeclaration(matcherData)) {
     return hasContainerLikeDisplay(matcherData)
   }
 
-  return hasContainerLikeDefaultDisplay(tag)
+  return hasDefaultBoxProperties(tag, role)
 }
 
 /**
@@ -450,7 +470,7 @@ export function enrichContainerProperties(elements: ExtractedElement[]): Extract
       const matcherData = element.extractorData.get('css-matcher') as MatchedCssData | undefined
       const cssData = element.extractorData.get('css-properties') as CssPropertiesData | undefined
 
-      if (cssData && hasEffectiveContainerDisplay(element.tag, matcherData)) {
+      if (cssData && hasEffectiveContainerDisplay(element.tag, role, matcherData)) {
         element.extractorData.set('css-properties', {
           relevant: addBoxProperties(cssData.relevant),
         })