Fix process functions not properly dealing with newlines (#46281)

Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/46281

In CSS newlines are considered equal to whitespaces which is why when receiving strings from RSD we could get \n characters which we were not handling

Changelog: [Internal]

Reviewed By: joevilches

Differential Revision: D62034706

fbshipit-source-id: df2342b89156a131fecd0b0babeb478a6962b108

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

@@ -160,7 +160,30 @@ describe('processBackgroundImage', () => {
 
   it('should process multiple linear gradients', () => {
     const input = `
-      linear-gradient(to right, red, blue), 
+      linear-gradient(to right, red, blue),
+      linear-gradient(to bottom, green, yellow)`;
+    const result = processBackgroundImage(input);
+    expect(result).toHaveLength(2);
+    expect(result[0].type).toEqual('linearGradient');
+    expect(result[0].start).toEqual({x: 0, y: 0.5});
+    expect(result[0].end).toEqual({x: 1, y: 0.5});
+    expect(result[0].colorStops).toEqual([
+      {color: processColor('red'), position: 0},
+      {color: processColor('blue'), position: 1},
+    ]);
+    expect(result[1].type).toEqual('linearGradient');
+    expect(result[1].start).toEqual({x: 0.5, y: 0});
+    expect(result[1].end).toEqual({x: 0.5, y: 1});
+
+    expect(result[1].colorStops).toEqual([
+      {color: processColor('green'), position: 0},
+      {color: processColor('yellow'), position: 1},
+    ]);
+  });
+
+  it('should process multiple linear gradients with newlines', () => {
+    const input = `
+      linear-gradient(to right, red, blue),\n
       linear-gradient(to bottom, green, yellow)`;
     const result = processBackgroundImage(input);
     expect(result).toHaveLength(2);
@@ -233,7 +256,7 @@ describe('processBackgroundImage', () => {
   });
 
   it('should process multiple gradients with spaces', () => {
-    const input = `linear-gradient(to right , 
+    const input = `linear-gradient(to right ,
     rgba(255,0,0,0.5), rgba(0,0,255,0.8)),
               linear-gradient(to bottom , rgba(255,0,0,0.9)  , rgba(0,0,255,0.2)  )`;
     const result = processBackgroundImage(input);

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

@@ -149,6 +149,30 @@ describe('processBoxShadow', () => {
     ]);
   });
 
+  it('should parse multiple box shadow strings with newlines', () => {
+    expect(
+      processBoxShadow('10 5 red, 5 12 inset,\n  inset 10 45 13 red'),
+    ).toEqual([
+      {
+        offsetX: 10,
+        offsetY: 5,
+        color: processColor('red'),
+      },
+      {
+        offsetX: 5,
+        offsetY: 12,
+        inset: true,
+      },
+      {
+        offsetX: 10,
+        offsetY: 45,
+        blurRadius: 13,
+        inset: true,
+        color: processColor('red'),
+      },
+    ]);
+  });
+
   it('should fail to parse string with invalid units', () => {
     expect(processBoxShadow('red 10em 5$ 2| 3rp')).toEqual([]);
   });

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

@@ -115,6 +115,13 @@ describe('processFilter', () => {
       processFilter('brightness(0.5) opacity(0.5) blur(5) hue-rotate(90deg)'),
     ).toEqual([{brightness: 0.5}, {opacity: 0.5}, {blur: 5}, {hueRotate: 90}]);
   });
+  it('string multiple filters with newlines', () => {
+    expect(
+      processFilter(
+        'brightness(0.5)\n   opacity(0.5)\n   blur(5)\n   hue-rotate(90deg)',
+      ),
+    ).toEqual([{brightness: 0.5}, {opacity: 0.5}, {blur: 5}, {hueRotate: 90}]);
+  });
   it('string multiple filters one invalid', () => {
     expect(
       processFilter('brightness(0.5) opacity(0.5) blur(5) hue-rotate(90foo)'),

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

@@ -42,7 +42,7 @@ export default function processBackgroundImage(
   }
 
   if (typeof backgroundImage === 'string') {
-    result = parseCSSLinearGradient(backgroundImage);
+    result = parseCSSLinearGradient(backgroundImage.replace(/\n/g, ' '));
   } else if (Array.isArray(backgroundImage)) {
     for (const bgImage of backgroundImage) {
       const processedColorStops: Array<{

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

@@ -33,7 +33,7 @@ export default function processBoxShadow(
 
   const boxShadowList =
     typeof rawBoxShadows === 'string'
-      ? parseBoxShadowString(rawBoxShadows)
+      ? parseBoxShadowString(rawBoxShadows.replace(/\n/g, ' '))
       : rawBoxShadows;
 
   for (const rawBoxShadow of boxShadowList) {

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

@@ -44,6 +44,8 @@ export default function processFilter(
   }
 
   if (typeof filter === 'string') {
+    filter = filter.replace(/\n/g, ' ');
+
     // matches on functions with args and nested functions like "drop-shadow(10 10 10 rgba(0, 0, 0, 1))"
     const regex = /([\w-]+)\(([^()]*|\([^()]*\)|[^()]*\([^()]*\)[^()]*)\)/g;
     let matches;