fix(CSS): tolerate leading whitespace in a transform string - #10388
Conversation
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
Included review availability: Your plan provides up to 10 included reviews per hour; 8 remain after this review. 📝 WalkthroughWalkthrough
Merge Risk: ⚪ Minimal · up to The change trims leading and trailing whitespace from transform strings while preserving invalid-input errors. It is localized and merge-ready after normal checks, with no actionable merge-blocking risk remaining. 🚥 Pre-merge checks | ✅ 4✅ Passed checks (4 passed)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
`processTransform` splits on `/\)\s*/`, so whitespace after each `)` is
consumed, and `filter(Boolean)` drops the empty part a trailing one leaves
behind. Nothing reaches the start of the string, so the first function keeps its
padding, `parseTransformProperty` reads the key as `' translate'`, no case
matches, and the whole declaration throws:
processTransform(' translate(25px) rotate(45deg)')
// [Reanimated] Invalid transform property: translate(25px)
The same string without the two leading spaces parses fine, and React Native's
own parser accepts both. CSS ignores leading whitespace in a property value, and
a value built from a template literal or read from a config file easily carries
some.
Trim the string before splitting.
c5225b4 to
1336503
Compare
processTransformOrigin splits on /\s+/, so a leading space makes the first component an empty string and the value throws, exactly like the transform string did. Same one-line fix, with cases covering both ends of the value. Drop the comments above the two trims - they restate the code.
# Conflicts: # packages/react-native-reanimated/CHANGELOG.md
2 participants
Note
This pull request was authored by AI on behalf of @dennytosp.
Summary
processTransformsplits the string on/\)\s*/, so whitespace after each)is consumed, andfilter(Boolean)drops the empty part a trailing one leaves behind. Nothing ever reaches the start of the string, so the first function keeps its padding:parseTransformPropertysplits that part on/\(\s*/, gets' translate'as the key, matches nocase, returns[], andprocessTransformturns the empty result into a thrown error. Only the first function in the string is affected — everything after a)is already fine.The same string without the two leading spaces parses without complaint, and React Native's parser accepts both:
CSS ignores leading whitespace in a property value, and a value assembled from a template literal or read out of a config file easily carries some — this is the kind of difference that produces a crash report with no obvious cause.
Fix
value.trim()before the split. Trimming the whole input rather than the parsed key also covers tabs and newlines, and leaves the error message intact for genuinely invalid input.Test plan
Two cases added to the multi-transform table in
src/common/style/processors/__tests__/transform.test.ts— one with leading and trailing spaces, one with newlines and indentation. Both fail onmain:With the fix applied:
Every existing error case still throws —
translat(25, 25),rotate(90),scaleX()and the rest are unaffected, since trimming only removes padding that was never part of a function name.yarn eslintandoxfmt --checkare clean on both files.Touches the same file as #10385 but a different function; the two apply independently.
Changelog
Unpublishedsection of each changed package'sCHANGELOG.md, or this PR does not changereact-native-reanimatedorreact-native-worklets.