Fix boxShadow parsing

apps/common-app/src/apps/css/examples/transitions/screens/testExamples/Playground.tsx

@@ -12,29 +12,10 @@ import { Button, Screen } from '@/apps/css/components';
 
 const transitionStyles: Array<ViewStyle> = [
   {
-    transform: [
-      { perspective: 100 },
-      { rotate: '45deg' },
-      { skewX: '45deg' },
-      { rotateX: '45deg' },
-    ],
+    boxShadow: '0 0 10px 0 rgba(0, 0, 0, 0.5)',
   },
   {
-    backgroundColor: 'blue',
-    borderRadius: 100,
-    opacity: 0.5,
-    transform: [{ translateY: 200 }, { rotate: '45deg' }, { scale: 2 }],
-  },
-  {
-    backgroundColor: 'green',
-    transform: [
-      { perspective: 200 },
-      { rotate: '45deg' },
-      { translateY: 150 },
-      { rotateY: '-25deg' },
-      { rotateX: '35deg' },
-    ],
-    width: 200,
+    boxShadow: '0 0 20px 0 rgba(0, 0, 0, 0.5)',
   },
 ];
 

packages/react-native-reanimated/src/css/platform/native/style/processors/__tests__/shadows.test.ts

@@ -0,0 +1,3 @@
+import { processBoxShadow } from '../shadows';
+
+describe(processBoxShadow, () => {});

packages/react-native-reanimated/src/css/utils/__tests__/parsers.test.ts

@@ -0,0 +1,96 @@
+'use strict';
+import { parseBoxShadowString } from '../parsers';
+
+describe(parseBoxShadowString, () => {
+  describe('correct number of shadows', () => {
+    it('works with empty string', () => {
+      expect(parseBoxShadowString('')).toHaveLength(0);
+    });
+
+    it('works with one shadow', () => {
+      expect(
+        parseBoxShadowString('0 0 10px 0 rgba(0, 0, 0, 0.5)')
+      ).toHaveLength(1);
+    });
+
+    it('works with multiple shadows', () => {
+      expect(
+        parseBoxShadowString(
+          '0 0 10px 0 rgba(0, 0, 0, 0.5), 0 0 20px 0 rgba(0, 0, 0, 0.5)'
+        )
+      ).toHaveLength(2);
+    });
+  });
+
+  describe('proper shadow values', () => {
+    it.each([
+      [
+        '0 0 10px 0 red',
+        [
+          {
+            offsetX: '0',
+            offsetY: '0',
+            blurRadius: '10px',
+            spreadDistance: '0',
+            color: 'red',
+          },
+        ],
+      ],
+      [
+        'blue 0 0 10px 0 inset',
+        [
+          {
+            offsetX: '0',
+            offsetY: '0',
+            blurRadius: '10px',
+            spreadDistance: '0',
+            color: 'blue',
+            inset: true,
+          },
+        ],
+      ],
+      [
+        '20px 20px 10px 0 red, 0 10px 20px 30px blue',
+        [
+          {
+            offsetX: '20px',
+            offsetY: '20px',
+            blurRadius: '10px',
+            spreadDistance: '0',
+            color: 'red',
+          },
+          {
+            offsetX: '0',
+            offsetY: '10px',
+            blurRadius: '20px',
+            spreadDistance: '30px',
+            color: 'blue',
+          },
+        ],
+      ],
+    ])('works with %s', (value, expected) => {
+      expect(parseBoxShadowString(value)).toEqual(expected);
+    });
+  });
+
+  describe('different color formats', () => {
+    it.each([
+      'red',
+      '#ff0000',
+      'rgb(255, 0, 0)',
+      'rgba(255, 0, 0, 0.5)',
+      'hsl(0, 100%, 50%)',
+      'hsla(0, 100%, 50%, 0.5)',
+    ])('works with %s', (value) => {
+      expect(parseBoxShadowString(`0 0 10px 0 ${value}`)).toEqual([
+        {
+          offsetX: '0',
+          offsetY: '0',
+          blurRadius: '10px',
+          spreadDistance: '0',
+          color: value,
+        },
+      ]);
+    });
+  });
+});

packages/react-native-reanimated/src/css/utils/parsers.ts

@@ -9,25 +9,32 @@ const LENGTH_MAPPINGS = [
   'spreadDistance',
 ] as const;
 
+const SHADOW_PARTS_REGEX = /(?:[^\s()]+|\([^()]*\))+/g;
+const SHADOW_SPLIT_REGEX = /(?:[^,()]+|\([^)]*\))+(?=\s*,|$)/g;
+
 export function parseBoxShadowString(value: string) {
   if (value === 'none') {
     return [];
   }
 
-  return value.split(/\s*,\s*/).map<BoxShadowValue>((shadow) => {
+  const shadows = value.match(SHADOW_SPLIT_REGEX) || [];
+
+  return shadows.map<BoxShadowValue>((shadow) => {
     const result: BoxShadowValue = {
       offsetX: 0,
       offsetY: 0,
     };
 
     let foundLengthsCount = 0;
-    shadow.split(/\s+/).forEach((part) => {
+    const parts = shadow.match(SHADOW_PARTS_REGEX) || [];
+
+    parts.forEach((part) => {
       if (isLength(part)) {
         result[LENGTH_MAPPINGS[foundLengthsCount++]] = part;
       } else if (part === 'inset') {
         result.inset = true;
       } else {
-        result.color = part;
+        result.color = part.trim();
       }
     });