Fix for rgba colors with the new gradient mixins.

lib/compass/sass_extensions/functions/gradient_support.rb

@@ -6,10 +6,10 @@ module Compass::SassExtensions::Functions::GradientSupport
       self.values = values
     end
     def inspect
-      to_s
+      values.map{|v| v.inspect}.join(", ")
     end
     def to_s
-      values.map{|v| v.to_s}.join(", ")
+      inspect
     end
   end
 
@@ -22,13 +22,13 @@ module Compass::SassExtensions::Functions::GradientSupport
       to_s
     end
     def to_s
-      s = "#{color}"
+      s = color.inspect.dup
       if stop
         s << " "
         if stop.unitless?
-          s << stop.times(Sass::Script::Number.new(100, ["%"])).to_s
+          s << stop.times(Sass::Script::Number.new(100, ["%"])).inspect
         else
-          s << stop.to_s
+          s << stop.inspect
         end
       end
       s
@@ -60,7 +60,7 @@ module Compass::SassExtensions::Functions::GradientSupport
         # have to convert absolute units to percentages for use in color stop functions.
         stop = pos.stop
         stop = stop.div(max).times(Sass::Script::Number.new(100,["%"])) if stop.numerator_units == max.numerator_units
-        "color-stop(#{stop}, #{pos.color})"
+        "color-stop(#{stop.inspect}, #{pos.color.inspect})"
       end
       Sass::Script::String.new(color_stops.join(", "))
     end
@@ -129,22 +129,22 @@ module Compass::SassExtensions::Functions::GradientSupport
         when Sass::Script::Color
           ColorStop.new(arg)
         when Sass::Script::String
-          color, stop = arg.value.split(/ +/, 2)
+          color = stop = nil
-          color = Sass::Script::Parser.parse(color, 0, 0)
+          expr = Sass::Script::Parser.parse(arg.value, 0, 0)
-          if stop =~ /^(\d+)?(?:\.(\d+))?(%)?$/
+          case expr
-            integral, decimal, percent = $1, $2, $3
+          when Sass::Script::Color
-            number = "#{integral || 0}.#{decimal || 0}".to_f
+            color = expr
-            number = number / 100 if percent
+          when Sass::Script::Operation
-            if number > 1
+            unless expr.instance_variable_get("@operator") == :concat
-              raise Sass::SyntaxError, "A color stop location must be between 0#{"%" if percent} and 1#{"00%" if percent}. Got: #{stop}"
+              raise Sass::SyntaxError, "Couldn't parse a color stop from: #{arg.value}"
             end
-            stop = Sass::Script::Number.new(number)
+            color = expr.instance_variable_get("@operand1")
-          elsif !stop.nil?
+            stop = expr.instance_variable_get("@operand2")
-            number = Sass::Script::Parser.parse(stop, 0, 0)
+          when Sass::Script::Funcall
-            unless number.is_a?(Sass::Script::Number)
+            color = expr
-              raise Sass::SyntaxError, "A color stop location must be a number. Got: #{stop}"
+          else
-            end
+            puts expr.class.name
-            stop = number
+            raise Sass::SyntaxError, "Couldn't parse a color stop from:: #{arg.value}"
           end
           ColorStop.new(color, stop)
         else

test/fixtures/stylesheets/compass/css/gradients.css

@@ -23,8 +23,8 @@
   background-image: -moz-linear-gradient(top, #dddddd 0%, #cccccc 20%, #aaaaaa 100%); }
 
 .linear-7 {
-  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #dddddd), color-stop(20%, #cccccc), color-stop(50.1%, #eeeeee), color-stop(100%, #aaaaaa));
+  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #dddddd), color-stop(20%, #cccccc), color-stop(60%, #eeeeee), color-stop(100%, #aaaaaa));
-  background-image: -moz-linear-gradient(top, #dddddd 0%, #cccccc 20%, #eeeeee 50.1%, #aaaaaa 100%); }
+  background-image: -moz-linear-gradient(top, #dddddd 0%, #cccccc 20%, #eeeeee 60%, #aaaaaa 100%); }
 
 .linear-8 {
   background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(80%, #dddddd), color-stop(100%, #aaaaaa));
@@ -69,3 +69,7 @@
 .radial-7 {
   background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 50, color-stop(20%, #dddddd), color-stop(100%, #aaaaaa));
   background-image: -moz-radial-gradient(center center, circle, #dddddd 20%, #aaaaaa 50px); }
+
+.alpha-linear {
+  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(80%, rgba(255, 255, 255, 0)), color-stop(90%, rgba(255, 127, 127, 0.5)), color-stop(100%, rgba(255, 255, 255, 1)));
+  background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 40%, rgba(255, 127, 127, 0.5) 45%, rgba(255, 255, 255, 1) 50%); }

test/fixtures/stylesheets/compass/sass/gradients.sass

@@ -46,3 +46,6 @@
   // A centered elliptical gradient with color stops
   // The color stops must be relative units
   +radial-gradient(color_stops(#ddd 20%, #aaa 50px))
+
+.alpha-linear
+  +linear-gradient(color_stops(rgba(255, 255, 255, 0) 40%, rgba(255, 127, 127, 0.5), rgba(255, 255, 255, 1) 50%))