Merge pull request #5 from kristerkari/feature/update-css-to-react-native-to-v2.1.1

Update css-to-react-native to version 2.1.1

Author: kristerkari

package.json

@@ -26,7 +26,7 @@
   },
   "dependencies": {
     "css": "^2.2.1",
-    "css-to-react-native": "^2.1.0"
+    "css-to-react-native": "^2.1.1"
   },
   "repository": {
     "type": "git",

src/index.js

@@ -1,6 +1,5 @@
 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";
 import { allEqual } from "./utils/allEqual";
@@ -34,11 +33,7 @@ const transform = css => {
         const property = declaration.property;
         const value = remToPx(declaration.value);
 
-        // box-shadow is implemented in css-to-react-native,
-        // but it's missing some features like rgb/rgba colors.
-        if (property === "box-shadow") {
-          Object.assign(styles, boxShadowToShadowProps(value));
-        } else if (shorthandBorderProps.indexOf(property) > -1) {
+        if (shorthandBorderProps.indexOf(property) > -1) {
           // transform single value shorthand border properties back to
           // shorthand form to support styling `Image`.
           const transformed = transformCSS([[property, value]]);

src/index.spec.js

@@ -1407,6 +1407,40 @@ describe("box-shadow", () => {
     });
   });
 
+  it("supports box-shadow with hsl color", () => {
+    expect(
+      transform(`
+      .test {
+        box-shadow: 10px 20px 30px hsl(120, 100%, 50%);
+      }
+    `),
+    ).toEqual({
+      test: {
+        shadowOffset: { width: 10, height: 20 },
+        shadowRadius: 30,
+        shadowColor: "hsl(120, 100%, 50%)",
+        shadowOpacity: 1,
+      },
+    });
+  });
+
+  it("supports box-shadow with hsla color", () => {
+    expect(
+      transform(`
+      .test {
+        box-shadow: 10px 20px 30px hsla(120, 100%, 50%, 0.7);
+      }
+    `),
+    ).toEqual({
+      test: {
+        shadowOffset: { width: 10, height: 20 },
+        shadowRadius: 30,
+        shadowColor: "hsla(120, 100%, 50%, 0.7)",
+        shadowOpacity: 1,
+      },
+    });
+  });
+
   it("trims values", () => {
     expect(
       transform(`
@@ -1530,6 +1564,18 @@ describe("box-shadow", () => {
     }).toThrowError('Failed to parse declaration "boxShadow: red"');
   });
 
+  it("transforms box-shadow and throws if multiple colors are used", () => {
+    expect(() => {
+      transform(`
+      .test {
+        box-shadow: 0 0 0 red yellow green blue;
+      }
+    `);
+    }).toThrowError(
+      'Failed to parse declaration "boxShadow: 0 0 0 red yellow green blue"',
+    );
+  });
+
   it("transforms box-shadow and enforces offset-y if offset-x present", () => {
     expect(() => {
       transform(`

src/transforms/boxShadow.js

@@ -966,9 +966,9 @@ css-color-keywords@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05"
 
-css-to-react-native@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-2.1.0.tgz#671b922aa3c0bc880e09f8f00e5a4bf0803928e5"
+css-to-react-native@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-2.1.1.tgz#ea0f6ca3cdbc37cb40f3f4f55b49d3bb28b8a43e"
   dependencies:
     css-color-keywords "^1.0.0"
     fbjs "^0.8.5"