Separate out LTR/RTL create and resolve methods

package.json

@@ -63,12 +63,14 @@
     "sinon-sandbox": "^1.0.2"
   },
   "peerDependencies": {
-    "aphrodite": ">=0.5.0"
+    "aphrodite": ">=0.5.0",
+    "react-with-styles": "^3.0.0"
   },
   "dependencies": {
     "array-flatten": "^2.1.1",
     "has": "^1.0.1",
     "object.assign": "^4.1.0",
+    "object.entries": "^1.0.4",
     "rtl-css-js": "^1.8.0"
   }
 }

src/aphroditeInterfaceFactory.js

@@ -1,18 +1,38 @@
 import { flushToStyleTag } from 'aphrodite/lib/inject';
+import rtlCSSJS from 'rtl-css-js';
+import entries from 'object.entries';
 
-import resolve from './utils/resolve';
+import resolveLTR from './utils/resolveLTR';
+import resolveRTL from './utils/resolveRTL';
 
 export default ({ StyleSheet, css }/* aphrodite */) => ({
   create(styleHash) {
+    return this.createLTR(styleHash);
+  },
+
+  createLTR(styleHash) {
     return StyleSheet.create(styleHash);
   },
 
+  createRTL(styleHash) {
+    const styleHashRTL = {};
+    entries(styleHash).forEach(([styleKey, styleDef]) => {
+      styleHashRTL[styleKey] = rtlCSSJS(styleDef);
+    });
+
+    return StyleSheet.create(styleHashRTL);
+  },
+
   resolve(styles) {
-    return resolve(css, styles);
+    return this.resolveLTR(styles);
+  },
+
+  resolveLTR(styles) {
+    return resolveLTR(css, styles);
   },
 
-  resolveNoRTL(styles) {
-    return resolve(css, styles);
+  resolveRTL(styles) {
+    return resolveRTL(css, styles);
   },
 
   // Flushes all buffered styles to a style tag. Required for components

src/utils/resolve.js → src/utils/resolveLTR.js

@@ -1,27 +1,19 @@
-/* eslint-disable no-param-reassign */
 import { from as flatten } from 'array-flatten';
 
 import separateStyles from './separateStyles';
 
-function resetStyleDefinition(stylesObj) {
-  if (stylesObj.noRTL) {
-    stylesObj._definition = stylesObj.noRTL;
-  }
-  return stylesObj;
-}
-
 // Styles is an array of properties returned by `create()`, a POJO, or an
 // array thereof. POJOs are treated as inline styles. This version of the
 // resolve function explicitly does no work to flip styles for an RTL context.
 // This function returns an object to be spread onto an element.
-export default function resolve(css, styles) {
+export default function resolveLTR(css, styles) {
   const flattenedStyles = flatten(styles);
 
   const {
     aphroditeStyles,
     hasInlineStyles,
     inlineStyles,
-  } = separateStyles(flattenedStyles, resetStyleDefinition);
+  } = separateStyles(flattenedStyles);
 
   const result = {};
   if (aphroditeStyles.length > 0) {

src/utils/resolveRTL.js

@@ -0,0 +1,29 @@
+import { from as flatten } from 'array-flatten';
+import rtlCSSJS from 'rtl-css-js';
+
+import separateStyles from './separateStyles';
+
+// Styles is an array of properties returned by `create()`, a POJO, or an
+// array thereof. POJOs are treated as inline styles. This version of the
+// resolve function explicitly flips inline styles for an RTL context.
+// This function returns an object to be spread onto an element.
+export default function resolveRTL(css, styles) {
+  const flattenedStyles = flatten(styles);
+
+  const {
+    aphroditeStyles,
+    hasInlineStyles,
+    inlineStyles,
+  } = separateStyles(flattenedStyles);
+
+  const result = {};
+  if (aphroditeStyles.length > 0) {
+    result.className = css(...aphroditeStyles);
+  }
+
+  if (hasInlineStyles) {
+    result.style = rtlCSSJS(inlineStyles);
+  }
+
+  return result;
+}

src/utils/separateStyles.js

@@ -2,7 +2,7 @@ import has from 'has';
 
 // This function takes the array of styles and separates them into styles that
 // are handled by Aphrodite and inline styles.
-export default function separateStyles(stylesArray, aphroditeStyleTransform) {
+export default function separateStyles(stylesArray) {
   const aphroditeStyles = [];
 
   // Since determining if an Object is empty requires collecting all of its
@@ -15,7 +15,7 @@ export default function separateStyles(stylesArray, aphroditeStyleTransform) {
   // performance is critical. Normally we would prefer using `forEach`, but
   // old-fashioned for loops are faster so that's what we have chosen here.
   for (let i = 0; i < stylesArray.length; i += 1) {
-    let style = stylesArray[i];
+    const style = stylesArray[i];
 
     // If this  style is falsey, we just want to disregard it. This allows for
     // syntax like:
@@ -26,12 +26,6 @@ export default function separateStyles(stylesArray, aphroditeStyleTransform) {
         has(style, '_name') &&
         has(style, '_definition')
       ) {
-        // This looks like a reference to an Aphrodite style object, so that's
-        // where it goes.
-        if (aphroditeStyleTransform) {
-          style = aphroditeStyleTransform(style);
-        }
-
         aphroditeStyles.push(style);
       } else {
         Object.assign(inlineStyles, style);