feat: add vendor prefixes to keyframes addon

streamich · Mar 20, 2018 · 5ddd5bb · 5ddd5bb
1 parent 77f0ad9
commit 5ddd5bb
Showing 1 changed file with 21 additions and 8 deletions.
diff --git a/addon/keyframes.js b/addon/keyframes.js
@@ -1,13 +1,19 @@
 'use strict';
 
-exports.addon = function (renderer) {
+exports.addon = function (renderer, config) {
     if (process.env.NODE_ENV !== 'production') {
         require('./__dev__/warnOnMissingDependencies')('keyframes', renderer, ['putRaw', 'put']);
     }
 
+    config = renderer.assign({
+        prefixes: ['-webkit-', '-moz-', '-o-', ''],
+    }, config || {});
+
+    var prefixes = config.prefixes;
+
     if (renderer.client) {
         // Craete @keyframe Stylesheet `ksh`.
-        document.head.appendChild(renderer.ksh = document.createElement('style'))
+        document.head.appendChild(renderer.ksh = document.createElement('style'));
     }
 
     var putAt = renderer.putAt;
@@ -27,12 +33,15 @@ exports.addon = function (renderer) {
                 str += keyframe + '{' + strDecls + '}';
             }
 
-            str = prelude + '{' + str + '}';
+            for (var i = 0; i < prefixes.length; i++) {
+                var prefix = prefixes[i];
+                var rawKeyframes = prelude.replace('@keyframes', '@' + prefix + 'keyframes') + '{' + str + '}';
 
-            if (renderer.client) {
-                renderer.ksh.appendChild(document.createTextNode(str));
-            } else {
-                renderer.putRaw(str);
+                if (renderer.client) {
+                    renderer.ksh.appendChild(document.createTextNode(rawKeyframes));
+                } else {
+                    renderer.putRaw(rawKeyframes);
+                }
             }
 
             return;
@@ -45,7 +54,11 @@ exports.addon = function (renderer) {
         if (!block) block = renderer.hash(keyframes);
         block = renderer.pfx + block;
 
-        renderer.putAt('', keyframes, '@keyframes ' + block);
+        for (var i = 0; i < prefixes.length; i++) {
+            var prefix = prefixes[i];
+
+            renderer.putAt('', keyframes, '@' + prefix + 'keyframes ' + block);
+        }
 
         return block;
     };