Properly prefix keyframes

Use `inline-style-prefixer`’s `prefixedKeyframes` Fixes FormidableLabs#488
Rom325 · Jan 7, 2016 · 747587b · 747587b
1 parent b620aba
commit 747587b
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 10 deletions.
diff --git a/interfaces/inline-style-prefixer.js b/interfaces/inline-style-prefixer.js
@@ -1,6 +1,8 @@
 declare class InlineStylePrefixer {
   static prefixAll(style: Object): Object;
 
+  prefixedKeyframes: string;
+
   constructor(config: {
     keepUnprefixed?: bool,
     userAgent?: ?string

diff --git a/src/__tests__/keyframes-test.js b/src/__tests__/keyframes-test.js
@@ -5,7 +5,33 @@ import {expectCSS, getElement} from 'test-helpers';
 import React, {Component} from 'react';
 import TestUtils from 'react-addons-test-utils';
 
+const CHROME_14_USER_AGENT = 'Mozilla/5.0 (Windows NT 6.1) AppleWebKit/535.1 ' +
+  '(KHTML, like Gecko) Chrome/14.0.812.0 Safari/535.1';
+
 describe('keyframes', () => {
+  it('adds prefix to keyframes when needed', () => {
+    const anim = keyframes({from: {left: 0}, to: {left: 100}}, 'slide');
+    class TestComponent extends Component {
+      render() {
+        return (
+          <StyleRoot
+            radiumConfig={{userAgent: CHROME_14_USER_AGENT}}
+            style={{animationName: anim}}
+          />
+        );
+      }
+    }
+
+    const output = TestUtils.renderIntoDocument(<TestComponent />);
+    const style = getElement(output, 'style');
+
+    expectCSS(style, `
+      @-webkit-keyframes slide-radium-animation-1bdcc98d {
+        from {left: 0;}
+        to {left: 100px;}
+      }
+    `);
+  });
 
   it('renders keyframes in root style component', () => {
     const animation = keyframes({
@@ -24,7 +50,7 @@ describe('keyframes', () => {
     const style = getElement(output, 'style');
 
     expectCSS(style, `
-      @-webkit-keyframes SlideFromLeft-radium-animation-1b668a10 {
+      @keyframes SlideFromLeft-radium-animation-1b668a10 {
         from{
           left: -1000px;
         }
@@ -52,7 +78,7 @@ describe('keyframes', () => {
     const style = getElement(output, 'style');
 
     expectCSS(style, `
-      @-webkit-keyframes SlideFromLeft-radium-animation-ab5ed129 {
+      @keyframes SlideFromLeft-radium-animation-ab5ed129 {
         from{
           left: -1000px;
         }
@@ -92,7 +118,7 @@ describe('keyframes', () => {
     const style = getElement(output, 'style');
 
     expectCSS(style, `
-      @-webkit-keyframes SlideFromLeft-radium-animation-1b668a10 {
+      @keyframes SlideFromLeft-radium-animation-1b668a10 {
         from{
           left: -1000px;
         }

diff --git a/src/keyframes.js b/src/keyframes.js
@@ -2,6 +2,7 @@
 
 import cssRuleSetToString from './css-rule-set-to-string';
 import hash from './hash';
+import {getPrefixedKeyframes} from './prefixer';
 
 export type Keyframes = {
   __radiumKeyframes: bool,
@@ -15,7 +16,7 @@ export default function keyframes(
   return {
     __radiumKeyframes: true,
     __process(userAgent) {
-      const keyframesPrefixed = '-webkit-keyframes';
+      const keyframesPrefixed = getPrefixedKeyframes(userAgent);
       const rules = Object.keys(keyframeRules).map(percentage =>
         cssRuleSetToString(
           percentage,

diff --git a/src/prefixer.js b/src/prefixer.js
@@ -22,12 +22,7 @@ let hasWarnedAboutUserAgent = false;
 let lastUserAgent;
 let prefixer;
 
-// Returns a new style object with vendor prefixes added to property names
-// and values.
-export function getPrefixedStyle(
-  style: Object,
-  userAgent?: ?string,
-): Object {
+function getPrefixer(userAgent: ?string): InlineStylePrefixer {
   const actualUserAgent = userAgent ||
     (global && global.navigator && global.navigator.userAgent);
 
@@ -48,7 +43,20 @@ export function getPrefixedStyle(
     prefixer = new InlineStylePrefixer({userAgent: actualUserAgent});
     lastUserAgent = actualUserAgent;
   }
+  return prefixer;
+}
 
+export function getPrefixedKeyframes(userAgent?: ?string): string {
+  return getPrefixer(userAgent).prefixedKeyframes;
+}
+
+// Returns a new style object with vendor prefixes added to property names
+// and values.
+export function getPrefixedStyle(
+  style: Object,
+  userAgent?: ?string,
+): Object {
+  const prefixer = getPrefixer(userAgent);
   const prefixedStyle = prefixer.prefix(style);
   const prefixedStyleWithFallbacks = transformValues(prefixedStyle);
   return prefixedStyleWithFallbacks;