Match length in pixels

gradient-parser.js

@@ -16,6 +16,9 @@ module.exports = (function() {
       'rgba',
       'hsl',
       'literal'
+    ],
+    metrics: [
+      'px'
     ]
   };
 
@@ -23,6 +26,7 @@ module.exports = (function() {
     linearGradient: /^linear\-gradient/i,
     radialGradient: /^radial\-gradient/i,
     sideOrCorner: /^to (left (top|bottom)|right (top|bottom)|left|right|top|bottom)/i,
+    pixelValue: /^([0-9]+)px/,
     startCall: /^\(/,
     endCall: /^\)/,
     comma: /^,/
@@ -143,6 +147,17 @@ module.exports = (function() {
   }
 
   function matchColorStop() {
+    var color = matchColor();
+
+    if (!color) {
+      error('Expected color definition');
+    }
+
+    color.length = matchLength();
+    return color;
+  }
+
+  function matchColor() {
     return matchLiteralColor();
   }
 
@@ -158,6 +173,20 @@ module.exports = (function() {
     }
   }
 
+  function matchLength() {
+    return matchPixel();
+  }
+
+  function matchPixel() {
+    var captures = scan(tokens.pixelValue);
+    if (captures) {
+      return {
+        type: 'px',
+        value: captures[1]
+      };
+    }
+  }
+
   function scan(regexp) {
     var captures,
         blankCaptures;

spec/gradient-parser.spec.js

@@ -49,7 +49,7 @@ describe('gradient-parser.js', function () {
     it('when there\'s one more comma in colors', function() {
       expect(function() {
         gradientParser('linear-gradient(red, blue,)');
-      }).to.throwException(/One extra comma/);
+      }).to.throwException(/Expected color definition/);
     });
 
     it('when there\'s invalid input', function() {
@@ -73,7 +73,7 @@ describe('gradient-parser.js', function () {
     it('when there\'s missing color stops', function() {
       expect(function() {
         gradientParser('linear-gradient(to right, )');
-      }).to.throwException(/Missing color definitions/);
+      }).to.throwException(/Expected color definition/);
     });
 
     it('when there\'s missing closing call', function() {
@@ -83,7 +83,7 @@ describe('gradient-parser.js', function () {
     });
   });
 
-  describe('when parsing a simple definition', function(){
+  describe('when parsing a simple definition', function() {
     beforeEach(function() {
       ast = gradientParser('linear-gradient(red, blue)');
       subject = ast[0];
@@ -131,4 +131,22 @@ describe('gradient-parser.js', function () {
       });
     });
   });
+
+  describe('parse an definition with full color stop', function() {
+    beforeEach(function() {
+      ast = gradientParser('linear-gradient(blue 10px, transparent)');
+      subject = ast[0];
+    });
+
+    describe('the first color', function() {
+      beforeEach(function() {
+        subject = subject.colorStops[0];
+      });
+
+      it('should have the length', function() {
+        expect(subject.length.type).to.equal('px');
+        expect(subject.length.value).to.equal('10');
+      });
+    });
+  });
 });