fix(CSS): backgroundImage gradient parsing and web serialization - #3
Closed
MatiPl01 wants to merge 3 commits into
Conversation
Author
|
Closing for now - opened this a bit early. The fixes are parked on our side and I'll follow up on software-mansion#10193 itself. Sorry for the noise. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes found while reviewing software-mansion/react-native-reanimated#10193, targeted at that branch so they land as part of it.
Parser - a style that renders in a static
backgroundImagemust not start throwing once it is animated, since the processor runs every frame.radial-gradient(50%, ...)andcircle 50%are invalid CSS but React Native renders them, so they are accepted rather than rejected.linear-gradient(to<TAB>right, ...)parses too - the direction check hard-coded a single space.Color stops - the object syntax now rejects a transition hint that is not between two color stops, matching the CSS string path. Colors
CSSColorcannot represent (PlatformColor,DynamicColorIOS) raise the same errorboxShadowalready does, instead of being serialized back as a null color and drawn as a hint.Web serialization - radial positions emit both axes:
{ top: '10%' }producedat top 10%, which Chrome rejects outright, dropping the wholebackground-imagewith it, and{ left: '10%' }meant x=0%, y=10% where native means x=10%, y=50%. Circle sizes degrade tocircle max(x,y)px, or to the equivalent ellipse when a percentage radius makes it inexpressible.Docs - radial sizes and positions do interpolate when their units and edges match; only the corner keyword, shape and extent keyword must be identical. The flip point differs per mode.
Testing
1505 jest tests, both typechecks, eslint and the formatters pass. Every serialized string was checked against
CSS.supportsin headless Chrome, and the parser and color-stop changes were exercised on the iOS simulator.Left for a separate decision:
processBackgroundImageObjectsforwardspositionunvalidated, so an unrecognised side is silently dropped and, becausecanInterpolateTocompares side names, a dropped side turns a smooth animation into a discrete step. Closing that adds new throws.to-only keyframes forbackgroundImagestill resolve to the interpolator default rather than the element's own gradient - a separate defect in the property path lookup, fixed in software-mansion/react-native-reanimated#10253.