From cf60a909314bccf5fffa1e677fadb98a698e431b Mon Sep 17 00:00:00 2001
From: Richard Herrera <rich@doctyper.com>
Date: Sat, 18 Feb 2012 11:36:49 -0800
Subject: [PATCH 01/11] Adding support for prefixed transition properties, e.g.
 transform & transform-origin. Can easily be extended for further properties.

---
 .../stylesheets/compass/css3/_transition.scss | 84 ++++++++++++++++++-
 1 file changed, 80 insertions(+), 4 deletions(-)

diff --git a/frameworks/compass/stylesheets/compass/css3/_transition.scss b/frameworks/compass/stylesheets/compass/css3/_transition.scss
index d2ee7bb2..ee2cec54 100644
--- a/frameworks/compass/stylesheets/compass/css3/_transition.scss
+++ b/frameworks/compass/stylesheets/compass/css3/_transition.scss
@@ -23,15 +23,15 @@ $default-transition-function: false !default;
 
 $default-transition-delay: false !default;
 
+$transitionable-prefixed-properties: transform, transform-origin !default;
+
 // One or more properties to transition
 //
 // * for multiple, use a comma-delimited list
 // * also accepts "all" or "none"
 
 @mixin transition-property($properties: $default-transition-property) {
-  @include experimental(transition-property, unquote($properties),
-    -moz, -webkit, -o, -ms, not -khtml, official
-  );
+  @include prefix-friendly-transition(unquote($properties));
 }
 
 // One or more durations in seconds
@@ -126,8 +126,84 @@ $default-transition-delay: false !default;
   @if $transition-1 == default {
     $transition-1 : -compass-space-list(compact($default-transition-property, $default-transition-duration, $default-transition-function, $default-transition-delay));
   }
+
   $transition : compact($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10);
