Skip to content

Conversation

@omairqazi29
Copy link

Summary

When a JSXExpressionContainer contains JSX elements (e.g., from .map() or conditional rendering), the parser now skips adding a {expression} text placeholder. This prevents false positives for elements like <dl> that don't allow text children.

Problem:
Previously, expressions like {items.map(item => <div>...</div>)} would generate both:

  1. A {expression} text node
  2. The nested JSX elements

This caused validation errors for elements like <dl>, <ul>, <ol> etc. that don't allow text children.

Solution:
Added a containsJSXElement() function that recursively checks if an expression contains JSX elements. When it does, we skip the text node conversion since the JSX elements will be processed separately.

Changes

  • Added containsJSXElement() helper function to detect JSX elements within expressions
  • Modified JSXExpressionContainer handler to skip text placeholder when expression contains JSX
  • Added 4 new test cases covering the fix

Test plan

  • All existing tests pass (22 tests)
  • New test: It omits expression placeholder when expression contains JSX (dl with map)
  • New test: It omits expression placeholder when expression contains JSX (conditional)
  • New test: It omits expression placeholder in div when expression contains JSX
  • New test: It keeps expression placeholder when expression does not contain JSX

Fix #4624

When a JSXExpressionContainer contains JSX elements (e.g., from .map() or
conditional rendering), the parser now skips adding a {expression} text
placeholder. This prevents false positives for elements like <dl> that
don't allow text children.

Previously, expressions like {items.map(item => <div>...</div>)} would
generate both a {expression} text node AND the nested JSX elements,
causing validation errors.

Fix webhintio#4624
@linux-foundation-easycla
Copy link

linux-foundation-easycla bot commented Dec 21, 2025

CLA Signed
The committers listed above are authorized under a signed CLA.

  • ✅ login: omairqazi29 / name: Qazi Omair Ahmed (bdd16b1)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Doesn't recognize dive inside function

1 participant