fix(CSS): tolerate leading whitespace in a transform string

packages/react-native-reanimated/CHANGELOG.md

@@ -14,6 +14,7 @@
 ### 🐛 Bug fixes
 
 - Fix `normalizeColor` resolving `Object.prototype` members such as `'constructor'` and `'toString'` as color names and returning a function instead of `null`. ([#10387](https://github.com/software-mansion/react-native-reanimated/pull/10387) by [@dennytosp](https://github.com/dennytosp))
+- Fix `transform` and `transformOrigin` strings padded with whitespace throwing instead of parsing. ([#10388](https://github.com/software-mansion/react-native-reanimated/pull/10388) by [@dennytosp](https://github.com/dennytosp))
 - Fix animated styles on sticky headers throwing an immutable-object mutation error in development. ([#10389](https://github.com/software-mansion/react-native-reanimated/pull/10389) by [@ngocdevv](https://github.com/ngocdevv))
 - Fix shared element transitions never running on Android for npm installs by publishing `react-native.config.js`, which registers the Shared Transition Boundary component descriptor for autolinking. ([#10375](https://github.com/software-mansion/react-native-reanimated/pull/10375) by [@dennytosp](https://github.com/dennytosp))
 - Keep exiting views at their position in the host tree, so they no longer draw above later siblings. ([#10392](https://github.com/software-mansion/react-native-reanimated/pull/10392) by [@pawicao](https://github.com/pawicao))

packages/react-native-reanimated/src/common/style/processors/__tests__/transform.test.ts

@@ -287,6 +287,14 @@ describe(processTransform, () => {
           { rotate: '45deg' },
         ],
       },
+      {
+        input: '  translate(25, 25) scale(2)  ',
+        output: [{ translateX: 25 }, { translateY: 25 }, { scale: 2 }],
+      },
+      {
+        input: '\n  translate(25, 25)\n  scale(2)\n',
+        output: [{ translateX: 25 }, { translateY: 25 }, { scale: 2 }],
+      },
       {
         input: 'translate(50, 50) scale(1.5, 2) skew(30deg, 15deg)',
         output: [

packages/react-native-reanimated/src/common/style/processors/__tests__/transformOrigin.test.ts

@@ -114,6 +114,20 @@ describe(processTransformOrigin, () => {
           },
         ],
       },
+      {
+        name: 'padded string syntax',
+        cases: [
+          {
+            name: 'surrounded by whitespace',
+            cases: [
+              { input: '  50% 50%', output: ['50%', '50%', 0] },
+              { input: '  left top  ', output: [0, 0, 0] },
+              { input: '\n  25px 25% 25px\n', output: [25, '25%', 25] },
+              { input: '\tcenter', output: ['50%', '50%', 0] },
+            ],
+          },
+        ],
+      },
       {
         name: 'array syntax',
         cases: [

packages/react-native-reanimated/src/common/style/processors/transform.ts

@@ -184,6 +184,7 @@ export const processTransform: ValueProcessor<TransformsArray | string> = (
   }
 
   return value
+    .trim()
     .split(/\)\s*/)
     .filter(Boolean)
     .flatMap((part) => {

packages/react-native-reanimated/src/common/style/processors/transformOrigin.ts

@@ -150,7 +150,8 @@ export const processTransformOrigin: ValueProcessor<
 > = (value) => {
   'worklet';
   const isArray = Array.isArray(value);
-  let components = typeof value === 'string' ? value.split(/\s+/) : value;
+  let components =
+    typeof value === 'string' ? value.trim().split(/\s+/) : value;
   const customParse = isArray ? () => null : parsePx;
 
   if (components.length < 1 || components.length > 3) {