Refactor box-shadow to handle 0 values and throw on unitless values

Author: kristerkari

src/index.spec.js

@@ -230,7 +230,7 @@ describe("misc", () => {
       color: #656656;
       box-shadow: 10px 20px 30px #fff;
     }
-  
+
     .container {
       padding: 30px;
       margin-top: 65px;
@@ -1198,6 +1198,64 @@ describe("box-shadow", () => {
     });
   });
 
+  it("trims values", () => {
+    expect(
+      transform(`
+      .test {
+        box-shadow: 10px   20px   30px   #f00 ;
+      }
+    `),
+    ).toEqual({
+      test: {
+        shadowOffset: { width: 10, height: 20 },
+        shadowRadius: 30,
+        shadowColor: "#f00",
+      },
+    });
+  });
+
+  it("transforms box-shadow with 0 values", () => {
+    expect(
+      transform(`
+      .test {
+        box-shadow: 0 0 1px red;
+      }
+    `),
+    ).toEqual({
+      test: {
+        shadowOffset: { width: 0, height: 0 },
+        shadowRadius: 1,
+        shadowColor: "red",
+      },
+    });
+    expect(
+      transform(`
+      .test {
+        box-shadow: 0 0 0 red;
+      }
+    `),
+    ).toEqual({
+      test: {
+        shadowOffset: { width: 0, height: 0 },
+        shadowRadius: 0,
+        shadowColor: "red",
+      },
+    });
+    expect(
+      transform(`
+      .test {
+        box-shadow: 1px 1px 0 #00f;
+      }
+    `),
+    ).toEqual({
+      test: {
+        shadowOffset: { width: 1, height: 1 },
+        shadowRadius: 0,
+        shadowColor: "#00f",
+      },
+    });
+  });
+
   it("transforms box-shadow without blur-radius", () => {
     expect(
       transform(`
@@ -1265,6 +1323,32 @@ describe("box-shadow", () => {
     `);
     }).toThrowError('Failed to parse declaration "boxShadow: 10px"');
   });
+
+  it("transforms box-shadow and enforces units for non 0 values", () => {
+    expect(() => {
+      transform(`
+      .test {
+        box-shadow: 10 20px 30px #f00;
+      }
+    `);
+    }).toThrowError(
+      'Failed to parse declaration "boxShadow: 10 20px 30px #f00"',
+    );
+    expect(() => {
+      transform(`
+      .test {
+        box-shadow: 10px 20;
+      }
+    `);
+    }).toThrowError('Failed to parse declaration "boxShadow: 10px 20"');
+    expect(() => {
+      transform(`
+      .test {
+        box-shadow: 20;
+      }
+    `);
+    }).toThrowError('Failed to parse declaration "boxShadow: 20"');
+  });
 });
 
 describe("rem unit", () => {

src/transforms/boxShadow.js

@@ -1,15 +1,33 @@
+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 isZeroOrPxValue = val => val === "0" || /\d+px/.test(val);
+
+const filterNonNumbers = val =>
+  val.split(" ").filter(val => isNaN(formatNumber(val)));
+
+const filterNumbers = nums => {
+  if (!nums) {
+    return [];
+  }
+  return nums.map(val => val.trim()).map(val => {
+    if (!isZeroOrPxValue(val)) {
+      return undefined;
+    }
+    return formatNumber(val);
+  });
+};
+
 export const boxShadowToShadowProps = value => {
-  const pxs = value.match(/(\d*\.?\d+)px/g);
-  const nums = pxs
-    ? pxs.map(val => val.replace("px", "")).map(val => Number(val))
-    : [];
+  const nums = filterNumbers(matchNumbers(value));
+  const nonNums = filterNonNumbers(value);
   const offsetX = nums[0];
   const offsetY = nums[1];
   const blurRadius = nums[2];
-  const filtered = pxs
-    ? value.split(" ").filter(val => pxs.indexOf(val) === -1)
-    : [];
-  const color = filtered[0];
+  const color = nonNums[0];
 
   if (offsetX === undefined || offsetY === undefined) {
     throw new Error(`Failed to parse declaration "boxShadow: ${value}"`);