+  @include prefix-friendly-transition($transition);
+}
+
+@function array-push($array, $object, $comma: false) {
+  @if $comma {
+    @if $array {
+      $array: $array, $object;
+    } @else {
+      $array: $object;
+    }
+  } @else {
+    @if $array {
+      $array: $array $object;
+    } @else {
+      $array: $object;
+    }
+  }
+
+  @return $array;
+}
+
+@function string-join($existing, $addition) {
+  @if $existing {
+    @if $addition {
+      $existing: $existing $addition;
+    }
+  } @else {
+    $existing: $addition;
+  }
+
+  @return $existing;
+}
+
+@mixin prefix-friendly-transition($transition) {
+  $raw-transition: -compass-space-list($transition);
+
+  $webkit-transition: false;
+  $moz-transition: false;
+  $ms-transition: false;
+  $o-transition: false;
+
+  @each $single-transition in $raw-transition {
+    $property: nth($single-transition, 1);
+    $match: false;
+
+    @each $prefixed-property in $transitionable-prefixed-properties {
+      @if $property == $prefixed-property {
+        $match: true;
+      }
+    }
+
+    @if $match {
+      $single-transition-suffix: false;
+
+      @for $i from 2 through length($single-transition) {
+        $single-transition-suffix: array-push($single-transition-suffix, nth($single-transition, $i));
+      }
+
+      $webkit-transition: array-push($webkit-transition, string-join(-webkit-#{$property}, $single-transition-suffix), true);
+      $moz-transition: array-push($moz-transition, string-join(-moz-#{$property}, $single-transition-suffix), true);
+      $ms-transition: array-push($ms-transition, string-join(-ms-#{$property}, $single-transition-suffix), true);
+      $o-transition: array-push($o-transition, string-join(-o-#{$property}, $single-transition-suffix), true);
+    } @else {
+      $webkit-transition: array-push($webkit-transition, $single-transition, true);
+      $moz-transition: array-push($moz-transition, $single-transition, true);
+      $ms-transition: array-push($ms-transition, $single-transition, true);
+      $o-transition: array-push($o-transition, $single-transition, true);
+    }
+  }
+
+  -webkit-transition: $webkit-transition;
+  -moz-transition: $moz-transition;
+  -ms-transition: $ms-transition;
+  -o-transition: $o-transition;
+
   @include experimental(transition, $transition,
-    -moz, -webkit, -o, -ms, not -khtml, official
+    not -moz, not -webkit, not -o, not -ms, not -khtml, official
   );
 }

From 6a3d024cc1bcef5d13fe39e4c63a62400b1ab936 Mon Sep 17 00:00:00 2001
From: Richard Herrera <rich@doctyper.com>
Date: Sun, 26 Feb 2012 00:55:52 -0800
Subject: [PATCH 02/11] Updated with the following:

- Added stylesheet tests for prefixed transition properties.
- transition-property mixin now passes all tests.
- single-transition mixin now passes all tests.
- Updated rewrite to respect user specified browser support.
---
 .../stylesheets/compass/css3/_transition.scss | 95 ++++++++++++++-----
 .../stylesheets/compass/css/transition.css    | 24 ++++-
 .../stylesheets/compass/sass/transition.scss  |  5 +-
 3 files changed, 99 insertions(+), 25 deletions(-)

diff --git a/frameworks/compass/stylesheets/compass/css3/_transition.scss b/frameworks/compass/stylesheets/compass/css3/_transition.scss
index ee2cec54..c092e43c 100644
--- a/frameworks/compass/stylesheets/compass/css3/_transition.scss
+++ b/frameworks/compass/stylesheets/compass/css3/_transition.scss
@@ -31,7 +31,29 @@ $transitionable-prefixed-properties: transform, transform-origin !default;
 // * also accepts "all" or "none"
 
 @mixin transition-property($properties: $default-transition-property) {
-  @include prefix-friendly-transition(unquote($properties));
+  @if type-of($properties) == string { $properties: unquote($properties); }
+
+  $match: false;
+
+  @each $prefixed-property in $transitionable-prefixed-properties {
+    @if $properties == $prefixed-property {
+      $match: true;
+    }
+  }
+
+  @if $match {
+    @if $experimental-support-for-webkit    { -webkit-transition-property: -webkit-#{$properties}; }
+    @if $experimental-support-for-mozilla   { -moz-transition-property: -moz-#{$properties}; }
+    @if $experimental-support-for-microsoft { -ms-transition-property: -ms-#{$properties}; }
+    @if $experimental-support-for-opera     { -o-transition-property: -o-#{$properties}; }
+    @include experimental(transition-property, $properties,
+      not -moz, not -webkit, not -o, not -ms, not -khtml, official
+    );
+  } @else {
+    @include experimental(transition-property, $properties,
+      -moz, -webkit, -o, -ms, not -khtml, official
+    );
+  }
 }
 
 // One or more durations in seconds
@@ -78,29 +100,56 @@ $transitionable-prefixed-properties: transform, transform-origin !default;
   $function: $default-transition-function,
   $delay: $default-transition-delay
 ) {
+  $match: false;
+
+  @each $prefixed-property in $transitionable-prefixed-properties {
+    @if $property == $prefixed-property {
+      $match: true;
+    }
+  }
+
   @if $property and $duration and $function {
     // Shorthand (see https://github.com/chriseppstein/compass/issues/585)
     @if $delay {
-      -webkit-transition: $property $duration $function;
-      -webkit-transition-delay: $delay;
-      @include experimental(transition, $property $duration $function $delay,
-        -moz,
-        not -webkit,
-        -o,
-        -ms,
-        not -khtml,
-        official
-      );
+      @if $match {
+        @if $experimental-support-for-webkit    { -webkit-transition: -webkit-#{$property} $duration $function; -webkit-transition-delay: $delay; }
+        @if $experimental-support-for-mozilla   { -moz-transition: -moz-#{$property} $duration $function $delay; }
+        @if $experimental-support-for-microsoft { -ms-transition: -ms-#{$property} $duration $function $delay; }
+        @if $experimental-support-for-opera     { -o-transition: -o-#{$property} $duration $function $delay; }
+        @include experimental(transition, $property $duration $function $delay,
+          not -moz, not -webkit, not -o, not -ms, not -khtml, official
+        );
+      } @else {
+        @if $experimental-support-for-webkit    { -webkit-transition: $property $duration $function; -webkit-transition-delay: $delay; }
+        @include experimental(transition, $property $duration $function $delay,
+          -moz,
+          not -webkit,
+          -o,
+          -ms,
+          not -khtml,
+          official
+        );
+      }
     }
     @else {
-      @include experimental(transition, $property $duration $function,
-        -moz,
-        -webkit,
-        -o,
-        -ms,
-        not -khtml,
-        official
-      );
+      @if $match {
+        @if $experimental-support-for-webkit    { -webkit-transition: -webkit-#{$property} $duration $function; }
+        @if $experimental-support-for-mozilla   { -moz-transition: -moz-#{$property} $duration $function; }
+        @if $experimental-support-for-microsoft { -ms-transition: -ms-#{$property} $duration $function; }
+        @if $experimental-support-for-opera     { -o-transition: -o-#{$property} $duration $function; }
+        @include experimental(transition, $property $duration $function,
+          not -moz, not -webkit, not -o, not -ms, not -khtml, official
+        );
+      } @else {
+        @include experimental(transition, $property $duration $function,
+          -moz,
+          -webkit,
+          -o,
+          -ms,
+          not -khtml,
+          official
+        );
+      }
     }
   }
   @else {
@@ -198,10 +247,10 @@ $transitionable-prefixed-properties: transform, transform-origin !default;
     }
   }
 
-  -webkit-transition: $webkit-transition;
-  -moz-transition: $moz-transition;
-  -ms-transition: $ms-transition;
-  -o-transition: $o-transition;
+  @if $experimental-support-for-webkit    { -webkit-transition: $webkit-transition; }
+  @if $experimental-support-for-mozilla   { -moz-transition: $moz-transition; }
+  @if $experimental-support-for-microsoft { -ms-transition: $ms-transition; }
+  @if $experimental-support-for-opera     { -o-transition: $o-transition; }
 
   @include experimental(transition, $transition,
     not -moz, not -webkit, not -o, not -ms, not -khtml, official
diff --git a/test/fixtures/stylesheets/compass/css/transition.css b/test/fixtures/stylesheets/compass/css/transition.css
index 1d34c025..c7c939b1 100644
--- a/test/fixtures/stylesheets/compass/css/transition.css
+++ b/test/fixtures/stylesheets/compass/css/transition.css
@@ -25,4 +25,26 @@
   -moz-transition-duration: 0.2s, 0.5s, 0.2s;
   -ms-transition-duration: 0.2s, 0.5s, 0.2s;
   -o-transition-duration: 0.2s, 0.5s, 0.2s;
-  transition-duration: 0.2s, 0.5s, 0.2s; }
\ No newline at end of file
+  transition-duration: 0.2s, 0.5s, 0.2s; }
+
+.single-transform-transition-without-delay {
+  -webkit-transition: -webkit-transform 0.6s ease-out;
+  -moz-transition: -moz-transform 0.6s ease-out;
+  -ms-transition: -ms-transform 0.6s ease-out;
+  -o-transition: -o-transform 0.6s ease-out;
+  transition: transform 0.6s ease-out; }
+
+.single-transform-transition-with-delay {
+  -webkit-transition: -webkit-transform 0.6s ease-out;
+  -webkit-transition-delay: 0.2s;
+  -moz-transition: -moz-transform 0.6s ease-out 0.2s;
+  -ms-transition: -ms-transform 0.6s ease-out 0.2s;
+  -o-transition: -o-transform 0.6s ease-out 0.2s;
+  transition: transform 0.6s ease-out 0.2s; }
+
+.transition-property {
+  -webkit-transition-property: -webkit-transform;
+  -moz-transition-property: -moz-transform;
+  -ms-transition-property: -ms-transform;
+  -o-transition-property: -o-transform;
+  transition-property: transform; }
diff --git a/test/fixtures/stylesheets/compass/sass/transition.scss b/test/fixtures/stylesheets/compass/sass/transition.scss
index 9fa9edde..706ef113 100644
--- a/test/fixtures/stylesheets/compass/sass/transition.scss
+++ b/test/fixtures/stylesheets/compass/sass/transition.scss
@@ -3,4 +3,7 @@
 .single-transition-without-delay  { @include single-transition(all, 0.6s, ease-out); }
 .single-transition-with-delay     { @include single-transition(all, 0.6s, ease-out, 0.2s); }
 .transition-duration-string { @include transition-duration("0.2s, 0.5s, 0.2s"); }
-.transition-duration-list { @include transition-duration((0.2s, 0.5s, 0.2s)); }
\ No newline at end of file
+.transition-duration-list { @include transition-duration((0.2s, 0.5s, 0.2s)); }
+.single-transform-transition-without-delay  { @include single-transition(transform, 0.6s, ease-out); }
+.single-transform-transition-with-delay     { @include single-transition(transform, 0.6s, ease-out, 0.2s); }
+.transition-property { @include transition-property(transform); }

From 388e3a611fd588b56c3f6e31e922e170c5b9c906 Mon Sep 17 00:00:00 2001
From: Richard Herrera <rich@doctyper.com>
Date: Sun, 26 Feb 2012 11:24:49 -0800
Subject: [PATCH 03/11] Using transition property in lieu of @experimental
 mixin.

---
 .../stylesheets/compass/css3/_transition.scss   | 17 ++++-------------
 1 file changed, 4 insertions(+), 13 deletions(-)

diff --git a/frameworks/compass/stylesheets/compass/css3/_transition.scss b/frameworks/compass/stylesheets/compass/css3/_transition.scss
index c092e43c..6a865049 100644
--- a/frameworks/compass/stylesheets/compass/css3/_transition.scss
+++ b/frameworks/compass/stylesheets/compass/css3/_transition.scss
@@ -46,9 +46,7 @@ $transitionable-prefixed-properties: transform, transform-origin !default;
     @if $experimental-support-for-mozilla   { -moz-transition-property: -moz-#{$properties}; }
     @if $experimental-support-for-microsoft { -ms-transition-property: -ms-#{$properties}; }
     @if $experimental-support-for-opera     { -o-transition-property: -o-#{$properties}; }
-    @include experimental(transition-property, $properties,
-      not -moz, not -webkit, not -o, not -ms, not -khtml, official
-    );
+    transition-property: $properties;
   } @else {
     @include experimental(transition-property, $properties,
       -moz, -webkit, -o, -ms, not -khtml, official
@@ -116,9 +114,7 @@ $transitionable-prefixed-properties: transform, transform-origin !default;
         @if $experimental-support-for-mozilla   { -moz-transition: -moz-#{$property} $duration $function $delay; }
         @if $experimental-support-for-microsoft { -ms-transition: -ms-#{$property} $duration $function $delay; }
         @if $experimental-support-for-opera     { -o-transition: -o-#{$property} $duration $function $delay; }
-        @include experimental(transition, $property $duration $function $delay,
-          not -moz, not -webkit, not -o, not -ms, not -khtml, official
-        );
+        transition: $property $duration $function $delay;
       } @else {
         @if $experimental-support-for-webkit    { -webkit-transition: $property $duration $function; -webkit-transition-delay: $delay; }
         @include experimental(transition, $property $duration $function $delay,
@@ -137,9 +133,7 @@ $transitionable-prefixed-properties: transform, transform-origin !default;
         @if $experimental-support-for-mozilla   { -moz-transition: -moz-#{$property} $duration $function; }
         @if $experimental-support-for-microsoft { -ms-transition: -ms-#{$property} $duration $function; }
         @if $experimental-support-for-opera     { -o-transition: -o-#{$property} $duration $function; }
-        @include experimental(transition, $property $duration $function,
-          not -moz, not -webkit, not -o, not -ms, not -khtml, official
-        );
+        transition: $property $duration $function;
       } @else {
         @include experimental(transition, $property $duration $function,
           -moz,
@@ -251,8 +245,5 @@ $transitionable-prefixed-properties: transform, transform-origin !default;
   @if $experimental-support-for-mozilla   { -moz-transition: $moz-transition; }
   @if $experimental-support-for-microsoft { -ms-transition: $ms-transition; }
   @if $experimental-support-for-opera     { -o-transition: $o-transition; }
-
-  @include experimental(transition, $transition,
-    not -moz, not -webkit, not -o, not -ms, not -khtml, official
-  );
+  transition: $transition;
 }

From 9a40ba9ec3f834871886f253c375af0c03ed4d86 Mon Sep 17 00:00:00 2001
From: Richard Herrera <rich@doctyper.com>
Date: Sun, 26 Feb 2012 11:39:30 -0800
Subject: [PATCH 04/11] transition-property mixin now includes support for
 multiple prefixed values.

---
 .../stylesheets/compass/css3/_transition.scss | 44 ++++++++++++-------
 1 file changed, 29 insertions(+), 15 deletions(-)

diff --git a/frameworks/compass/stylesheets/compass/css3/_transition.scss b/frameworks/compass/stylesheets/compass/css3/_transition.scss
index 6a865049..14b3fbe2 100644
--- a/frameworks/compass/stylesheets/compass/css3/_transition.scss
+++ b/frameworks/compass/stylesheets/compass/css3/_transition.scss
@@ -32,26 +32,40 @@ $transitionable-prefixed-properties: transform, transform-origin !default;
 
 @mixin transition-property($properties: $default-transition-property) {
   @if type-of($properties) == string { $properties: unquote($properties); }
+  $raw-properties: -compass-space-list($properties);
 
-  $match: false;
+  $webkit-transition-property: false;
+  $moz-transition-property: false;
+  $ms-transition-property: false;
+  $o-transition-property: false;
 
-  @each $prefixed-property in $transitionable-prefixed-properties {
-    @if $properties == $prefixed-property {
-      $match: true;
+  @each $property in $raw-properties {
+    $match: false;
+
+    @each $prefixed-property in $transitionable-prefixed-properties {
+      @if $property == $prefixed-property {
+        $match: true;
+      }
+    }
+
+    @if $match {
+      $webkit-transition-property: array-push($webkit-transition-property, -webkit-#{$property}, true);
+      $moz-transition-property: array-push($moz-transition-property, -moz-#{$property}, true);
+      $ms-transition-property: array-push($ms-transition-property, -ms-#{$property}, true);
+      $o-transition-property: array-push($o-transition-property, -o-#{$property}, true);
+    } @else {
+      $webkit-transition-property: array-push($webkit-transition-property, $property, true);
+      $moz-transition-property: array-push($moz-transition-property, $property, true);
+      $ms-transition-property: array-push($ms-transition-property, $property, true);
+      $o-transition-property: array-push($o-transition-property, $property, true);
     }
   }
 
-  @if $match {
-    @if $experimental-support-for-webkit    { -webkit-transition-property: -webkit-#{$properties}; }
-    @if $experimental-support-for-mozilla   { -moz-transition-property: -moz-#{$properties}; }
-    @if $experimental-support-for-microsoft { -ms-transition-property: -ms-#{$properties}; }
-    @if $experimental-support-for-opera     { -o-transition-property: -o-#{$properties}; }
-    transition-property: $properties;
-  } @else {
-    @include experimental(transition-property, $properties,
-      -moz, -webkit, -o, -ms, not -khtml, official
-    );
-  }
+  @if $experimental-support-for-webkit    { -webkit-transition-property: $webkit-transition-property; }
+  @if $experimental-support-for-mozilla   { -moz-transition-property: $moz-transition-property; }
+  @if $experimental-support-for-microsoft { -ms-transition-property: $ms-transition-property; }
+  @if $experimental-support-for-opera     { -o-transition-property: $o-transition-property; }
+  transition-property: $properties;
 }
 
 // One or more durations in seconds

From 3b586059cdb13904e03f0841aca9ef3c4cc28e80 Mon Sep 17 00:00:00 2001
From: Richard Herrera <rich@doctyper.com>
Date: Sun, 26 Feb 2012 11:39:58 -0800
Subject: [PATCH 05/11] Test for multiple transition properties.

---
 test/fixtures/stylesheets/compass/css/transition.css   | 7 +++++++
 test/fixtures/stylesheets/compass/sass/transition.scss | 1 +
 2 files changed, 8 insertions(+)

diff --git a/test/fixtures/stylesheets/compass/css/transition.css b/test/fixtures/stylesheets/compass/css/transition.css
index c7c939b1..dbdb5fe8 100644
--- a/test/fixtures/stylesheets/compass/css/transition.css
+++ b/test/fixtures/stylesheets/compass/css/transition.css
@@ -48,3 +48,10 @@
   -ms-transition-property: -ms-transform;
   -o-transition-property: -o-transform;
   transition-property: transform; }
+
+.multiple-transition-properties {
+  -webkit-transition-property: opacity, -webkit-transform, left;
+  -moz-transition-property: opacity, -moz-transform, left;
+  -ms-transition-property: opacity, -ms-transform, left;
+  -o-transition-property: opacity, -o-transform, left;
+  transition-property: opacity, transform, left; }
diff --git a/test/fixtures/stylesheets/compass/sass/transition.scss b/test/fixtures/stylesheets/compass/sass/transition.scss
index 706ef113..523c1c76 100644
--- a/test/fixtures/stylesheets/compass/sass/transition.scss
+++ b/test/fixtures/stylesheets/compass/sass/transition.scss
@@ -7,3 +7,4 @@
 .single-transform-transition-without-delay  { @include single-transition(transform, 0.6s, ease-out); }
 .single-transform-transition-with-delay     { @include single-transition(transform, 0.6s, ease-out, 0.2s); }
 .transition-property { @include transition-property(transform); }
+.multiple-transition-properties { @include transition-property((opacity, transform, left)); }

From 4d01676a76da60d2fbd073e26dcd90f80c573cfe Mon Sep 17 00:00:00 2001
From: Richard Herrera <rich@doctyper.com>
Date: Sun, 26 Feb 2012 11:43:00 -0800
Subject: [PATCH 06/11] Redundant use of a built-in helper function. Removing
 string-join() for compact(join()).

---
 .../stylesheets/compass/css3/_transition.scss | 20 ++++---------------
 1 file changed, 4 insertions(+), 16 deletions(-)

diff --git a/frameworks/compass/stylesheets/compass/css3/_transition.scss b/frameworks/compass/stylesheets/compass/css3/_transition.scss
index 14b3fbe2..7dc21e56 100644
--- a/frameworks/compass/stylesheets/compass/css3/_transition.scss
+++ b/frameworks/compass/stylesheets/compass/css3/_transition.scss
@@ -206,18 +206,6 @@ $transitionable-prefixed-properties: transform, transform-origin !default;
   @return $array;
 }
 
-@function string-join($existing, $addition) {
-  @if $existing {
-    @if $addition {
-      $existing: $existing $addition;
-    }
-  } @else {
-    $existing: $addition;
-  }
-
-  @return $existing;
-}
-
 @mixin prefix-friendly-transition($transition) {
   $raw-transition: -compass-space-list($transition);
 
@@ -243,10 +231,10 @@ $transitionable-prefixed-properties: transform, transform-origin !default;
         $single-transition-suffix: array-push($single-transition-suffix, nth($single-transition, $i));
       }
 
-      $webkit-transition: array-push($webkit-transition, string-join(-webkit-#{$property}, $single-transition-suffix), true);
-      $moz-transition: array-push($moz-transition, string-join(-moz-#{$property}, $single-transition-suffix), true);
-      $ms-transition: array-push($ms-transition, string-join(-ms-#{$property}, $single-transition-suffix), true);
-      $o-transition: array-push($o-transition, string-join(-o-#{$property}, $single-transition-suffix), true);
+      $webkit-transition: array-push($webkit-transition, compact(join(-webkit-#{$property}, $single-transition-suffix)), true);
+      $moz-transition: array-push($moz-transition, compact(join(-moz-#{$property}, $single-transition-suffix)), true);
+      $ms-transition: array-push($ms-transition, compact(join(-ms-#{$property}, $single-transition-suffix)), true);
+      $o-transition: array-push($o-transition, compact(join(-o-#{$property}, $single-transition-suffix)), true);
     } @else {
       $webkit-transition: array-push($webkit-transition, $single-transition, true);
       $moz-transition: array-push($moz-transition, $single-transition, true);

From 177fda7460d470e13f91987db4628b855855a8c8 Mon Sep 17 00:00:00 2001
From: Richard Herrera <rich@doctyper.com>
Date: Sun, 26 Feb 2012 11:53:10 -0800
Subject: [PATCH 07/11] Per @chriseppstein: we don't need to use
 `-compass-space-list` anymore. Sass provides `()` to construct an empty
 space-delimited list.

---
 .../compass/stylesheets/compass/css3/_transition.scss       | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frameworks/compass/stylesheets/compass/css3/_transition.scss b/frameworks/compass/stylesheets/compass/css3/_transition.scss
index 7dc21e56..d1a56213 100644
--- a/frameworks/compass/stylesheets/compass/css3/_transition.scss
+++ b/frameworks/compass/stylesheets/compass/css3/_transition.scss
@@ -32,7 +32,7 @@ $transitionable-prefixed-properties: transform, transform-origin !default;
 
 @mixin transition-property($properties: $default-transition-property) {
   @if type-of($properties) == string { $properties: unquote($properties); }
-  $raw-properties: -compass-space-list($properties);
+  $raw-properties: ($properties);
 
   $webkit-transition-property: false;
   $moz-transition-property: false;
@@ -181,7 +181,7 @@ $transitionable-prefixed-properties: transform, transform-origin !default;
   $transition-10: false
 ) {
   @if $transition-1 == default {
-    $transition-1 : -compass-space-list(compact($default-transition-property, $default-transition-duration, $default-transition-function, $default-transition-delay));
+    $transition-1 : (compact($default-transition-property, $default-transition-duration, $default-transition-function, $default-transition-delay));
   }
 
   $transition : compact($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10);
@@ -207,7 +207,7 @@ $transitionable-prefixed-properties: transform, transform-origin !default;
 }
 
 @mixin prefix-friendly-transition($transition) {
-  $raw-transition: -compass-space-list($transition);
+  $raw-transition: ($transition);
 
   $webkit-transition: false;
   $moz-transition: false;

From 14a553f0f41efd36e47f89222dae9597d0943882 Mon Sep 17 00:00:00 2001
From: Richard Herrera <rich@doctyper.com>
Date: Sun, 26 Feb 2012 12:27:49 -0800
Subject: [PATCH 08/11] Redundant use of a built-in helper function. Removing
 array-push() for append().

---
 .../stylesheets/compass/css3/_transition.scss | 70 +++++++------------
 1 file changed, 26 insertions(+), 44 deletions(-)

diff --git a/frameworks/compass/stylesheets/compass/css3/_transition.scss b/frameworks/compass/stylesheets/compass/css3/_transition.scss
index d1a56213..48ed2f82 100644
--- a/frameworks/compass/stylesheets/compass/css3/_transition.scss
+++ b/frameworks/compass/stylesheets/compass/css3/_transition.scss
@@ -34,10 +34,10 @@ $transitionable-prefixed-properties: transform, transform-origin !default;
   @if type-of($properties) == string { $properties: unquote($properties); }
   $raw-properties: ($properties);
 
-  $webkit-transition-property: false;
-  $moz-transition-property: false;
-  $ms-transition-property: false;
-  $o-transition-property: false;
+  $webkit-transition-property: compact(false);
+  $moz-transition-property: compact(false);
+  $ms-transition-property: compact(false);
+  $o-transition-property: compact(false);
 
   @each $property in $raw-properties {
     $match: false;
@@ -49,15 +49,15 @@ $transitionable-prefixed-properties: transform, transform-origin !default;
     }
 
     @if $match {
-      $webkit-transition-property: array-push($webkit-transition-property, -webkit-#{$property}, true);
-      $moz-transition-property: array-push($moz-transition-property, -moz-#{$property}, true);
-      $ms-transition-property: array-push($ms-transition-property, -ms-#{$property}, true);
-      $o-transition-property: array-push($o-transition-property, -o-#{$property}, true);
+      $webkit-transition-property: append($webkit-transition-property, -webkit-#{$property}, comma);
+      $moz-transition-property: append($moz-transition-property, -moz-#{$property}, comma);
+      $ms-transition-property: append($ms-transition-property, -ms-#{$property}, comma);
+      $o-transition-property: append($o-transition-property, -o-#{$property}, comma);
     } @else {
-      $webkit-transition-property: array-push($webkit-transition-property, $property, true);
-      $moz-transition-property: array-push($moz-transition-property, $property, true);
-      $ms-transition-property: array-push($ms-transition-property, $property, true);
-      $o-transition-property: array-push($o-transition-property, $property, true);
+      $webkit-transition-property: append($webkit-transition-property, $property, comma);
+      $moz-transition-property: append($moz-transition-property, $property, comma);
+      $ms-transition-property: append($ms-transition-property, $property, comma);
+      $o-transition-property: append($o-transition-property, $property, comma);
     }
   }
 
@@ -188,31 +188,13 @@ $transitionable-prefixed-properties: transform, transform-origin !default;
   @include prefix-friendly-transition($transition);
 }
 
-@function array-push($array, $object, $comma: false) {
-  @if $comma {
-    @if $array {
-      $array: $array, $object;
-    } @else {
-      $array: $object;
-    }
-  } @else {
-    @if $array {
-      $array: $array $object;
-    } @else {
-      $array: $object;
-    }
-  }
-
-  @return $array;
-}
-
 @mixin prefix-friendly-transition($transition) {
   $raw-transition: ($transition);
 
-  $webkit-transition: false;
-  $moz-transition: false;
-  $ms-transition: false;
-  $o-transition: false;
+  $webkit-transition: compact(false);
+  $moz-transition: compact(false);
+  $ms-transition: compact(false);
+  $o-transition: compact(false);
 
   @each $single-transition in $raw-transition {
     $property: nth($single-transition, 1);
@@ -225,21 +207,21 @@ $transitionable-prefixed-properties: transform, transform-origin !default;
     }
 
     @if $match {
-      $single-transition-suffix: false;
+      $single-transition-suffix: compact(false);
 
       @for $i from 2 through length($single-transition) {
-        $single-transition-suffix: array-push($single-transition-suffix, nth($single-transition, $i));
+        $single-transition-suffix: append($single-transition-suffix, nth($single-transition, $i), space);
       }
 
-      $webkit-transition: array-push($webkit-transition, compact(join(-webkit-#{$property}, $single-transition-suffix)), true);
-      $moz-transition: array-push($moz-transition, compact(join(-moz-#{$property}, $single-transition-suffix)), true);
-      $ms-transition: array-push($ms-transition, compact(join(-ms-#{$property}, $single-transition-suffix)), true);
-      $o-transition: array-push($o-transition, compact(join(-o-#{$property}, $single-transition-suffix)), true);
+      $webkit-transition: append($webkit-transition, compact(join(-webkit-#{$property}, $single-transition-suffix)), comma);
+      $moz-transition: append($moz-transition, compact(join(-moz-#{$property}, $single-transition-suffix)), comma);
+      $ms-transition: append($ms-transition, compact(join(-ms-#{$property}, $single-transition-suffix)), comma);
+      $o-transition: append($o-transition, compact(join(-o-#{$property}, $single-transition-suffix)), comma);
     } @else {
-      $webkit-transition: array-push($webkit-transition, $single-transition, true);
-      $moz-transition: array-push($moz-transition, $single-transition, true);
-      $ms-transition: array-push($ms-transition, $single-transition, true);
-      $o-transition: array-push($o-transition, $single-transition, true);
+      $webkit-transition: append($webkit-transition, $single-transition, comma);
+      $moz-transition: append($moz-transition, $single-transition, comma);
+      $ms-transition: append($ms-transition, $single-transition, comma);
+      $o-transition: append($o-transition, $single-transition, comma);
     }
   }
 

From 3f23287afb60dc8f79cb2418f618c1cf1621fc42 Mon Sep 17 00:00:00 2001
From: Richard Herrera <rich@doctyper.com>
Date: Sun, 26 Feb 2012 12:28:03 -0800
Subject: [PATCH 09/11] Adding test for multiple transitions.

---
 test/fixtures/stylesheets/compass/css/transition.css   | 7 +++++++
 test/fixtures/stylesheets/compass/sass/transition.scss | 1 +
 2 files changed, 8 insertions(+)

diff --git a/test/fixtures/stylesheets/compass/css/transition.css b/test/fixtures/stylesheets/compass/css/transition.css
index dbdb5fe8..39087d7e 100644
--- a/test/fixtures/stylesheets/compass/css/transition.css
+++ b/test/fixtures/stylesheets/compass/css/transition.css
@@ -42,6 +42,13 @@
   -o-transition: -o-transform 0.6s ease-out 0.2s;
   transition: transform 0.6s ease-out 0.2s; }
 
+.multiple-transitions {
+  -webkit-transition: -webkit-transform 0.6s ease-out, opacity 0.2s ease-in;
+  -moz-transition: -moz-transform 0.6s ease-out, opacity 0.2s ease-in;
+  -ms-transition: -ms-transform 0.6s ease-out, opacity 0.2s ease-in;
+  -o-transition: -o-transform 0.6s ease-out, opacity 0.2s ease-in;
+  transition: transform 0.6s ease-out, opacity 0.2s ease-in; }
+
 .transition-property {
   -webkit-transition-property: -webkit-transform;
   -moz-transition-property: -moz-transform;
diff --git a/test/fixtures/stylesheets/compass/sass/transition.scss b/test/fixtures/stylesheets/compass/sass/transition.scss
index 523c1c76..fdb69e09 100644
--- a/test/fixtures/stylesheets/compass/sass/transition.scss
+++ b/test/fixtures/stylesheets/compass/sass/transition.scss
@@ -6,5 +6,6 @@
 .transition-duration-list { @include transition-duration((0.2s, 0.5s, 0.2s)); }
 .single-transform-transition-without-delay  { @include single-transition(transform, 0.6s, ease-out); }
 .single-transform-transition-with-delay     { @include single-transition(transform, 0.6s, ease-out, 0.2s); }
+.multiple-transitions { @include transition(transform 0.6s ease-out, opacity 0.2s ease-in) }
 .transition-property { @include transition-property(transform); }
 .multiple-transition-properties { @include transition-property((opacity, transform, left)); }

From c1ce093cbcafb948e98e39089317da6cd7b336d2 Mon Sep 17 00:00:00 2001
From: Richard Herrera <rich@doctyper.com>
Date: Sun, 26 Feb 2012 14:51:59 -0800
Subject: [PATCH 10/11] Keeping things DRY, refactoring some shared
 functionality. All prefix fixes now route through an @build-prefix-values
 mixin.

---
 .../stylesheets/compass/css3/_transition.scss | 153 +++++-------------
 1 file changed, 37 insertions(+), 116 deletions(-)

diff --git a/frameworks/compass/stylesheets/compass/css3/_transition.scss b/frameworks/compass/stylesheets/compass/css3/_transition.scss
index 48ed2f82..f220d512 100644
--- a/frameworks/compass/stylesheets/compass/css3/_transition.scss
+++ b/frameworks/compass/stylesheets/compass/css3/_transition.scss
@@ -23,7 +23,7 @@ $default-transition-function: false !default;
 
 $default-transition-delay: false !default;
 
-$transitionable-prefixed-properties: transform, transform-origin !default;
+$transitionable-prefixed-values: transform, transform-origin !default;
 
 // One or more properties to transition
 //
@@ -32,40 +32,7 @@ $transitionable-prefixed-properties: transform, transform-origin !default;
 
 @mixin transition-property($properties: $default-transition-property) {
   @if type-of($properties) == string { $properties: unquote($properties); }
-  $raw-properties: ($properties);
-
-  $webkit-transition-property: compact(false);
-  $moz-transition-property: compact(false);
-  $ms-transition-property: compact(false);
-  $o-transition-property: compact(false);
-
-  @each $property in $raw-properties {
-    $match: false;
-
-    @each $prefixed-property in $transitionable-prefixed-properties {
-      @if $property == $prefixed-property {
-        $match: true;
-      }
-    }
-
-    @if $match {
-      $webkit-transition-property: append($webkit-transition-property, -webkit-#{$property}, comma);
-      $moz-transition-property: append($moz-transition-property, -moz-#{$property}, comma);
-      $ms-transition-property: append($ms-transition-property, -ms-#{$property}, comma);
-      $o-transition-property: append($o-transition-property, -o-#{$property}, comma);
-    } @else {
-      $webkit-transition-property: append($webkit-transition-property, $property, comma);
-      $moz-transition-property: append($moz-transition-property, $property, comma);
-      $ms-transition-property: append($ms-transition-property, $property, comma);
-      $o-transition-property: append($o-transition-property, $property, comma);
-    }
-  }
-
-  @if $experimental-support-for-webkit    { -webkit-transition-property: $webkit-transition-property; }
-  @if $experimental-support-for-mozilla   { -moz-transition-property: $moz-transition-property; }
-  @if $experimental-support-for-microsoft { -ms-transition-property: $ms-transition-property; }
-  @if $experimental-support-for-opera     { -o-transition-property: $o-transition-property; }
-  transition-property: $properties;
+  @include build-prefix-values(transition-property, $properties);
 }
 
 // One or more durations in seconds
@@ -112,60 +79,7 @@ $transitionable-prefixed-properties: transform, transform-origin !default;
   $function: $default-transition-function,
   $delay: $default-transition-delay
 ) {
-  $match: false;
-
-  @each $prefixed-property in $transitionable-prefixed-properties {
-    @if $property == $prefixed-property {
-      $match: true;
-    }
-  }
-
-  @if $property and $duration and $function {
-    // Shorthand (see https://github.com/chriseppstein/compass/issues/585)
-    @if $delay {
-      @if $match {
-        @if $experimental-support-for-webkit    { -webkit-transition: -webkit-#{$property} $duration $function; -webkit-transition-delay: $delay; }
-        @if $experimental-support-for-mozilla   { -moz-transition: -moz-#{$property} $duration $function $delay; }
-        @if $experimental-support-for-microsoft { -ms-transition: -ms-#{$property} $duration $function $delay; }
-        @if $experimental-support-for-opera     { -o-transition: -o-#{$property} $duration $function $delay; }
-        transition: $property $duration $function $delay;
-      } @else {
-        @if $experimental-support-for-webkit    { -webkit-transition: $property $duration $function; -webkit-transition-delay: $delay; }
-        @include experimental(transition, $property $duration $function $delay,
-          -moz,
-          not -webkit,
-          -o,
-          -ms,
-          not -khtml,
-          official
-        );
-      }
-    }
-    @else {
-      @if $match {
-        @if $experimental-support-for-webkit    { -webkit-transition: -webkit-#{$property} $duration $function; }
-        @if $experimental-support-for-mozilla   { -moz-transition: -moz-#{$property} $duration $function; }
-        @if $experimental-support-for-microsoft { -ms-transition: -ms-#{$property} $duration $function; }
-        @if $experimental-support-for-opera     { -o-transition: -o-#{$property} $duration $function; }
-        transition: $property $duration $function;
-      } @else {
-        @include experimental(transition, $property $duration $function,
-          -moz,
-          -webkit,
-          -o,
-          -ms,
-          not -khtml,
-          official
-        );
-      }
-    }
-  }
-  @else {
-    @include transition-property($property);
-    @include transition-duration($duration);
-    @if $function { @include transition-timing-function($function); }
-    @if $delay { @include transition-delay($delay); }
-  }
+  @include build-prefix-values(transition, compact($property $duration $function, false), $delay);
 }
 
 @mixin transition(
@@ -185,49 +99,56 @@ $transitionable-prefixed-properties: transform, transform-origin !default;
   }
 
   $transition : compact($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10);
-  @include prefix-friendly-transition($transition);
+  @include build-prefix-values(transition, $transition);
 }
 
-@mixin prefix-friendly-transition($transition) {
-  $raw-transition: ($transition);
+@mixin build-prefix-values($property, $values, $delay: false) {
+  $raw-values: ($values);
+  $index: compact(false);
 
-  $webkit-transition: compact(false);
-  $moz-transition: compact(false);
-  $ms-transition: compact(false);
-  $o-transition: compact(false);
+  $webkit-value: compact(false);
+  $moz-value: compact(false);
+  $ms-value: compact(false);
+  $o-value: compact(false);
 
-  @each $single-transition in $raw-transition {
-    $property: nth($single-transition, 1);
+  @each $value in $raw-values {
+    $value: compact(join($value, false));
     $match: false;
 
-    @each $prefixed-property in $transitionable-prefixed-properties {
-      @if $property == $prefixed-property {
+    @each $prefixed-value in $transitionable-prefixed-values {
+      @if index($value, $prefixed-value) {
+        $index: index($value, $prefixed-value);
         $match: true;
       }
     }
 
     @if $match {
-      $single-transition-suffix: compact(false);
+      $value-prefix: nth($value, $index);
+      $value-suffix: compact(false);
 
-      @for $i from 2 through length($single-transition) {
-        $single-transition-suffix: append($single-transition-suffix, nth($single-transition, $i), space);
+      @for $i from 2 through length($value) {
+        $value-suffix: append($value-suffix, nth($value, $i), space);
       }
 
-      $webkit-transition: append($webkit-transition, compact(join(-webkit-#{$property}, $single-transition-suffix)), comma);
-      $moz-transition: append($moz-transition, compact(join(-moz-#{$property}, $single-transition-suffix)), comma);
-      $ms-transition: append($ms-transition, compact(join(-ms-#{$property}, $single-transition-suffix)), comma);
-      $o-transition: append($o-transition, compact(join(-o-#{$property}, $single-transition-suffix)), comma);
+      $non-webkit-suffix: compact(append($value-suffix, $delay, space));
+
+      $webkit-value: append($webkit-value, compact(join(-webkit-#{$value-prefix}, $value-suffix)), comma);
+      $moz-value: append($moz-value, compact(join(-moz-#{$value-prefix}, $non-webkit-suffix)), comma);
+      $ms-value: append($ms-value, compact(join(-ms-#{$value-prefix}, $non-webkit-suffix)), comma);
+      $o-value: append($o-value, compact(join(-o-#{$value-prefix}, $non-webkit-suffix)), comma);
     } @else {
-      $webkit-transition: append($webkit-transition, $single-transition, comma);
-      $moz-transition: append($moz-transition, $single-transition, comma);
-      $ms-transition: append($ms-transition, $single-transition, comma);
-      $o-transition: append($o-transition, $single-transition, comma);
+      $non-webkit-value: compact(append($value, $delay, space));
+
+      $webkit-value: append($webkit-value, $value, comma);
+      $moz-value: append($moz-value, $non-webkit-value, comma);
+      $ms-value: append($ms-value, $non-webkit-value, comma);
+      $o-value: append($o-value, $non-webkit-value, comma);
     }
   }
 
-  @if $experimental-support-for-webkit    { -webkit-transition: $webkit-transition; }
-  @if $experimental-support-for-mozilla   { -moz-transition: $moz-transition; }
-  @if $experimental-support-for-microsoft { -ms-transition: $ms-transition; }
-  @if $experimental-support-for-opera     { -o-transition: $o-transition; }
-  transition: $transition;
+  @if $experimental-support-for-webkit    { -webkit-#{$property} : $webkit-value; @if $delay { -webkit-#{$property}-delay : $delay; } }
+  @if $experimental-support-for-mozilla   {    -moz-#{$property} :    $moz-value; }
+  @if $experimental-support-for-microsoft {     -ms-#{$property} :     $ms-value; }
+  @if $experimental-support-for-opera     {      -o-#{$property} :      $o-value; }
+                                                    #{$property} :      compact($values $delay);
 }

From 94bef38312b1eefeeee1fbec27bb453db30e0da2 Mon Sep 17 00:00:00 2001
From: Richard Herrera <rich@doctyper.com>
Date: Sun, 26 Feb 2012 14:52:35 -0800
Subject: [PATCH 11/11] Adding a single transform transition stylesheet test.

---
 test/fixtures/stylesheets/compass/css/transition.css   | 7 +++++++
 test/fixtures/stylesheets/compass/sass/transition.scss | 1 +
 2 files changed, 8 insertions(+)

diff --git a/test/fixtures/stylesheets/compass/css/transition.css b/test/fixtures/stylesheets/compass/css/transition.css
index 39087d7e..b9b21aea 100644
--- a/test/fixtures/stylesheets/compass/css/transition.css
+++ b/test/fixtures/stylesheets/compass/css/transition.css
@@ -42,6 +42,13 @@
   -o-transition: -o-transform 0.6s ease-out 0.2s;
   transition: transform 0.6s ease-out 0.2s; }
 
+.transform-transition {
+  -webkit-transition: -webkit-transform 0.6s ease-out;
+  -moz-transition: -moz-transform 0.6s ease-out;
+  -ms-transition: -ms-transform 0.6s ease-out;
+  -o-transition: -o-transform 0.6s ease-out;
+  transition: transform 0.6s ease-out; }
+
 .multiple-transitions {
   -webkit-transition: -webkit-transform 0.6s ease-out, opacity 0.2s ease-in;
   -moz-transition: -moz-transform 0.6s ease-out, opacity 0.2s ease-in;
diff --git a/test/fixtures/stylesheets/compass/sass/transition.scss b/test/fixtures/stylesheets/compass/sass/transition.scss
index fdb69e09..16add41a 100644
--- a/test/fixtures/stylesheets/compass/sass/transition.scss
+++ b/test/fixtures/stylesheets/compass/sass/transition.scss
@@ -6,6 +6,7 @@
 .transition-duration-list { @include transition-duration((0.2s, 0.5s, 0.2s)); }
 .single-transform-transition-without-delay  { @include single-transition(transform, 0.6s, ease-out); }
 .single-transform-transition-with-delay     { @include single-transition(transform, 0.6s, ease-out, 0.2s); }
+.transform-transition { @include transition(transform 0.6s ease-out) }
 .multiple-transitions { @include transition(transform 0.6s ease-out, opacity 0.2s ease-in) }
 .transition-property { @include transition-property(transform); }
 .multiple-transition-properties { @include transition-property((opacity, transform, left)); }