Fix keyframes bug from prefixed inline styles. Fixes FormidableLabs…

…#973 (FormidableLabs#974)

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:

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

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('<style>@keyframes test-radium-animation-');
+    });
+
+    // Regression test: https://github.com/FormidableLabs/radium/issues/973
+    it('handles non-matching user agent', () => {
+      const rendered = render(
+        getComponent({
+          userAgent: 'testy-mctestface'
+        })
+      );
+
+      expect(rendered).to.contain('<style>@keyframes test-radium-animation-');
+    });
+
+    it('handles matching user agent', () => {
+      const rendered = render(
+        getComponent({
+          userAgent: 'Mozilla/5.0 (iPad; CPU OS 8_0_0 like Mac OS X) AppleWebKit/600.1.4' +
+            ' (KHTML, like Gecko) CriOS/47.0.2526.107 Mobile/12H321 Safari/600.1.4'
+        })
+      );
+      expect(rendered).to.contain(
+        '<style>@-webkit-keyframes test-radium-animation-'
+      );
+    });
+  });
 });

test/setup.js

@@ -8,3 +8,6 @@ chai.use(sinonChai);
 
 // Add test lib globals.
 global.expect = chai.expect;
+
+// Force NODE_ENV. Some things like caches behave differently.
+process.env.NODE_ENV = process.env.NODE_ENV || 'test';