feat: background image native CSS parser (#53609)

Summary:
This PR adds native CSS parser for `backgroundImage` property. Currently, it supports linear-gradient and radial-gradient spec compliant CSS syntax.

## Changelog:

[GENERAL] [ADDED] - background image native parser.

<!-- Help reviewers and the release process by writing your own changelog entry.

Pick one each for the category and type tags:

For more details, see:
https://reactnative.dev/contributing/changelogs-in-pull-requests

Pull Request resolved: #53609

Test Plan:
- Replicated existing testcases from JS. Currently i've added CSS syntax testcases. Checkout `CSSBackgroundImageTest.cpp`

### Verify example screens in RNTester
- Set `enableNativeCSSParsing` to true in `ReactNativeFeatureFlags.config.js` and run `yarn featureflags --update`
- Rebuild the project and verify `LinearGradientExample` and `RadialGradientExample` screens on both platforms.

### Notes
- Currently it is difficult to run CSS renderer tests. I made a custom cmake config to get it working, some steps would be helpful.
- Right now the new CSS renderer seems to be only working on iOS. NickGerleman mentioned there is some WIP to get it working on android. So please test this PR on iOS.

Differential Revision: D83341309

Pulled By: javache

Author: intergalacticspacehighway

packages/react-native/Libraries/Components/View/ReactNativeStyleAttributes.js

@@ -146,8 +146,9 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
   /**
    * Linear Gradient
    */
-  experimental_backgroundImage: {process: processBackgroundImage},
-
+  experimental_backgroundImage: ReactNativeFeatureFlags.enableNativeCSSParsing()
+    ? true
+    : {process: processBackgroundImage},
   /**
    * View
    */

packages/react-native/Libraries/NativeComponent/BaseViewConfig.android.js

@@ -179,9 +179,9 @@ const validAttributesForNonEventProps = {
   backgroundColor: {process: require('../StyleSheet/processColor').default},
   transform: true,
   transformOrigin: true,
-  experimental_backgroundImage: {
-    process: require('../StyleSheet/processBackgroundImage').default,
-  },
+  experimental_backgroundImage: ReactNativeFeatureFlags.enableNativeCSSParsing()
+    ? (true as const)
+    : {process: require('../StyleSheet/processBackgroundImage').default},
   boxShadow: ReactNativeFeatureFlags.enableNativeCSSParsing()
     ? (true as const)
     : {process: require('../StyleSheet/processBoxShadow').default},

packages/react-native/React/Fabric/Utils/RCTGradientUtils.mm

@@ -267,6 +267,10 @@ @implementation RCTGradientUtils
 + (std::vector<ProcessedColorStop>)getFixedColorStops:(const std::vector<ColorStop> &)colorStops
                                    gradientLineLength:(CGFloat)gradientLineLength
 {
+  if (colorStops.empty()) {
+    return {};
+  }
+
   std::vector<ProcessedColorStop> fixedColorStops(colorStops.size());
   bool hasNullPositions = false;
   auto maxPositionSoFar = resolveColorStopPosition(colorStops[0].position, gradientLineLength);