From 7c738cd3797f9ecfc7dba5d214a6155331b2d685 Mon Sep 17 00:00:00 2001
From: David Chambers <David.Chambers.05@gmail.com>
Date: Thu, 6 Oct 2011 21:41:41 -0700
Subject: [PATCH] css3: use `transition` shorthand if appropriate (closes #585)

---
 .../stylesheets/compass/css3/_transition.scss | 37 ++++++++++++++++---
 .../stylesheets/compass/css/transition.css    | 12 ++++++
 .../stylesheets/compass/sass/transition.scss  |  4 ++
 3 files changed, 48 insertions(+), 5 deletions(-)
 create mode 100644 test/fixtures/stylesheets/compass/css/transition.css
 create mode 100644 test/fixtures/stylesheets/compass/sass/transition.scss

diff --git a/frameworks/compass/stylesheets/compass/css3/_transition.scss b/frameworks/compass/stylesheets/compass/css3/_transition.scss
index 2cab9fd5..ae98aae2 100644
--- a/frameworks/compass/stylesheets/compass/css3/_transition.scss
+++ b/frameworks/compass/stylesheets/compass/css3/_transition.scss
@@ -73,15 +73,42 @@ $default-transition-delay: false !default;
 // Transition all-in-one shorthand
 
 @mixin single-transition(
-  $properties: $default-transition-property,
+  $property: $default-transition-property,
   $duration: $default-transition-duration,
   $function: $default-transition-function,
   $delay: $default-transition-delay
 ) {
-  @include transition-property($properties);
-  @include transition-duration($duration);
-  @if $function { @include transition-timing-function($function); }
-  @if $delay { @include transition-delay($delay); }
+  @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,
+        not -ms,
+        not -khtml,
+        official
+      );
+    }
+    @else {
+      @include experimental(transition, $property $duration $function,
+        -moz,
+        -webkit,
+        -o,
+        not -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); }
+  }
 }
 
 @mixin transition(
diff --git a/test/fixtures/stylesheets/compass/css/transition.css b/test/fixtures/stylesheets/compass/css/transition.css
new file mode 100644
index 00000000..5d38c42f
--- /dev/null
+++ b/test/fixtures/stylesheets/compass/css/transition.css
@@ -0,0 +1,12 @@
+.single-transition-without-delay {
+  -moz-transition: all 0.6s ease-out;
+  -webkit-transition: all 0.6s ease-out;
+  -o-transition: all 0.6s ease-out;
+  transition: all 0.6s ease-out; }
+
+.single-transition-with-delay {
+  -webkit-transition: all 0.6s ease-out;
+  -webkit-transition-delay: 0.2s;
+  -moz-transition: all 0.6s ease-out 0.2s;
+  -o-transition: all 0.6s ease-out 0.2s;
+  transition: all 0.6s ease-out 0.2s; }
diff --git a/test/fixtures/stylesheets/compass/sass/transition.scss b/test/fixtures/stylesheets/compass/sass/transition.scss
new file mode 100644
index 00000000..8cee1166
--- /dev/null
+++ b/test/fixtures/stylesheets/compass/sass/transition.scss
@@ -0,0 +1,4 @@
+@import "compass/css3/transition";
+
+.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); }