diff --git a/interfaces/inline-style-prefixer.js b/interfaces/inline-style-prefixer.js index 9ee6a94e..4c03e86b 100644 --- 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 index 2810fad4..cdf81536 100644 --- 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 ( + + ); + } + } + + const output = TestUtils.renderIntoDocument(); + 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 index 73096ecb..dea4c438 100644 --- 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 index 4d46602a..67eca9c7 100644 --- 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;