box-shadow: fix support for rgb and rgba colors

Author: kristerkari

src/index.spec.js

@@ -1198,6 +1198,38 @@ describe("box-shadow", () => {
     });
   });
 
+  it("supports rgb values", () => {
+    expect(
+      transform(`
+      .test {
+        box-shadow: 10px 20px 30px rgb(100, 100, 100);
+      }
+    `),
+    ).toEqual({
+      test: {
+        shadowOffset: { width: 10, height: 20 },
+        shadowRadius: 30,
+        shadowColor: "rgb(100, 100, 100)",
+      },
+    });
+  });
+
+  it("supports rgba values", () => {
+    expect(
+      transform(`
+      .test {
+        box-shadow: 10px 20px 30px rgba(100, 100, 100, 0.5);
+      }
+    `),
+    ).toEqual({
+      test: {
+        shadowOffset: { width: 10, height: 20 },
+        shadowRadius: 30,
+        shadowColor: "rgba(100, 100, 100, 0.5)",
+      },
+    });
+  });
+
   it("trims values", () => {
     expect(
       transform(`

src/transforms/boxShadow.js

@@ -2,12 +2,13 @@ const removePx = val => val.replace(/(\d+)px/g, "$1");
 
 const formatNumber = val => Number(removePx(val));
 
-const matchNumbers = val => val.match(/(^|\s+)\d+(px)?/g);
+const matchNumbers = val =>
+  val.replace(/rgba?\(.*\)/g, "").match(/(^|\s+)\d+(px)?/g);
 
 const isZeroOrPxValue = val => val === "0" || /\d+px/.test(val);
 
 const filterNonNumbers = val =>
-  val.split(" ").filter(val => isNaN(formatNumber(val)));
+  val.split(/\s+(?![^(]*?\))/).filter(val => isNaN(formatNumber(val)));
 
 const filterNumbers = nums => {
   if (!nums) {