Merge pull request #60 from kristerkari/bugfix/box-shadow

Bugfix/box shadow

Author: jacobp100

src/index.test.js

@@ -464,6 +464,7 @@ it('transforms box-shadow into shadow- properties', () => runTest([
   shadowOffset: { width: 10, height: 20 },
   shadowRadius: 30,
   shadowColor: 'red',
+  shadowOpacity: 1,
 }));
 
 it('transforms box-shadow without blur-radius', () => runTest([
@@ -472,14 +473,16 @@ it('transforms box-shadow without blur-radius', () => runTest([
   shadowOffset: { width: 10, height: 20 },
   shadowRadius: 0,
   shadowColor: 'red',
+  shadowOpacity: 1,
 }));
 
 it('transforms box-shadow without color', () => runTest([
-  ['box-shadow', '10px 20px red'],
+  ['box-shadow', '10px 20px 30px'],
 ], {
   shadowOffset: { width: 10, height: 20 },
-  shadowRadius: 0,
-  shadowColor: 'red',
+  shadowRadius: 30,
+  shadowColor: 'black',
+  shadowOpacity: 1,
 }));
 
 it('transforms box-shadow without blur-radius, color', () => runTest([
@@ -488,8 +491,50 @@ it('transforms box-shadow without blur-radius, color', () => runTest([
   shadowOffset: { width: 10, height: 20 },
   shadowRadius: 0,
   shadowColor: 'black',
+  shadowOpacity: 1,
+}));
+
+it('transforms box-shadow with rgb color', () => runTest([
+  ['box-shadow', '10px 20px rgb(100, 100, 100)'],
+], {
+  shadowOffset: { width: 10, height: 20 },
+  shadowRadius: 0,
+  shadowColor: 'rgb(100, 100, 100)',
+  shadowOpacity: 1,
 }));
 
+it('transforms box-shadow with rgba color', () => runTest([
+  ['box-shadow', '10px 20px rgba(100, 100, 100, 0.5)'],
+], {
+  shadowOffset: { width: 10, height: 20 },
+  shadowRadius: 0,
+  shadowColor: 'rgba(100, 100, 100, 0.5)',
+  shadowOpacity: 1,
+}));
+
+it('transforms box-shadow with hsl color', () => runTest([
+  ['box-shadow', '10px 20px hsl(120, 100%, 50%)'],
+], {
+  shadowOffset: { width: 10, height: 20 },
+  shadowRadius: 0,
+  shadowColor: 'hsl(120, 100%, 50%)',
+  shadowOpacity: 1,
+}));
+
+it('transforms box-shadow with hsla color', () => runTest([
+  ['box-shadow', '10px 20px hsla(120, 100%, 50%, 0.7)'],
+], {
+  shadowOffset: { width: 10, height: 20 },
+  shadowRadius: 0,
+  shadowColor: 'hsla(120, 100%, 50%, 0.7)',
+  shadowOpacity: 1,
+}));
+
+it('transforms box-shadow and throws if multiple colors are used', () => {
+  expect(() => transformCss([['box-shadow', '0 0 0 red yellow green blue']]))
+    .toThrow('Failed to parse declaration "boxShadow: 0 0 0 red yellow green blue"');
+});
+
 it('transforms box-shadow enforces offset to be present', () => {
   expect(() => transformCss([['box-shadow', 'red']]))
     .toThrow('Failed to parse declaration "boxShadow: red"');

src/transforms/boxShadow.js

@@ -1,6 +1,6 @@
 const { tokens } = require('../tokenTypes');
 
-const { NONE, SPACE, WORD, LENGTH } = tokens;
+const { NONE, SPACE, COLOR, LENGTH } = tokens;
 
 module.exports = (tokenStream) => {
   let offsetX;
@@ -11,7 +11,7 @@ module.exports = (tokenStream) => {
   if (tokenStream.matches(NONE)) {
     tokenStream.expectEmpty();
     return {
-      $merge: { shadowOffset: { width: 0, height: 0 }, shadowRadius: 0, shadowColor: 'black' },
+      $merge: { shadowOffset: { width: 0, height: 0 }, shadowRadius: 0, shadowColor: 'black', shadowOpacity: 1 },
     };
   }
 
@@ -28,10 +28,8 @@ module.exports = (tokenStream) => {
         tokenStream.expect(SPACE);
         blurRadius = tokenStream.expect(LENGTH);
       }
-    } else if (color === undefined && (
-      tokenStream.matchesFunction() || tokenStream.matches(WORD)
-    )) {
-      color = String(tokenStream.lastValue);
+    } else if (color === undefined && tokenStream.matches(COLOR)) {
+      color = tokenStream.lastValue;
     } else {
       tokenStream.throw();
     }
@@ -45,6 +43,7 @@ module.exports = (tokenStream) => {
     shadowOffset: { width: offsetX, height: offsetY },
     shadowRadius: blurRadius !== undefined ? blurRadius : 0,
     shadowColor: color !== undefined ? color : 'black',
+    shadowOpacity: 1,
   };
   return { $merge };
 };