Support styling Image using shorthand border properties

Author: kristerkari

src/index.js

@@ -2,6 +2,14 @@ import parseCSS from "css/lib/parse";
 import transformCSS from "css-to-react-native";
 import { boxShadowToShadowProps } from "./transforms/boxShadow";
 import { remToPx } from "./transforms/rem";
+import { camelCase } from "./utils/camelCase";
+
+const shorthandBorderProps = [
+  "border-radius",
+  "border-width",
+  "border-color",
+  "border-style",
+];
 
 const transform = css => {
   const { stylesheet } = parseCSS(css);
@@ -26,6 +34,14 @@ const transform = css => {
         // but not released yet. Remove after it is supported.
         if (property === "box-shadow") {
           Object.assign(styles, boxShadowToShadowProps(value));
+        } else if (shorthandBorderProps.indexOf(property) > -1) {
+          // transform shorthand border properties back to
+          // shorthand form to support styling `Image`.
+          const transformed = transformCSS([[property, value]]);
+          const vals = Object.keys(transformed).map(key => transformed[key]);
+          const replacement = {};
+          replacement[camelCase(property)] = vals[0];
+          Object.assign(styles, replacement);
         } else {
           Object.assign(styles, transformCSS([[property, value]]));
         }

src/index.spec.js

@@ -106,10 +106,7 @@ describe("misc", () => {
     `),
     ).toEqual({
       test: {
-        borderTopLeftRadius: 1.5,
-        borderTopRightRadius: 1.5,
-        borderBottomRightRadius: 1.5,
-        borderBottomLeftRadius: 1.5,
+        borderRadius: 1.5,
       },
     });
   });
@@ -123,10 +120,7 @@ describe("misc", () => {
     `),
     ).toEqual({
       test: {
-        borderTopLeftRadius: -1.5,
-        borderTopRightRadius: -1.5,
-        borderBottomRightRadius: -1.5,
-        borderBottomLeftRadius: -1.5,
+        borderRadius: -1.5,
       },
     });
   });
@@ -157,10 +151,7 @@ describe("misc", () => {
     `),
     ).toEqual({
       test: {
-        borderTopColor: "red",
-        borderRightColor: "red",
-        borderBottomColor: "red",
-        borderLeftColor: "red",
+        borderColor: "red",
       },
     });
   });
@@ -526,6 +517,56 @@ describe("border", () => {
       test: { borderWidth: 2, borderColor: "black", borderStyle: "solid" },
     });
   });
+
+  describe("shorthand border properties related to Image elements", () => {
+    it("transforms border-radius", () => {
+      expect(
+        transform(`
+        .test {
+          border-radius: 6px;
+        }
+      `),
+      ).toEqual({
+        test: { borderRadius: 6 },
+      });
+    });
+
+    it("transforms border-color", () => {
+      expect(
+        transform(`
+        .test {
+          border-color: #fff;
+        }
+      `),
+      ).toEqual({
+        test: { borderColor: "#fff" },
+      });
+    });
+
+    it("transforms border-width", () => {
+      expect(
+        transform(`
+        .test {
+          border-width: 4px;
+        }
+      `),
+      ).toEqual({
+        test: { borderWidth: 4 },
+      });
+    });
+
+    it("transforms border-style", () => {
+      expect(
+        transform(`
+        .test {
+          border-style: solid;
+        }
+      `),
+      ).toEqual({
+        test: { borderStyle: "solid" },
+      });
+    });
+  });
 });
 
 describe("font", () => {
@@ -1455,10 +1496,7 @@ describe("rem unit", () => {
     ).toEqual({
       test1: { transform: [{ translateY: 26 }, { translateX: 15 }] },
       test2: {
-        borderBottomLeftRadius: 9,
-        borderBottomRightRadius: 9,
-        borderTopLeftRadius: 9,
-        borderTopRightRadius: 9,
+        borderRadius: 9,
       },
     });
 
@@ -1474,10 +1512,7 @@ describe("rem unit", () => {
     ).toEqual({
       test1: { transform: [{ translateY: 26 }, { translateX: 15 }] },
       test2: {
-        borderBottomLeftRadius: 9,
-        borderBottomRightRadius: 9,
-        borderTopLeftRadius: 9,
-        borderTopRightRadius: 9,
+        borderRadius: 9,
       },
     });
   });

src/utils/camelCase.js

@@ -0,0 +1,18 @@
+export function camelCase(str) {
+  // Lower cases the string
+  return (
+    str
+      .toLowerCase()
+      // Replaces any - or _ characters with a space
+      .replace(/[-_]+/g, " ")
+      // Removes any non alphanumeric characters
+      .replace(/[^\w\s]/g, "")
+      // Uppercases the first character in each group immediately following a space
+      // (delimited by spaces)
+      .replace(/ (.)/g, function($1) {
+        return $1.toUpperCase();
+      })
+      // Removes spaces
+      .replace(/ /g, "")
+  );
+}