Change the legacy gradient mixins to use the new background-image mixin.

frameworks/compass/stylesheets/compass/css3/_gradient.scss

@@ -1,4 +1,5 @@
 @import "compass/utilities/general/hacks";
+@import "images";
 
 // The linear gradient mixin works best across browsers if you use percentage-based color stops.
 //
@@ -33,23 +34,7 @@
 // - Opera
 
 @mixin linear-gradient($color-stops, $start: top, $image: false) {
-  // Firefox's gradient api is nice.
-  // Webkit's gradient api sucks -- hence these backflips:
-  $background: unquote("");
-  @if $image { $background : $image + unquote(", "); }
-  $start: unquote($start);
-  $end: opposite-position($start);
-
-  @if $experimental-support-for-svg {
-    background-image: #{$background}linear-svg-gradient($color-stops, $start);
-  }
-  @if $experimental-support-for-webkit {
-    background-image: #{$background}-webkit-gradient(linear, grad-point($start), grad-point($end), grad-color-stops($color-stops));
-  }
-  @if $experimental-support-for-mozilla {
-    background-image: #{$background}-moz-linear-gradient($start, $color-stops);
-  }
-  background-image: #{$background}#{linear}-gradient($start, $color-stops);
+  @include background-image($image, linear-gradient($start, $color-stops));
 }
 
 // Emit a IE-Specific filters that renders a simple linear gradient.
@@ -89,19 +74,5 @@
 // - Opera
 
 @mixin radial-gradient($color-stops, $center-position: center center, $image: false) {
-  $center-position: unquote($center-position);
-  $end-pos: grad-end-position($color-stops, true);
-  $background: unquote("");
-  @if $image { $background: $image + unquote(", "); }
-
-  @if $experimental-support-for-svg {
-    background-image: #{$background}radial-svg-gradient($color-stops, $center-position);
-  }
-  @if $experimental-support-for-webkit {
-    background-image: #{$background}-webkit-gradient(radial, grad-point($center-position), 0, grad-point($center-position), $end-pos, grad-color-stops($color-stops));
-  }
-  @if $experimental-support-for-mozilla {
-    background-image: #{$background}-moz-radial-gradient($center-position, circle, $color-stops);
-  }
-  background-image: #{$background}#{radial}-gradient($center-position, circle, $color-stops);
+  @include background-image($image, radial-gradient($center-position, $color-stops));
 }

frameworks/compass/stylesheets/compass/css3/_images.scss

@@ -15,9 +15,9 @@
 ) {
   $images: compact($image-1, $image-2, $image-3, $image-4, $image-5, $image-6, $image-7, $image-8, $image-9, $image-10);
 
-  @if $experimental-support-for-mozilla and prefixed(-moz,    $images) { background-image:    -moz($images); }
-  @if $experimental-support-for-webkit  and prefixed(-webkit, $images) { background-image: -webkit($images); }
   @if $experimental-support-for-svg     and prefixed(-svg,    $images) { background-image:    -svg($images); }
+  @if $experimental-support-for-webkit  and prefixed(-webkit, $images) { background-image: -webkit($images); }
+  @if $experimental-support-for-mozilla and prefixed(-moz,    $images) { background-image:    -moz($images); }
                                                                          background-image:         $images;
 }
 

lib/compass/sass_extensions/functions/gradient_support.rb

@@ -123,13 +123,29 @@ def to_svg
   module Functions
 
     def radial_gradient(position_or_angle, shape_or_size, *color_stops)
+      # Have to deal with variable length/meaning arguments.
       if color_stop?(shape_or_size)
         color_stops.unshift(shape_or_size)
         shape_or_size = nil
+      elsif list_of_color_stops?(shape_or_size)
+        # Support legacy use of the color-stops() function
+        color_stops = shape_or_size.values + color_stops
+        shape_or_size = nil
       end
+      shape_or_size = nil if shape_or_size && !shape_or_size.to_bool # nil out explictly passed falses
+      # ditto for position_or_angle
       if color_stop?(position_or_angle)
         color_stops.unshift(position_or_angle)
         position_or_angle = nil
+      elsif list_of_color_stops?(position_or_angle)
+        color_stops = position_or_angle.values + color_stops
+        position_or_angle = nil
+      end
+      position_or_angle = nil if position_or_angle && !position_or_angle.to_bool
+
+      # Support legacy use of the color-stops() function
+      if color_stops.size == 1 && list_of_color_stops?(color_stops.first)
+        color_stops = color_stops.first.values
       end
       RadialGradient.new(position_or_angle, shape_or_size, send(:color_stops, *color_stops))
     end
@@ -138,6 +154,15 @@ def linear_gradient(position_or_angle, *color_stops)
       if color_stop?(position_or_angle)
         color_stops.unshift(position_or_angle)
         position_or_angle = nil
+      elsif list_of_color_stops?(position_or_angle)
+        color_stops = position_or_angle.values + color_stops
+        position_or_angle = nil
+      end
+      position_or_angle = nil if position_or_angle && !position_or_angle.to_bool
+
+      # Support legacy use of the color-stops() function
+      if color_stops.size == 1 && list_of_color_stops?(color_stops.first)
+        color_stops = color_stops.first.values
       end
       LinearGradient.new(position_or_angle, send(:color_stops, *color_stops))
     end
@@ -233,14 +258,16 @@ def grad_point(position)
     def color_stops(*args)
       List.new(*args.map do |arg|
         case arg
+        when ColorStop
+          arg
         when Sass::Script::Color
           ColorStop.new(arg)
         when Sass::Script::String
           # We get a string as the result of concatenation
           # So we have to reparse the expression
           parse_color_stop(arg)
         else
-          raise Sass::SyntaxError, "Not a valid color stop: #{arg}"
+          raise Sass::SyntaxError, "Not a valid color stop: #{arg.class.name}: #{arg}"
         end
       end)
     end
@@ -423,6 +450,10 @@ def color_stop?(arg)
       nil
     end
 
+    def list_of_color_stops?(arg)
+      arg.is_a?(List) && arg.values.first.is_a?(ColorStop)
+    end
+
     def linear_svg(color_stops, x1, y1, x2, y2)
       gradient = %Q{<linearGradient id="grad" x1="#{x1}" y1="#{y1}" x2="#{x2}" y2="#{y2}">#{color_stops_svg(color_stops)}</linearGradient>}
       svg(gradient)