Skip to content

fix: handle whitespace according to JSX common practice#6051

Merged
lukastaegert merged 3 commits intorollup:masterfrom
cyyynthia:jsx-whitespace
Aug 25, 2025
Merged

fix: handle whitespace according to JSX common practice#6051
lukastaegert merged 3 commits intorollup:masterfrom
cyyynthia:jsx-whitespace

Conversation

@cyyynthia
Copy link
Contributor

@cyyynthia cyyynthia commented Aug 1, 2025

This PR contains:

  • bugfix
  • feature
  • refactor
  • documentation
  • other

Are tests included?

  • yes (bugfixes and features will not be merged without tests)
  • no

Breaking Changes?

  • yes (breaking changes will not be merged unless absolutely necessary)
  • no

List any relevant issue numbers:

Description

This PR fixes the handling of whitespace within JSX text, matching the generally agreed (for the lack of a proper spec) upon behavior of whitespace in React.

It also fixes an edge-case where invalid JS code was generated if a plaintext attribute had a newline in it. Those do not obey to the same whitespace rules as text.

References

@vercel
Copy link

vercel bot commented Aug 1, 2025 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Preview Comments Updated (UTC)
rollup Ready Ready Preview Comment Aug 24, 2025 9:28am

@codecov
Copy link

codecov bot commented Aug 1, 2025 •
edited
Loading

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 98.79%. Comparing base (77bb1ae) to head (254611b).
⚠️ Report is 1 commits behind head on master.

Additional details and impacted files 
@@           Coverage Diff           @@
##           master    #6051   +/-   ##
=======================================
  Coverage   98.79%   98.79%           
=======================================
  Files         271      271           
  Lines       10610    10620   +10     
  Branches     2834     2838    +4     
=======================================
+ Hits        10482    10492   +10     
  Misses         88       88           
  Partials       40       40

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@github-actions
Copy link

github-actions bot commented Aug 23, 2025 •
edited
Loading

Thank you for your contribution! ❤️

You can try out this pull request locally by installing Rollup via

npm install cyyynthia/rollup#jsx-whitespace

Notice: Ensure you have installed the latest nightly Rust toolchain. If you haven't installed it yet, please see https://www.rust-lang.org/tools/install to learn how to download Rustup and install Rust.

or load it into the REPL:
https://rollup-62xo2vcpv-rollup-js.vercel.app/repl/?pr=6051

@github-actions
Copy link

github-actions bot commented Aug 23, 2025 •
edited
Loading

Performance report

  • BUILD: 6889ms, 819 MB
    • initialize: 0ms, 24.8 MB
    • generate module graph: 2597ms, 631 MB
      • generate ast: 1364ms, 620 MB
    • sort and bind modules: 395ms, 690 MB
    • mark included statements: 3887ms, 819 MB
      • treeshaking pass 1: 2274ms, 822 MB
      • treeshaking pass 2: 453ms, 830 MB
      • treeshaking pass 3: 390ms, 820 MB
      • treeshaking pass 4: 379ms, 814 MB
      • treeshaking pass 5: 376ms, 819 MB
  • GENERATE: 865ms (+60ms, +7.5%), 952 MB
    • initialize render: 0ms, 895 MB
    • generate chunks: 131ms (-23ms, -15.0%), 887 MB (+3%)
      • optimize chunks: 0ms, 874 MB
    • render chunks: 628ms, 926 MB
    • transform chunks: 18ms, 952 MB
    • generate bundle: 0ms, 952 MB

lukastaegert
lukastaegert reviewed Aug 23, 2025
View reviewed changes
Copy link
Member

@lukastaegert lukastaegert left a comment •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See my example, but in general this looks good, thanks for tackling this issue! I could confirm that for single line-breaks at the beginning/end, the text is completely tree-shaken in the output, which matches what Babel does here as well.

lukastaegert
lukastaegert reviewed Aug 24, 2025
View reviewed changes
Copy link
Member

