From 3e6b4fa23088e92fb41608fa7dbe3cf410626fb3 Mon Sep 17 00:00:00 2001
From: Jorge Cabiedes Acosta <jorgecab@meta.com>
Date: Fri, 16 Aug 2024 17:55:30 -0700
Subject: [PATCH] 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
---
 .../StyleSheet/__tests__/processFilter-test.js       | 12 ++++++++++++
 .../Libraries/StyleSheet/processFilter.js            |  8 ++++----
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/packages/react-native/Libraries/StyleSheet/__tests__/processFilter-test.js b/packages/react-native/Libraries/StyleSheet/__tests__/processFilter-test.js
index c1d2bf4128b..7bb31363424 100644
--- a/packages/react-native/Libraries/StyleSheet/__tests__/processFilter-test.js
+++ b/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([
       {
diff --git a/packages/react-native/Libraries/StyleSheet/processFilter.js b/packages/react-native/Libraries/StyleSheet/processFilter.js
index f865d238d61..6b2dc6f689f 100644
--- a/packages/react-native/Libraries/StyleSheet/processFilter.js
+++ b/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) {