From eacdfef0a174a23a2d4d78b28d74568ba59ba9b9 Mon Sep 17 00:00:00 2001
From: DylanArnold <dylan.arnold@gmail.com>
Date: Thu, 15 Dec 2016 17:15:12 +1300
Subject: [PATCH] Add vendor prefixes to keyframes

---
 .../scala/scalacss/internal/Renderer.scala    | 24 +++++----
 .../test/scala/scalacss/full/InlineTest.scala | 54 +++++++++++++++++++
 doc/features/keyframes.md                     | 51 ++++++++++++++++++
 3 files changed, 118 insertions(+), 11 deletions(-)

diff --git a/core/shared/src/main/scala/scalacss/internal/Renderer.scala b/core/shared/src/main/scala/scalacss/internal/Renderer.scala
index ebae2050..0213e755 100644
--- a/core/shared/src/main/scala/scalacss/internal/Renderer.scala
+++ b/core/shared/src/main/scala/scalacss/internal/Renderer.scala
@@ -51,7 +51,7 @@ object StringRenderer {
 
   type KeyframeSelectorO = Option[KeyframeSelector]
 
-  case class FormatSB(kfStart : String                                     => Unit,
+  case class FormatSB(kfStart : (String, String)                           => Unit,
                       kfsStart: Value                                      => Unit,
                       mqStart : CssMediaQuery                              => Unit,
                       selStart: (CssMediaQueryO, CssSelector)              => Unit,
@@ -80,15 +80,17 @@ object StringRenderer {
           e.mq foreach mqEnd
 
         case e: CssEntry.Keyframes =>
-          kfStart(e.name.value)
-          for ((sel, styles) <- e.frames) {
-            kfsStart(sel.value)
-            val selO = Some(sel)
-            for (s <- styles)
-              printCssKV(selO, s.mq, s.content)
-            kfsEnd(sel)
+          Seq("-webkit-", "-moz-", "-o-", "").foreach { p => 
+            kfStart(p, e.name.value)
+            for ((sel, styles) <- e.frames) {
+              kfsStart(sel.value)
+              val selO = Some(sel)
+              for (s <- styles)
+                printCssKV(selO, s.mq, s.content)
+              kfsEnd(sel)
+            }
+            kfEnd(e.name)
           }
-          kfEnd(e.name)
 
         case e: CssEntry.FontFace =>
           ff(e)
@@ -138,7 +140,7 @@ object StringRenderer {
       quoteIfNeeded(sb, c.value, quote)
     }
     FormatSB(
-      kfStart  = n         => { sb append "@keyframes "; sb append n; sb append '{' },
+      kfStart  = (p, n)    => { sb append s"@${p}keyframes "; sb append n; sb append '{' },
       kfsStart = s         => { sb append s; sb append '{' },
       mqStart  = m         => { sb append m; sb append '{' },
       selStart = (_, s)    => { sb append s; sb append '{' },
@@ -177,7 +179,7 @@ object StringRenderer {
       sb append ";\n"
     }
     FormatSB(
-      kfStart  = n => { sb append "@keyframes "; sb append n; sb append " {\n" },
+      kfStart  = (p, n) => { sb append s"@${p}keyframes "; sb append n; sb append " {\n" },
       kfsStart = s => { sb append indent; sb append s; sb append " {\n" },
       mqStart  = mq => {
                    sb append mq
diff --git a/core/shared/src/test/scala/scalacss/full/InlineTest.scala b/core/shared/src/test/scala/scalacss/full/InlineTest.scala
index 6ced3384..68179a80 100644
--- a/core/shared/src/test/scala/scalacss/full/InlineTest.scala
+++ b/core/shared/src/test/scala/scalacss/full/InlineTest.scala
@@ -506,6 +506,60 @@ object InlineTest extends utest.TestSuite {
     }
 
     'keyframes - assertEq(norm(MyInlineWithKeyframes.render), norm("""
+       |@-webkit-keyframes MyInlineWithKeyframes-kf1 {
+       |  0% {
+       |    height: 100px;
+       |    width: 30px;
+       |  }
+       |
+       |  20.5% {
+       |    height: 150px;
+       |    width: 30px;
+       |  }
+       |
+       |  100% {
+       |    height: 200px;
+       |    width: 60px;
+       |  }
+       |
+       |}
+       |
+       |@-moz-keyframes MyInlineWithKeyframes-kf1 {
+       |  0% {
+       |    height: 100px;
+       |    width: 30px;
+       |  }
+       |
+       |  20.5% {
+       |    height: 150px;
+       |    width: 30px;
+       |  }
+       |
+       |  100% {
+       |    height: 200px;
+       |    width: 60px;
+       |  }
+       |
+       |}
+       |
+       |@-o-keyframes MyInlineWithKeyframes-kf1 {
+       |  0% {
+       |    height: 100px;
+       |    width: 30px;
+       |  }
+       |
+       |  20.5% {
+       |    height: 150px;
+       |    width: 30px;
+       |  }
+       |
+       |  100% {
+       |    height: 200px;
+       |    width: 60px;
+       |  }
+       |
+       |}
+       |
        |@keyframes MyInlineWithKeyframes-kf1 {
        |  0% {
        |    height: 100px;
diff --git a/doc/features/keyframes.md b/doc/features/keyframes.md
index ed259e0f..3efe661e 100644
--- a/doc/features/keyframes.md
+++ b/doc/features/keyframes.md
@@ -40,6 +40,57 @@ This code will not produce separate CSS for value `hello2`; its style will only
 Rendered CSS gonna look like following:
 
 ```css
+@-webkit-keyframes Demo-kf1 {
+  0% {
+    height: 100px;
+    width: 30px;
+  }
+
+  20% {
+    height: 150px;
+    width: 30px;
+  }
+
+  100% {
+    height: 200px;
+    width: 60px;
+  }
+}
+
+@-moz-keyframes Demo-kf1 {
+  0% {
+    height: 100px;
+    width: 30px;
+  }
+
+  20% {
+    height: 150px;
+    width: 30px;
+  }
+
+  100% {
+    height: 200px;
+    width: 60px;
+  }
+}
+
+@-o-keyframes Demo-kf1 {
+  0% {
+    height: 100px;
+    width: 30px;
+  }
+
+  20% {
+    height: 150px;
+    width: 30px;
+  }
+
+  100% {
+    height: 200px;
+    width: 60px;
+  }
+}
+
 @keyframes Demo-kf1 {
   0% {
     height: 100px;