transition hint css syntax support

Author: intergalacticspacehighway

packages/react-native/Libraries/StyleSheet/__tests__/processBackgroundImage-test.js

@@ -715,4 +715,16 @@ describe('processBackgroundImage', () => {
       {color: processColor('blue'), position: 1},
     ]);
   });
+
+  it('should process color transition hint', () => {
+    const input = 'linear-gradient(red, 40%, blue)';
+    const result = processBackgroundImage(input);
+    expect(result[0].type).toBe('linearGradient');
+    expect(result[0].direction).toEqual({type: 'angle', value: 180});
+    expect(result[0].colorStops).toEqual([
+      {color: processColor('red'), position: 0},
+      {color: null, position: 0.4},
+      {color: processColor('blue'), position: 1},
+    ]);
+  });
 });

packages/react-native/Libraries/StyleSheet/processBackgroundImage.js

@@ -190,47 +190,85 @@ function parseCSSLinearGradient(
       // If first part is not an angle/direction or a color stop, return an empty array and do not apply any gradient. Same as web.
       return [];
     }
-    colorStopRegex.lastIndex = 0;
 
+    const colorStopsString = parts.join(',');
     const colorStops = [];
-    const fullColorStopsStr = parts.join(',');
-    let colorStopMatch;
-    while ((colorStopMatch = colorStopRegex.exec(fullColorStopsStr))) {
-      const [, color, position1, position2] = colorStopMatch;
-      const processedColor = processColor(color.trim().toLowerCase());
-      if (processedColor == null) {
-        // If a color is invalid, return an empty array and do not apply any gradient. Same as web.
+    // split by comma, but not if it's inside a parentheses. e.g. red, rgba(0, 0, 0, 0.5), green => ["red", "rgba(0, 0, 0, 0.5)", "green"]
+    const stops = colorStopsString.split(/,(?![^(]*\))/);
+    for (const stop of stops) {
+      const trimmedStop = stop.trim().toLowerCase();
+      // Match function like pattern or single words
+      const parts = trimmedStop.match(/\S+\([^)]*\)|\S+/g);
+      if (parts == null) {
+        // If a color stop is invalid, return an empty array and do not apply any gradient. Same as web.
         return [];
       }
-
-      if (typeof position1 !== 'undefined') {
-        if (position1.endsWith('%')) {
+      // Case 1: [color, position, position]
+      if (parts.length === 3) {
+        const color = parts[0];
+        const position1 = parts[1];
+        const position2 = parts[2];
+        const processedColor = processColor(color);
+        if (processedColor == null) {
+          // If a color is invalid, return an empty array and do not apply any gradient. Same as web.
+          return [];
+        }
+        if (position1.endsWith('%') && position2.endsWith('%')) {
           colorStops.push({
             color: processedColor,
             position: parseFloat(position1) / 100,
           });
+          colorStops.push({
+            color: processedColor,
+            position: parseFloat(position2) / 100,
+          });
         } else {
           // If a position is invalid, return an empty array and do not apply any gradient. Same as web.
           return [];
         }
-      } else {
-        colorStops.push({
-          color: processedColor,
-          position: null,
-        });
       }
-
-      if (typeof position2 !== 'undefined') {
-        if (position2.endsWith('%')) {
+      // Case 2: [color, position]
+      else if (parts.length === 2) {
+        const color = parts[0];
+        const position = parts[1];
+        const processedColor = processColor(color);
+        if (processedColor == null) {
+          // If a color is invalid, return an empty array and do not apply any gradient. Same as web.
+          return [];
+        }
+        if (position.endsWith('%')) {
           colorStops.push({
             color: processedColor,
-            position: parseFloat(position2) / 100,
+            position: parseFloat(position) / 100,
           });
         } else {
           // If a position is invalid, return an empty array and do not apply any gradient. Same as web.
           return [];
         }
       }
+      // Case 3: [color]
+      // Case 4: [position] => transition hint syntax
+      else if (parts.length === 1) {
+        if (parts[0].endsWith('%')) {
+          colorStops.push({
+            color: null,
+            position: parseFloat(parts[0]) / 100,
+          });
+        } else {
+          const processedColor = processColor(parts[0]);
+          if (processedColor == null) {
+            // If a color is invalid, return an empty array and do not apply any gradient. Same as web.
+            return [];
+          }
+          colorStops.push({
+            color: processedColor,
+            position: null,
+          });
+        }
+      } else {
+        // If a color stop is invalid, return an empty array and do not apply any gradient. Same as web.
+        return [];
+      }
     }
 
     const fixedColorStops = getFixedColorStops(colorStops);

packages/rn-tester/js/examples/LinearGradient/LinearGradientExample.js

@@ -224,4 +224,18 @@ exports.examples = [
       );
     },
   },
+  {
+    title: 'Transition hint',
+    description: 'Linear gradient with transition hint',
+    render(): React.Node {
+      return (
+        <GradientBox
+          style={{
+            experimental_backgroundImage: 'linear-gradient(red, 40%, blue)',
+          }}
+          testID="linear-gradient-transition-hint"
+        />
+      );
+    },
+  },
 ];