diff --git a/CHANGELOG.md b/CHANGELOG.md index a5ea7cdd..3ed26593 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,8 @@ # Radium Changelog +## Unreleased +- Fix `keyframes` bug from prefixed inline styles. (#973) + ## 0.22.0 (February 9, 2018) ### Breaking Changes - Radium now exports defaults as `.default`, so for runtimes like Node.js for all files in `lib/**`. We have changed `package.json:main` to point to `/index.js` instead of `/lib/index.js` as a convenience wrapper to expose mostly what was there before so behavior of `const Radium = require('radium');` works mostly as it did before. Caveats: diff --git a/src/prefixer.js b/src/prefixer.js index e4f89236..82b8fcad 100644 --- a/src/prefixer.js +++ b/src/prefixer.js @@ -110,7 +110,10 @@ function getPrefixer( } } - if (!_cachedPrefixer || actualUserAgent !== _lastUserAgent) { + if ( + process.env.NODE_ENV === 'test' || + (!_cachedPrefixer || actualUserAgent !== _lastUserAgent) + ) { if (actualUserAgent === 'all') { _cachedPrefixer = { prefix: prefixAll, @@ -121,11 +124,12 @@ function getPrefixer( } _lastUserAgent = actualUserAgent; } + return _cachedPrefixer; } export function getPrefixedKeyframes(userAgent?: ?string): string { - return getPrefixer(userAgent).prefixedKeyframes; + return getPrefixer(userAgent).prefixedKeyframes || 'keyframes'; } // Returns a new style object with vendor prefixes added to property names and diff --git a/test/radium-test.js b/test/radium-test.js index 3807807b..ff062ed4 100644 --- a/test/radium-test.js +++ b/test/radium-test.js @@ -39,7 +39,7 @@ describe('Radium blackbox SSR tests', () => { ); }); - // Regression test: https://github.com/FormidableLabs/radium/issues/958s + // Regression test: https://github.com/FormidableLabs/radium/issues/958 it('handles non-matching user agent', () => { const rendered = render(Wrapped, { userAgent: 'testy-mctestface' @@ -58,4 +58,70 @@ describe('Radium blackbox SSR tests', () => { expect(rendered).to.contain('style="display:-webkit-flex"'); }); }); + + describe('keyframes', () => { + let getComponent; + + beforeEach(() => { + const testKeyFrames = Radium.keyframes( + { + '0%': {width: '10%'}, + '50%': {width: '50%'}, + '100%': {width: '10%'} + }, + 'test' + ); + + const style = { + animation: 'x 3s ease 0s infinite', + animationName: testKeyFrames, + background: 'blue' + }; + + getComponent = radiumConfig => { + class Component extends React.Component { + render() { + return React.createElement( + Radium.StyleRoot, + {radiumConfig}, + React.createElement('div', { + style + }) + ); + } + } + + return Component; + }; + }); + + // Regression test: https://github.com/FormidableLabs/radium/issues/973 + it('handles no user agent', () => { + const rendered = render(getComponent()); + expect(rendered).to.contain('