From 3559c23b44a23e8eada637358c8e00c616a44741 Mon Sep 17 00:00:00 2001
From: Rafael Caricio <rafael.jacinto@gmail.com>
Date: Sat, 20 Sep 2014 11:37:41 +0200
Subject: [PATCH] Stringify

---
 build/node.js          | 112 ++++++++++++++++++++++++++++++++++-------
 build/web.js           | 112 ++++++++++++++++++++++++++++++++++-------
 lib/stringify.js       | 112 ++++++++++++++++++++++++++++++++++-------
 spec/stringify.spec.js |  47 +++++++++++++++++
 4 files changed, 329 insertions(+), 54 deletions(-)

diff --git a/build/node.js b/build/node.js
index fb3e08d..63cf3ed 100644
--- a/build/node.js
+++ b/build/node.js
@@ -9,39 +9,115 @@ GradientParser.stringify = (function() {
   var visitor = {
 
     'visit_linear-gradient': function(node) {
+      return visitor.visit_gradient(node);
+    },
+
+    'visit_repeating-linear-gradient': function(node) {
+      return visitor.visit_gradient(node);
+    },
+
+    'visit_radial-gradient': function(node) {
+      return visitor.visit_gradient(node);
+    },
+
+    'visit_repeating-radial-gradient': function(node) {
+      return visitor.visit_gradient(node);
+    },
+
+    'visit_gradient': function(node) {
       var orientation = visitor.visit(node.orientation);
       if (orientation) {
         orientation += ', ';
       }
 
-      return 'linear-gradient('+ orientation + visitor.visit(node.colorStops) + ')';
+      return node.type + '(' + orientation + visitor.visit(node.colorStops) + ')';
     },
 
-    visit_literal: function(node) {
+    'visit_shape': function(node) {
+      var result = node.value,
+          at = visitor.visit(node.at),
+          style = visitor.visit(node.style);
+
+      if (style) {
+        result += ' ' + style;
+      }
+
+      if (at) {
+        result += ' at ' + at;
+      }
+
+      return result;
+    },
+
+    'visit_default-radial': function(node) {
+      var result = '',
+          at = visitor.visit(node.at);
+
+      if (at) {
+        result += at;
+      }
+      return result;
+    },
+
+    'visit_extent-keyword': function(node) {
       return node.value;
     },
 
-    visit_angular: function(node) {
+    'visit_position-keyword': function(node) {
+      return node.value;
+    },
+
+    'visit_position': function(node) {
+      return visitor.visit(node.value.x) + ' ' + visitor.visit(node.value.y);
+    },
+
+    'visit_%': function(node) {
+      return node.value + '%';
+    },
+
+    'visit_em': function(node) {
+      return node.value + 'em';
+    },
+
+    'visit_px': function(node) {
+      return node.value + 'px';
+    },
+
+    'visit_literal': function(node) {
+      return visitor.visit_color(node.value, node);
+    },
+
+    'visit_hex': function(node) {
+      return visitor.visit_color('#' + node.value, node);
+    },
+
+    'visit_rgb': function(node) {
+      return visitor.visit_color('rgb(' + node.value.join(', ') + ')', node);
+    },
+
+    'visit_rgba': function(node) {
+      return visitor.visit_color('rgba(' + node.value.join(', ') + ')', node);
+    },
+
+    'visit_color': function(resultColor, node) {
+      var result = resultColor,
+          length = visitor.visit(node.length);
+
+      if (length) {
+        result += ' ' + length;
+      }
+      return result;
+    },
+
+    'visit_angular': function(node) {
       return node.value + 'deg';
     },
 
-    visit_hex: function(node) {
-      return '#' + node.value;
-    },
-
-    visit_rgb: function(node) {
-      return 'rgb(' + node.value.join(', ') + ')';
-    },
-
-    visit_rgba: function(node) {
-      return 'rgba(' + node.value.join(', ') + ')';
-    },
-
-    visit_directional: function(node) {
+    'visit_directional': function(node) {
       return 'to ' + node.value;
     },
 
-    visit_array: function(elements) {
+    'visit_array': function(elements) {
       var result = '',
           size = elements.length;
 
@@ -55,7 +131,7 @@ GradientParser.stringify = (function() {
       return result;
     },
 
-    visit: function(element) {
+    'visit': function(element) {
       if (!element) {
         return '';
       }
diff --git a/build/web.js b/build/web.js
index 24ca45d..bb71866 100644
--- a/build/web.js
+++ b/build/web.js
@@ -349,39 +349,115 @@ GradientParser.stringify = (function() {
   var visitor = {
 
     'visit_linear-gradient': function(node) {
+      return visitor.visit_gradient(node);
+    },
+
+    'visit_repeating-linear-gradient': function(node) {
+      return visitor.visit_gradient(node);
+    },
+
+    'visit_radial-gradient': function(node) {
+      return visitor.visit_gradient(node);
+    },
+
+    'visit_repeating-radial-gradient': function(node) {
+      return visitor.visit_gradient(node);
+    },
+
+    'visit_gradient': function(node) {
       var orientation = visitor.visit(node.orientation);
       if (orientation) {
         orientation += ', ';
       }
 
-      return 'linear-gradient('+ orientation + visitor.visit(node.colorStops) + ')';
+      return node.type + '(' + orientation + visitor.visit(node.colorStops) + ')';
     },
 
-    visit_literal: function(node) {
+    'visit_shape': function(node) {
+      var result = node.value,
+          at = visitor.visit(node.at),
+          style = visitor.visit(node.style);
+
+      if (style) {
+        result += ' ' + style;
+      }
+
+      if (at) {
+        result += ' at ' + at;
+      }
+
+      return result;
+    },
+
+    'visit_default-radial': function(node) {
+      var result = '',
+          at = visitor.visit(node.at);
+
+      if (at) {
+        result += at;
+      }
+      return result;
+    },
+
+    'visit_extent-keyword': function(node) {
       return node.value;
     },
 
-    visit_angular: function(node) {
+    'visit_position-keyword': function(node) {
+      return node.value;
+    },
+
+    'visit_position': function(node) {
+      return visitor.visit(node.value.x) + ' ' + visitor.visit(node.value.y);
+    },
+
+    'visit_%': function(node) {
+      return node.value + '%';
+    },
+
+    'visit_em': function(node) {
+      return node.value + 'em';
+    },
+
+    'visit_px': function(node) {
+      return node.value + 'px';
+    },
+
+    'visit_literal': function(node) {
+      return visitor.visit_color(node.value, node);
+    },
+
+    'visit_hex': function(node) {
+      return visitor.visit_color('#' + node.value, node);
+    },
+
+    'visit_rgb': function(node) {
+      return visitor.visit_color('rgb(' + node.value.join(', ') + ')', node);
+    },
+
+    'visit_rgba': function(node) {
+      return visitor.visit_color('rgba(' + node.value.join(', ') + ')', node);
+    },
+
+    'visit_color': function(resultColor, node) {
+      var result = resultColor,
+          length = visitor.visit(node.length);
+
+      if (length) {
+        result += ' ' + length;
+      }
+      return result;
+    },
+
+    'visit_angular': function(node) {
       return node.value + 'deg';
     },
 
-    visit_hex: function(node) {
-      return '#' + node.value;
-    },
-
-    visit_rgb: function(node) {
-      return 'rgb(' + node.value.join(', ') + ')';
-    },
-
-    visit_rgba: function(node) {
-      return 'rgba(' + node.value.join(', ') + ')';
-    },
-
-    visit_directional: function(node) {
+    'visit_directional': function(node) {
       return 'to ' + node.value;
     },
 
-    visit_array: function(elements) {
+    'visit_array': function(elements) {
       var result = '',
           size = elements.length;
 
@@ -395,7 +471,7 @@ GradientParser.stringify = (function() {
       return result;
     },
 
-    visit: function(element) {
+    'visit': function(element) {
       if (!element) {
         return '';
       }
diff --git a/lib/stringify.js b/lib/stringify.js
index 1f56c8f..0f3b300 100644
--- a/lib/stringify.js
+++ b/lib/stringify.js
@@ -9,39 +9,115 @@ GradientParser.stringify = (function() {
   var visitor = {
 
     'visit_linear-gradient': function(node) {
+      return visitor.visit_gradient(node);
+    },
+
+    'visit_repeating-linear-gradient': function(node) {
+      return visitor.visit_gradient(node);
+    },
+
+    'visit_radial-gradient': function(node) {
+      return visitor.visit_gradient(node);
+    },
+
+    'visit_repeating-radial-gradient': function(node) {
+      return visitor.visit_gradient(node);
+    },
+
+    'visit_gradient': function(node) {
       var orientation = visitor.visit(node.orientation);
       if (orientation) {
         orientation += ', ';
       }
 
-      return 'linear-gradient('+ orientation + visitor.visit(node.colorStops) + ')';
+      return node.type + '(' + orientation + visitor.visit(node.colorStops) + ')';
     },
 
-    visit_literal: function(node) {
+    'visit_shape': function(node) {
+      var result = node.value,
+          at = visitor.visit(node.at),
+          style = visitor.visit(node.style);
+
+      if (style) {
+        result += ' ' + style;
+      }
+
+      if (at) {
+        result += ' at ' + at;
+      }
+
+      return result;
+    },
+
+    'visit_default-radial': function(node) {
+      var result = '',
+          at = visitor.visit(node.at);
+
+      if (at) {
+        result += at;
+      }
+      return result;
+    },
+
+    'visit_extent-keyword': function(node) {
       return node.value;
     },
 
-    visit_angular: function(node) {
+    'visit_position-keyword': function(node) {
+      return node.value;
+    },
+
+    'visit_position': function(node) {
+      return visitor.visit(node.value.x) + ' ' + visitor.visit(node.value.y);
+    },
+
+    'visit_%': function(node) {
+      return node.value + '%';
+    },
+
+    'visit_em': function(node) {
+      return node.value + 'em';
+    },
+
+    'visit_px': function(node) {
+      return node.value + 'px';
+    },
+
+    'visit_literal': function(node) {
+      return visitor.visit_color(node.value, node);
+    },
+
+    'visit_hex': function(node) {
+      return visitor.visit_color('#' + node.value, node);
+    },
+
+    'visit_rgb': function(node) {
+      return visitor.visit_color('rgb(' + node.value.join(', ') + ')', node);
+    },
+
+    'visit_rgba': function(node) {
+      return visitor.visit_color('rgba(' + node.value.join(', ') + ')', node);
+    },
+
+    'visit_color': function(resultColor, node) {
+      var result = resultColor,
+          length = visitor.visit(node.length);
+
+      if (length) {
+        result += ' ' + length;
+      }
+      return result;
+    },
+
+    'visit_angular': function(node) {
       return node.value + 'deg';
     },
 
-    visit_hex: function(node) {
-      return '#' + node.value;
-    },
-
-    visit_rgb: function(node) {
-      return 'rgb(' + node.value.join(', ') + ')';
-    },
-
-    visit_rgba: function(node) {
-      return 'rgba(' + node.value.join(', ') + ')';
-    },
-
-    visit_directional: function(node) {
+    'visit_directional': function(node) {
       return 'to ' + node.value;
     },
 
-    visit_array: function(elements) {
+    'visit_array': function(elements) {
       var result = '',
           size = elements.length;
 
@@ -55,7 +131,7 @@ GradientParser.stringify = (function() {
       return result;
     },
 
-    visit: function(element) {
+    'visit': function(element) {
       if (!element) {
         return '';
       }
diff --git a/spec/stringify.spec.js b/spec/stringify.spec.js
index 07c0dc6..cda09c4 100644
--- a/spec/stringify.spec.js
+++ b/spec/stringify.spec.js
@@ -3,6 +3,10 @@
 var expect = require('expect.js');
 var gradients = require('build/node');
 
+function pprint(ast) {
+  console.log(JSON.stringify(ast, true, 2));
+}
+
 describe('lib/stringify.js', function () {
   var subject;
 
@@ -46,6 +50,49 @@ describe('lib/stringify.js', function () {
       expect(gradients.stringify(gradients.parse(gradientDef))).to.equal(gradientDef);
     });
 
+    describe('all metric values', function() {
+      [
+        'px',
+        'em',
+        '%'
+      ].forEach(function(metric) {
+        var expectedResult;
+
+        describe('stringify color stop for metric '+ metric, function() {
+          beforeEach(function() {
+            expectedResult = 'linear-gradient(blue 10.3' + metric + ', transparent)';
+            var ast = gradients.parse(expectedResult);
+            subject = gradients.stringify(ast);
+          });
+
+          it('should result as expected', function() {
+            expect(subject).to.equal(expectedResult);
+          });
+
+        });
+      });
+    });
+
+    describe('different radial declarations', function() {
+      [
+        'ellipse farthest-corner',
+        'ellipse cover',
+        'circle cover',
+        'center bottom, ellipse cover',
+        'circle at 87.23px -58.3px'
+      ].forEach(function(declaration) {
+
+        it('should parse ' + declaration + ' declaration', function() {
+          var expectedResult = 'radial-gradient(' + declaration + ', red, blue)';
+          var ast = gradients.parse(expectedResult);
+          subject = gradients.stringify(ast);
+
+          expect(subject).to.equal(expectedResult);
+        });
+
+      });
+    });
+
   });
 
 });