Added support for multiple backgrounds.

lib/compass/functions/_cross_browser_support.scss

@@ -3,8 +3,21 @@
 // https://github.com/Compass/compass/blob/stable/lib/compass/sass_extensions/functions/cross_browser_support.rb
 // 
 
+@function prefixed($prefix, $property1, $property2:null, $property3:null, $property4:null, $property5:null, $property6:null, $property7:null, $property8:null, $property9:null) {
+  // This is a hack that assumes everything should be prefixed.
+  @return true;
+}
+
 @function prefix($prefix, $property1, $property2:null, $property3:null, $property4:null, $property5:null, $property6:null, $property7:null, $property8:null, $property9:null) {
-  $properties: $property1, $property2, $property3, $property4, $property5, $property6, $property7, $property8, $property9;
+  // Support for polymorphism.
+  @if length($property1) > 1 and $property2 == null {
+    // Passing a single array of properties.
+    $properties: $property1;
+  } @else {
+    // Passing multiple properties.
+    $properties: $property1, $property2, $property3, $property4, $property5, $property6, $property7, $property8, $property9;
+  }
+
   $props: false;
   @each $item in $properties {
     @if $item == null {}
@@ -21,26 +34,26 @@
   @return $props;
 }
 
-@function -svg($property) {
+@function -svg($property1, $property2:null, $property3:null, $property4:null, $property5:null, $property6:null, $property7:null, $property8:null, $property9:null) {
-  @return prefix('-svg', $property);
+  @return prefix('-svg', $property1, $property2, $property3, $property4, $property5, $property6, $property7, $property8, $property9);
 }
 
-@function -owg($property) {
+@function -owg($property1, $property2:null, $property3:null, $property4:null, $property5:null, $property6:null, $property7:null, $property8:null, $property9:null) {
-  @return prefix('-owg', $property);
+  @return prefix('-owg', $property1, $property2, $property3, $property4, $property5, $property6, $property7, $property8, $property9);
 }
 
-@function -webkit($property) {
+@function -webkit($property1, $property2:null, $property3:null, $property4:null, $property5:null, $property6:null, $property7:null, $property8:null, $property9:null) {
-  @return prefix('-webkit', $property);
+  @return prefix('-webkit', $property1, $property2, $property3, $property4, $property5, $property6, $property7, $property8, $property9);
 }
 
-@function -moz($property) {
+@function -moz($property1, $property2:null, $property3:null, $property4:null, $property5:null, $property6:null, $property7:null, $property8:null, $property9:null) {
-  @return prefix('-moz', $property);
+  @return prefix('-moz', $property1, $property2, $property3, $property4, $property5, $property6, $property7, $property8, $property9);
 }
 
-@function -o($property) {
+@function -o($property1, $property2:null, $property3:null, $property4:null, $property5:null, $property6:null, $property7:null, $property8:null, $property9:null) {
-  @return prefix('-o', $property);
+  @return prefix('-o', $property1, $property2, $property3, $property4, $property5, $property6, $property7, $property8, $property9);
 }
 
-@function -pie($property) {
+@function -pie($property1, $property2:null, $property3:null, $property4:null, $property5:null, $property6:null, $property7:null, $property8:null, $property9:null) {
-  @return prefix('-pie', $property);
+  @return prefix('-pie', $property1, $property2, $property3, $property4, $property5, $property6, $property7, $property8, $property9);
 }

test/css3/imagesSpec.js

@@ -0,0 +1,20 @@
+var render = require('../helper/render');
+var ruleset = require('../helper/ruleset');
+
+describe("CSS3 Images", function () {
+
+  it("should generate a background", function (done) {
+    render(ruleset('@include background(ok);'), function(output, err) {
+      expect(output).toBe(ruleset('background:-owg-ok;background:-webkit-ok;background:-moz-ok;background:-o-ok;background:ok;'));
+      done();
+    }, ['compass/css3/images']);
+  });
+
+  it("should generate multiple backgrounds", function (done) {
+    render(ruleset('$support-for-original-webkit-gradients: false; $experimental-support-for-mozilla: false; $experimental-support-for-opera: false; @include background(a, b, c);'), function(output, err) {
+      expect(output).toBe(ruleset('background:-webkit-a,-webkit-b,-webkit-c;background:a,b,c;'));
+      done();
+    }, ['compass/css3/images']);
+  });
+
+});

test/functionsSpec.js

@@ -1,25 +1,5 @@
-var sass = require('node-sass');
+var render = require('./helper/render');
-var chalk = require('chalk');
+var property = require('./helper/property');
-
-var libDir = __dirname.replace(/test$/, 'lib');
-
-var render = function(data, callback) {
-  sass.render({
-    data: '@import "'+libDir+'/compass/functions";' + data,
-    outputStyle: 'compressed',
-    success: function(output){
-      callback(output);
-    },
-    error: function(err){
-      console.log(chalk.red("Sass error:"), err);
-      callback('', err);
-    }
-  });
-}
-
-var property = function(prop) {
-  return 'a{b:'+prop+';}';
-}
 
 describe("List Functions", function () {
 
@@ -91,4 +71,32 @@ describe("Cross Browser Functions", function () {
     });
   });
 
+  it("should prefix a list of properties as a single argument", function(done) {
+    render('$list: x, y, z;' + property('prefix(-webkit, $list)'), function(output, err) {
+      expect(output).toBe(property('-webkit-x,-webkit-y,-webkit-z'));
+      done();
+    });
+  });
+
+  it("should prefix a property with a browser function", function(done){
+    render(property('-webkit(x)'), function(output, err) {
+      expect(output).toBe(property('-webkit-x'));
+      done();
+    });
+  });
+
+  it("should prefix a list of properties with a browser function", function(done) {
+    render(property('-webkit(x, y, z)'), function(output, err) {
+      expect(output).toBe(property('-webkit-x,-webkit-y,-webkit-z'));
+      done();
+    });
+  });
+
+  it("should prefix a list of properties with a browser function as a single argument", function(done) {
+    render('$list: x, y, z;' + property('-webkit($list)'), function(output, err) {
+      expect(output).toBe(property('-webkit-x,-webkit-y,-webkit-z'));
+      done();
+    });
+  });
+
 });

test/helper/property.js

@@ -0,0 +1,3 @@
+module.exports = function(prop) {
+  return 'a{b:'+prop+';}';
+}

test/helper/render.js

@@ -0,0 +1,19 @@
+var sass = require('node-sass');
+var libDir = __dirname.replace(/test\/helper$/, 'lib');
+var chalk = require('chalk');
+
+module.exports = function(data, callback, imports) {
+  imports = imports ? imports.map(function(i){ return '@import "'+libDir+'/'+i+'";'}) : [];
+
+  sass.render({
+    data: '@import "'+libDir+'/compass/functions";' + imports.join('') + data,
+    outputStyle: 'compressed',
+    success: function(output){
+      callback(output);
+    },
+    error: function(err){
+      console.log(chalk.red("Sass error:"), err);
+      callback('', err);
+    }
+  });
+}

test/helper/ruleset.js

@@ -0,0 +1,3 @@
+module.exports = function(rules) {
+  return 'a{'+rules+'}';
+}