js parse changes

Author: intergalacticspacehighway

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

@@ -777,7 +777,15 @@ type RadialGradientValue = {
   }>,
 };
 
-export type BackgroundImageValue = LinearGradientValue | RadialGradientValue;
+export type URLBackgroundImageValue = {
+  type: 'url',
+  uri: string,
+};
+
+export type BackgroundImageValue =
+  | LinearGradientValue
+  | RadialGradientValue
+  | URLBackgroundImageValue;
 
 export type BackgroundSizeValue =
   | {

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

@@ -361,6 +361,10 @@ describe('processBackgroundImage', () => {
           {color: 'blue', positions: ['100%']},
         ],
       },
+      {
+        type: 'url',
+        uri: 'https://example.com',
+      },
     ];
     const result = processBackgroundImage(input);
     expect(result).toEqual([
@@ -372,6 +376,10 @@ describe('processBackgroundImage', () => {
           {color: processColor('blue'), position: '100%'},
         ],
       },
+      {
+        type: 'url',
+        uri: 'https://example.com',
+      },
     ]);
   });
 
@@ -1153,4 +1161,68 @@ describe('processBackgroundImage', () => {
     expect(result1).toEqual([]);
     expect(result2).toEqual([]);
   });
+
+  it('should handle url background image', () => {
+    const input = 'url(https://example.com)';
+    const result = processBackgroundImage(input);
+    expect(result).toEqual([
+      {
+        type: 'url',
+        uri: 'https://example.com',
+      },
+    ]);
+  });
+
+  it('should handle url background image with quotes', () => {
+    const input = 'url("https://example.com")';
+    const result = processBackgroundImage(input);
+    expect(result).toEqual([
+      {
+        type: 'url',
+        uri: 'https://example.com',
+      },
+    ]);
+    const input1 = "url('https://example.com')";
+    const result1 = processBackgroundImage(input1);
+    expect(result1).toEqual([
+      {
+        type: 'url',
+        uri: 'https://example.com',
+      },
+    ]);
+  });
+
+  it('should handle url background image with mixed gradient and url', () => {
+    const input =
+      'radial-gradient(circle at top left, red, blue), url(https://example.com?q=JonDoe12), url(https://example2.com), linear-gradient(to bottom, green, yellow)';
+    const result = processBackgroundImage(input);
+    expect(result).toEqual([
+      {
+        type: 'radial-gradient',
+        shape: 'circle',
+        position: {top: '0%', left: '0%'},
+        size: 'farthest-corner',
+        colorStops: [
+          {color: processColor('red'), position: null},
+          {color: processColor('blue'), position: null},
+        ],
+      },
+      {
+        type: 'url',
+        uri: 'https://example.com?q=JonDoe12',
+      },
+      {
+        type: 'url',
+        uri: 'https://example2.com',
+      },
+      {
+        type: 'linear-gradient',
+        direction: {type: 'angle', value: 180},
+        colorStops: [
+          {color: processColor('green'), position: null},
+          {color: processColor('yellow'), position: null},
+        ],
+      },
+    ]);
+  });
 });

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

@@ -63,14 +63,20 @@ type RadialGradientBackgroundImage = {
   }>,
 };
 
+type URLBackgroundImage = {
+  type: 'url',
+  uri: string,
+};
+
 // null color indicate that the transition hint syntax is used. e.g. red, 20%, blue
 type ColorStopColor = ProcessedColorValue | null;
 // percentage or pixel value
 type ColorStopPosition = number | string | null;
 
 type ParsedBackgroundImageValue =
   | LinearGradientBackgroundImage
-  | RadialGradientBackgroundImage;
+  | RadialGradientBackgroundImage
+  | URLBackgroundImage;
 
 export default function processBackgroundImage(
   backgroundImage: ?($ReadOnlyArray<BackgroundImageValue> | string),
@@ -84,6 +90,19 @@ export default function processBackgroundImage(
     result = parseBackgroundImageCSSString(backgroundImage.replace(/\n/g, ' '));
   } else if (Array.isArray(backgroundImage)) {
     for (const bgImage of backgroundImage) {
+      if (bgImage.type === 'url') {
+        if (bgImage.uri != null && typeof bgImage.uri === 'string') {
+          result = result.concat({
+            type: 'url',
+            uri: bgImage.uri,
+          });
+          continue;
+        } else {
+          // If the URI is invalid, return an empty array. Same as web.
+          return [];
+        }
+      }
+
       const processedColorStops = processColorStops(bgImage);
       if (processedColorStops == null) {
         // If a color stop is invalid, return an empty array and do not apply any gradient. Same as web.
@@ -250,13 +269,33 @@ function processColorStops(bgImage: BackgroundImageValue): $ReadOnlyArray<{
 function parseBackgroundImageCSSString(
   cssString: string,
 ): $ReadOnlyArray<ParsedBackgroundImageValue> {
-  const gradients = [];
+  const backgroundImages = [];
   const bgImageStrings = splitGradients(cssString);
 
   for (const bgImageString of bgImageStrings) {
+    // url syntax supports - url(x), url("x"), url('x')
+    const urlRegex = /^url\((.*)\)$/i;
+    const urlMatch = urlRegex.exec(bgImageString);
+    if (urlMatch) {
+      let uri = urlMatch[1].trim();
+      // string single or double quotes
+      if (
+        (uri.startsWith('"') && uri.endsWith('"')) ||
+        (uri.startsWith("'") && uri.endsWith("'"))
+      ) {
+        uri = uri.slice(1, -1);
+      }
+      if (uri.length > 0) {
+        backgroundImages.push({
+          type: 'url',
+          uri,
+        });
+      }
+      continue;
+    }
+
     const bgImage = bgImageString.toLowerCase();
     const gradientRegex = /^(linear|radial)-gradient\(((?:\([^)]*\)|[^()])*)\)/;
-
     const match = gradientRegex.exec(bgImage);
     if (match) {
       const [, type, gradientContent] = match;
@@ -266,11 +305,11 @@ function parseBackgroundImageCSSString(
         : parseLinearGradientCSSString(gradientContent);
 
       if (gradient != null) {
-        gradients.push(gradient);
+        backgroundImages.push(gradient);
       }
     }
   }
-  return gradients;
+  return backgroundImages;
 }
 
 function parseRadialGradientCSSString(