Fix processFilter incorrectly splitting function args (#46073)

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

Before we had issues with drop-shadow definitions like `drop-shadow(10 10 10 rgba(255, 255, 255, 1))`

Changelog: [Internal]

Reviewed By: NickGerleman

Differential Revision: D61413945

fbshipit-source-id: 478c437336d3e7d5066ed62f6aa5bec106b8b061

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

@@ -320,6 +320,18 @@ function testDropShadow() {
     ]);
   });
 
+  it('should parse string drop-shadow with rgba color', () => {
+    expect(processFilter('drop-shadow(50 50 rgba(0, 0, 0, 1))')).toEqual([
+      {
+        dropShadow: {
+          offsetX: 50,
+          offsetY: 50,
+          color: processColor('rgba(0, 0, 0, 1)'),
+        },
+      },
+    ]);
+  });
+
   it('should parse string with mixed case drop-shadow', () => {
     expect(processFilter('DroP-sHaDOw(50 50 purple)')).toEqual([
       {

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

@@ -44,8 +44,8 @@ export default function processFilter(
   }
 
   if (typeof filter === 'string') {
-    // matches on functions with args like "drop-shadow(1.5)"
-    const regex = /([\w-]+)\(([^)]+)\)/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;
 
     while ((matches = regex.exec(filter))) {
@@ -254,8 +254,8 @@ function parseDropShadowString(rawDropShadow: string): ?DropShadowPrimitive {
   let lengthCount = 0;
   let keywordDetectedAfterLength = false;
 
-  // split on all whitespaces
-  for (const arg of rawDropShadow.split(/\s+/)) {
+  // split args by all whitespaces that are not in parenthesis
+  for (const arg of rawDropShadow.split(/\s+(?![^(]*\))/)) {
     const processedColor = processColor(arg);
     if (processedColor != null) {
       if (dropShadow.color != null) {