@lukastaegert lukastaegert left a comment •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks! I just stumbled across another issue with the tree-shaking of white-space text. Compare this https://rollup-90iirwpg8-rollup-js.vercel.app/repl/?pr=6051&shareable=JTdCJTIyZXhhbXBsZSUyMiUzQSUyMiUyMiUyQyUyMm1vZHVsZXMlMjIlM0ElNUIlN0IlMjJjb2RlJTIyJTNBJTIyZXhwb3J0JTIwZnVuY3Rpb24lMjBmKCklMjAlN0IlNUNuJTIwJTIwJTIwJTIwcmV0dXJuJTIwKCU1Q24lMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlM0MlM0UlM0NkaXYlMkYlM0UlM0MlMkYlM0UlNUNuJTIwJTIwJTIwJTIwKSUzQiU1Q24lN0QlNUNuJTIyJTJDJTIyaXNFbnRyeSUyMiUzQXRydWUlMkMlMjJuYW1lJTIyJTNBJTIybWFpbi5qcyUyMiU3RCU1RCUyQyUyMm9wdGlvbnMlMjIlM0ElN0IlMjJqc3glMjIlM0ElMjJyZWFjdC1qc3glMjIlMkMlMjJvdXRwdXQlMjIlM0ElN0IlMjJmb3JtYXQlMjIlM0ElMjJlcyUyMiU3RCU3RCU3RA== with this https://rollup-90iirwpg8-rollup-js.vercel.app/repl/?pr=6051&shareable=JTdCJTIyZXhhbXBsZSUyMiUzQSUyMiUyMiUyQyUyMm1vZHVsZXMlMjIlM0ElNUIlN0IlMjJjb2RlJTIyJTNBJTIyZXhwb3J0JTIwZnVuY3Rpb24lMjBmKCklMjAlN0IlNUNuJTIwJTIwJTIwJTIwcmV0dXJuJTIwKCU1Q24lMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlM0MlM0UlNUNuJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTNDZGl2JTJGJTNFJTVDbiUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUzQyUyRiUzRSU1Q24lMjAlMjAlMjAlMjApJTNCJTVDbiU3RCU1Q24lMjIlMkMlMjJpc0VudHJ5JTIyJTNBdHJ1ZSUyQyUyMm5hbWUlMjIlM0ElMjJtYWluLmpzJTIyJTdEJTVEJTJDJTIyb3B0aW9ucyUyMiUzQSU3QiUyMmpzeCUyMiUzQSUyMnJlYWN0LWpzeCUyMiUyQyUyMm91dHB1dCUyMiUzQSU3QiUyMmZvcm1hdCUyMiUzQSUyMmVzJTIyJTdEJTdEJTdE

If a text is completely removed because the text only contains a line-break with spaces, then it might use the jsxs function even though it should rather switch to the jsx function. In the example, it is particularly problematic because it uses the jsxs function without an array.

So the logic to detect whether to use an array correctly detects this case, but the logic to decide whether to use jsxs/jsx does not...

@cyyynthia
Copy link
Contributor Author

cyyynthia commented Aug 24, 2025

Ah! You're good with coming up with these edge cases, I should've been a bit more careful when implementing it 😄

Adjusted the logic and added a test case 👍🏻

lukastaegert
lukastaegert approved these changes Aug 25, 2025
View reviewed changes
Copy link
Member

@lukastaegert lukastaegert left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah! You're good with coming up with these edge cases

Thanks, but no worries. Admittedly, I would have nearly overlooked it myself, but after some recent hiccups, I thought I spend a little more time in the REPL.
Looks really good now. Without your initiative, this issue would still be largely ignored at this point I fear...

@lukastaegert lukastaegert added this pull request to the merge queue Aug 25, 2025
Merged via the queue into rollup:master with commit c9e96c2 Aug 25, 2025
42 checks passed
@github-actions
Copy link

github-actions bot commented Aug 25, 2025

This PR has been released as part of rollup@4.48.1. You can test it via npm install rollup.

@github-actions github-actions bot mentioned this pull request Aug 25, 2025
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@lukastaegert lukastaegert lukastaegert approved these changes

Assignees

No one assigned

Labels

x⁸ ⚙️ build repl artefacts

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Wrong code generated for JSX syntax

2 participants

@cyyynthia @lukastaegert