Add StyleSheet.setStyleAttributePreprocessor

Libraries/Renderer/src/renderers/native/__tests__/ReactNativeAttributePayload-test.js

@@ -0,0 +1,22 @@
+jest.disableAutomock();
+
+const ReactNativeAttributePayload = require('ReactNativeAttributePayload');
+const ReactNativeStyleAttributes = require('ReactNativeStyleAttributes');
+const StyleSheet = require('StyleSheet');
+
+describe('ReactNativeAttributePayload', () => {
+
+  describe('create', () => {
+    it('works with custom style processors', () => {
+      StyleSheet.setStyleAttributePreprocessor('fontFamily', (nextValue) => 'Wingdings');
+
+      const updatePayload = ReactNativeAttributePayload.create(
+        {style: {fontFamily: 'Comic Sans'}},
+        {style: ReactNativeStyleAttributes},
+      );
+
+      expect(updatePayload.fontFamily).toEqual('Wingdings');
+    });
+  });
+
+});

Libraries/StyleSheet/StyleSheet.js

@@ -13,6 +13,7 @@
 
 var PixelRatio = require('PixelRatio');
 var ReactNativePropRegistry = require('ReactNativePropRegistry');
+var ReactNativeStyleAttributes = require('ReactNativeStyleAttributes');
 var StyleSheetValidation = require('StyleSheetValidation');
 
 var flatten = require('flattenStyle');
@@ -162,6 +163,34 @@ module.exports = {
    */
   flatten,
 
+  /**
+   * WARNING: EXPERIMENTAL. Breaking changes will probably happen a lot and will
+   * not be reliably announced. The whole thing might be deleted, who knows? Use
+   * at your own risk.
+   *
+   * Sets a function to use to pre-process a style property value. This is used
+   * internally to process color and transform values. You should not use this
+   * unless you really know what you are doing and have exhausted other options.
+   */
+  setStyleAttributePreprocessor(property: string, process: (nextProp: mixed) => mixed) {
+    let value;
+
+    if (typeof ReactNativeStyleAttributes[property] === 'string') {
+      value = {};
+    } else if (typeof ReactNativeStyleAttributes[property] === 'object') {
+      value = ReactNativeStyleAttributes[property];
+    } else {
+      console.error(`${property} is not a valid style attribute`);
+      return;
+    }
+
+    if (__DEV__ && typeof value.process === 'function') {
+      console.warn(`Overwriting ${property} style attribute preprocessor`);
+    }
+
+    ReactNativeStyleAttributes[property] = { ...value, process };
+  },
+
   /**
    * Creates a StyleSheet style reference from the given object.
    */
@@ -172,5 +201,5 @@ module.exports = {
       result[key] = ReactNativePropRegistry.register(obj[key]);
     }
     return result;
-  }
+  },
 };