Join GitHub today
GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.Sign up
Newline having a trailing whitespace character is removed in JSX attribute value #10356
Hey @beliayeu! We really appreciate you taking the time to report an issue. The collaborators on this project attempt to help as many people as possible, but we're a limited number of volunteers, so it's possible this won't be addressed swiftly.
This is a feature of JSX transformation, not of the parser, so it isn't something that
I'm sure we could debate about this, but as-is, this is a feature React expects, and changing this would absolutely break anyone relying on the existing whitespace behavior. If you look at the react docs, it states;
If whitespace is important for your usecase, you should use a construct that is guaranteed to preserve whitespace, so for instance
that is true for new lines adjacent to tags
but as far as I can see that is not always true for string literals
results in (new line is not condensed into a space)
but new line with trailing space is condensed into a single space
the issue I have with it is unexpected decoding of characters
but I need to perform additional root cause analysis to understand the problem better, most likely the problem is not related to babel project
The behavior above is defined in the context of JSX children, to be consistent with HTML text node. But how whitespace in JSXAttributeValue is treated, is not clearly defined. Note that HTML does not require whitespace in quoted attribute value to be transformed (playground), the JSXAttributeValue is expected to align with HTML attribute value.
The current behavior may date back to acornjs/acorn-jsx#16 (comment). Given the behavior has been there for 4 years, it is, unfortunately, de facto.
Unless the JSX clearly defined how JSXAttributeValue should be processed, and given that there is workaround, we may leave it as compromise.
So we're on the same page, I 100% agree that this is all poorly defined. The best we have is defacto-standard behavior. I'd be curious to see what Typescript does in this case as well.
If someone wants to explore what changing this might look like, that seems like a great idea. I do think any changes to this would need to be backed by a specific goal of making the behavior more consistent across implementations, and it would need to be behind a flag unless until a major release. It'd also expect explicit feedback from the React team and other libraries that rely on JSX.