Do not decode CSS escapes in background url() in JS

The native CSS parser treats a backslash in url() as an ordinary
character. The JS parser now does the same, so both parsers give the
same result.

Author: intergalacticspacehighway

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

@@ -1377,16 +1377,24 @@ describe('processBackgroundImage', () => {
     });
   }
 
-  for (const [name, backgroundImage, uri] of [
-    ['an escaped parenthesis', 'url(a\\)b.png)', 'a)b.png'],
-    ['an escaped quote in a quoted url', 'url("a\\"b.png")', 'a"b.png'],
-    ['a hex escape', 'url(a\\20 b.png)', 'a b.png'],
-    ['a missing closing parenthesis', 'url(a.png', 'a.png'],
+  it('should parse a url with a missing closing parenthesis', () => {
+    expect(processBackgroundImage('url(a.png')).toEqual([
+      {type: 'url', uri: 'a.png'},
+    ]);
+  });
+
+  it('should keep a backslash in a quoted url', () => {
+    expect(processBackgroundImage('url("a\\20b.png")')).toEqual([
+      {type: 'url', uri: 'a\\20b.png'},
+    ]);
+  });
+
+  for (const [name, backgroundImage] of [
+    ['an escaped parenthesis', 'url(a\\)b.png)'],
+    ['an escaped quote in a quoted url', 'url("a\\"b.png")'],
   ]) {
-    it(`should parse a url with ${name}`, () => {
-      expect(processBackgroundImage(backgroundImage)).toEqual([
-        {type: 'url', uri},
-      ]);
+    it(`should return empty for ${name}`, () => {
+      expect(processBackgroundImage(backgroundImage)).toEqual([]);
     });
   }
 });

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

@@ -403,20 +403,6 @@ function parseURLFunctionBody(input: string): ?string {
         i++;
         break;
       }
-      if (char === '\\') {
-        if (i + 1 < input.length && isCSSNewline(input[i + 1])) {
-          // An escaped newline is skipped.
-          i += 2;
-          continue;
-        }
-        if (i + 1 >= input.length) {
-          return null;
-        }
-        const [codePoint, length] = consumeCSSEscape(input, i + 1);
-        uri += codePoint;
-        i += 1 + length;
-        continue;
-      }
       uri += char;
       i++;
     }
@@ -448,49 +434,13 @@ function parseURLFunctionBody(input: string): ?string {
     ) {
       return null;
     }
-    if (char === '\\') {
-      if (i + 1 >= input.length || isCSSNewline(input[i + 1])) {
-        return null;
-      }
-      const [codePoint, length] = consumeCSSEscape(input, i + 1);
-      uri += codePoint;
-      i += 1 + length;
-      continue;
-    }
     uri += char;
     i++;
   }
   // A missing `)` at the end is a parse error, but the url is kept.
   return uri;
 }
 
-// https://www.w3.org/TR/css-syntax-3/#consume-escaped-code-point
-// `start` is the index after the backslash. Returns the code point and the
-// number of characters it used.
-function consumeCSSEscape(input: string, start: number): [string, number] {
-  let i = start;
-  let hex = '';
-  while (i < input.length && hex.length < 6 && /[0-9a-fA-F]/.test(input[i])) {
-    hex += input[i];
-    i++;
-  }
-  if (hex.length === 0) {
-    return [input[start], 1];
-  }
-  if (i < input.length && isCSSWhitespace(input[i])) {
-    i++;
-  }
-  let codePoint = parseInt(hex, 16);
-  if (
-    codePoint === 0 ||
-    (codePoint >= 0xd800 && codePoint <= 0xdfff) ||
-    codePoint > 0x10ffff
-  ) {
-    codePoint = 0xfffd;
-  }
-  return [String.fromCodePoint(codePoint), i - start];
-}
-
 function parseRadialGradientCSSString(
   gradientContent: string,
 ): RadialGradientBackgroundImage | null {