Fix opacity string value polyfill

This transform should occur after the unparsed value parsing.

Close #371

Co-authored-by: Nicolas Gallagher <necolas@meta.com>

Author: BlackCat1397

packages/react-strict-dom/src/native/css/processStyle.js

@@ -110,16 +110,18 @@ export function processStyle(
         result[propName] = 0;
         continue;
       }
-      // Polyfill support for string opacity on Android
-      if (propName === 'opacity') {
-        result[propName] = parseFloat(styleValue);
-        continue;
-      }
       // Polyfill support for custom property references (do this first)
-      else if (stringContainsVariables(styleValue)) {
+      if (stringContainsVariables(styleValue)) {
         result[propName] = CSSUnparsedValue.parse(propName, styleValue);
         continue;
-      } else if (
+      }
+      // Polyfill support for backgroundImage using experimental API
+      else if (propName === 'backgroundImage') {
+        result.experimental_backgroundImage = styleValue;
+        continue;
+      }
+      // Warn for unsupported caretColor values
+      else if (
         propName === 'caretColor' &&
         (typeof styleValue === 'undefined' || styleValue === 'auto')
       ) {
@@ -129,15 +131,17 @@ export function processStyle(
           );
         }
         continue;
-      } else if (propName === 'backgroundImage') {
-        result.experimental_backgroundImage = styleValue;
-        continue;
       }
       // Workaround unsupported objectFit values
       else if (propName === 'objectFit' && styleValue === 'none') {
         result[propName] = 'scale-down';
         continue;
       }
+      // Polyfill support for string opacity on Android
+      else if (propName === 'opacity') {
+        result[propName] = parseFloat(styleValue);
+        continue;
+      }
       // Polyfill placeContent
       else if (propName === 'placeContent') {
         // None of these values are supported in RN for both properties.

packages/react-strict-dom/tests/css-test.native.js

@@ -1274,11 +1274,17 @@ describe('properties: custom property', () => {
 
   test('parses a basic var correctly', () => {
     const options = {
-      customProperties: { test: 'red' }
+      customProperties: {
+        opacity: '0.25',
+        test: 'red'
+      }
     };
     expect(
       resolveCustomPropertyValue(options, ['color', 'var(--test)'])
     ).toEqual('red');
+    expect(
+      resolveCustomPropertyValue(options, ['opacity', 'var(--opacity)'])
+    ).toEqual(0.25);
   });
 
   test('parses a var with a default value', () => {