From aec138051b963ffd23f6a3134afbdff5998c576f Mon Sep 17 00:00:00 2001
From: Michael Hellein <michael.hellein@dealer.com>
Date: Mon, 22 Sep 2014 11:13:24 -0400
Subject: [PATCH] Added support for multiple backgrounds.

---
 .../functions/_cross_browser_support.scss     | 39 +++++++++-----
 test/css3/imagesSpec.js                       | 20 +++++++
 test/functionsSpec.js                         | 52 +++++++++++--------
 test/helper/property.js                       |  3 ++
 test/helper/render.js                         | 19 +++++++
 test/helper/ruleset.js                        |  3 ++
 6 files changed, 101 insertions(+), 35 deletions(-)
 create mode 100644 test/css3/imagesSpec.js
 create mode 100644 test/helper/property.js
 create mode 100644 test/helper/render.js
 create mode 100644 test/helper/ruleset.js

diff --git a/lib/compass/functions/_cross_browser_support.scss b/lib/compass/functions/_cross_browser_support.scss
index 7a0ce67..a03e57f 100644
--- a/lib/compass/functions/_cross_browser_support.scss
+++ b/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) {
-  @return prefix('-svg', $property);
+@function -svg($property1, $property2:null, $property3:null, $property4:null, $property5:null, $property6:null, $property7:null, $property8:null, $property9:null) {
+  @return prefix('-svg', $property1, $property2, $property3, $property4, $property5, $property6, $property7, $property8, $property9);
 }
 
-@function -owg($property) {
-  @return prefix('-owg', $property);
+@function -owg($property1, $property2:null, $property3:null, $property4:null, $property5:null, $property6:null, $property7:null, $property8:null, $property9:null) {
+  @return prefix('-owg', $property1, $property2, $property3, $property4, $property5, $property6, $property7, $property8, $property9);
 }
 
-@function -webkit($property) {
-  @return prefix('-webkit', $property);
+@function -webkit($property1, $property2:null, $property3:null, $property4:null, $property5:null, $property6:null, $property7:null, $property8:null, $property9:null) {
+  @return prefix('-webkit', $property1, $property2, $property3, $property4, $property5, $property6, $property7, $property8, $property9);
 }
 
-@function -moz($property) {
-  @return prefix('-moz', $property);
+@function -moz($property1, $property2:null, $property3:null, $property4:null, $property5:null, $property6:null, $property7:null, $property8:null, $property9:null) {
+  @return prefix('-moz', $property1, $property2, $property3, $property4, $property5, $property6, $property7, $property8, $property9);
 }
 
-@function -o($property) {
-  @return prefix('-o', $property);
+@function -o($property1, $property2:null, $property3:null, $property4:null, $property5:null, $property6:null, $property7:null, $property8:null, $property9:null) {
+  @return prefix('-o', $property1, $property2, $property3, $property4, $property5, $property6, $property7, $property8, $property9);
 }
 
-@function -pie($property) {
-  @return prefix('-pie', $property);
+@function -pie($property1, $property2:null, $property3:null, $property4:null, $property5:null, $property6:null, $property7:null, $property8:null, $property9:null) {
+  @return prefix('-pie', $property1, $property2, $property3, $property4, $property5, $property6, $property7, $property8, $property9);
 }
diff --git a/test/css3/imagesSpec.js b/test/css3/imagesSpec.js
new file mode 100644
index 0000000..587042f
--- /dev/null
+++ b/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']);
+  });
+
+});
diff --git a/test/functionsSpec.js b/test/functionsSpec.js
index ee2ffbd..6a872e4 100644
--- a/test/functionsSpec.js
+++ b/test/functionsSpec.js
@@ -1,25 +1,5 @@
-var sass = require('node-sass');
-var chalk = require('chalk');
-
-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+';}';
-}
+var render = require('./helper/render');
+var property = require('./helper/property');
 
 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();
+    });
+  });
+
 });
diff --git a/test/helper/property.js b/test/helper/property.js
new file mode 100644
index 0000000..c7a988d
--- /dev/null
+++ b/test/helper/property.js
@@ -0,0 +1,3 @@
+module.exports = function(prop) {
+  return 'a{b:'+prop+';}';
+}
diff --git a/test/helper/render.js b/test/helper/render.js
new file mode 100644
index 0000000..1f86925
--- /dev/null
+++ b/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);
+    }
+  });
+}
\ No newline at end of file
diff --git a/test/helper/ruleset.js b/test/helper/ruleset.js
new file mode 100644
index 0000000..6b7dfcc
--- /dev/null
+++ b/test/helper/ruleset.js
@@ -0,0 +1,3 @@
+module.exports = function(rules) {
+  return 'a{'+rules+'}';
+}
\ No newline at end of file