Merge pull request #7 from lencioni/without-to

Add support for direction without "to"

Author: yuezk

index.js

@@ -17,15 +17,34 @@ function parseGradient(str) {
     // match side and any corner, in browser,
     // `top right` and `right top` are the same,
     // so we should put this situation into consideration
-    /* eslint-disable max-len */
-    var rSideCorner = /to\s+((?:left|right|top|bottom)|(?:(?:(?:left|right)\s+(?:top|bottom))|(?:(?:top|bottom)\s+(?:left|right))))(?=\s*,)/;
+    var rSideCorner = new RegExp(
+      '(' + // 1
+          '(?:to\\s+)?' +
+          '(?:' +
+              '(?:left|right|top|bottom)' +
+              '|' +
+              '(?:' +
+                  '(?:' + // left top, left bottom, right top, right bottom
+                      '(?:left|right)\\s+(?:top|bottom)' +
+                  ')' +
+                  '|' +
+                  '(?:' + // top left, top right, bottom left, bottom right
+                      '(?:top|bottom)\\s+(?:left|right)' +
+                  ')' +
+              ')' +
+          ')' +
+      ')' + // end 1
+      '(?=\\s*,)'
+    );
+
     // match color stops, the color format is not very precise
+    /* eslint-disable max-len */
     var rColorStops = /\s*(#[0-9a-f]{3,6}|(?:hsl|rgb)a?\(.+?\)|\w+)(?:\s+((?:[+-]?\d*\.?\d+)(?:%|[a-z]+)?))?/gi;
     // the final gradient line regexp
     var rGradientLine = new RegExp('^\\s*' + rAngle.source + '|' + rSideCorner.source, 'i');
     /* eslint-enable max-len */
 
-    var position = str.match(rGradientLine) || ['', null, 'deg', 'bottom'];
+    var position = str.match(rGradientLine) || ['', null, 'deg', 'to bottom'];
     var angle = position[1];
     var sideCorner = position[3];
     var unit = position[2];
@@ -105,8 +124,27 @@ function getDirection(gradient) {
 
     if (gradient.sideCorner) {
         segs = gradient.sideCorner.split(/\s+/);
+
+        var to = segs[0] === 'to';
+        if (to) {
+            // sideCorner starts with "to" so we shift it off since we don't
+          // need this element anymore, and continue with generating the
+          // gradient in the normal direction.
+            segs.shift();
+        } else {
+            // sideCorner does not start with "to", so we need to reverse the
+            // direction.
+            var reverseDirections = {
+                top: 'bottom',
+                bottom: 'top',
+                left: 'right',
+                right: 'left'
+            };
+            segs[0] = reverseDirections[segs[0]];
+        }
+
         result.direction = segs[0];
-        // side corner is  `top right` or `bottm left` etc.
+        // side corner is  `top right` or `bottom left` etc.
         if (segs.length > 1) {
             // fallback to one direction
             result.isFallback = true;

test/fixtures/bottom.css

@@ -0,0 +1,3 @@
+a {
+    background: linear-gradient(bottom, #1E5799, #7DB9E8);
+}

test/fixtures/bottom.expect.css

@@ -0,0 +1,4 @@
+a {
+    background: linear-gradient(bottom, #1E5799, #7DB9E8);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff7db9e8', endColorstr='#ff1e5799', GradientType=0);
+}

test/fixtures/left.css

@@ -0,0 +1,3 @@
+a {
+    background: linear-gradient(left, #1E5799, #7DB9E8);
+}

test/fixtures/left.expect.css

@@ -0,0 +1,4 @@
+a {
+    background: linear-gradient(left, #1E5799, #7DB9E8);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff1e5799', endColorstr='#ff7db9e8', GradientType=1);
+}

test/fixtures/right.css

@@ -0,0 +1,3 @@
+a {
+    background: linear-gradient(right, #1E5799, #7DB9E8);
+}

test/fixtures/right.expect.css

@@ -0,0 +1,4 @@
+a {
+    background: linear-gradient(right, #1E5799, #7DB9E8);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff7db9e8', endColorstr='#ff1e5799', GradientType=1);
+}

test/fixtures/top.css

@@ -0,0 +1,3 @@
+a {
+    background: linear-gradient(top, #1E5799, #7DB9E8);
+}

test/fixtures/top.expect.css

@@ -0,0 +1,4 @@
+a {
+    background: linear-gradient(top, #1E5799, #7DB9E8);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff1e5799', endColorstr='#ff7db9e8', GradientType=0);
+}

test/test.js

@@ -50,10 +50,26 @@ describe('postcss-filter-gradient', function () {
         test('simple', {}, done);
     });
 
+    it('should support top', function (done) {
+        test('top', {}, done);
+    });
+
+    it('should support bottom', function (done) {
+        test('bottom', {}, done);
+    });
+
     it('should support vertical reverse', function (done) {
         test('vertical-reverse', {}, done);
     });
 
+    it('should support right', function (done) {
+        test('right', {}, done);
+    });
+
+    it('should support left', function (done) {
+        test('left', {}, done);
+    });
+
     it('should support horizontal direction', function (done) {
         test('horizontal', {}, done);
     });