Merge pull request #2029 from styled-components/fix-cgs-keyframes

fix createGlobalStyles + keyframes

.flowconfig

@@ -13,6 +13,7 @@
 .*/dist/.*
 .*/lib/.*
 .*/src/test/.*
+.*/src/vendor/.*
 .*/src/.*/test/.*
 .*/example/.*
 .*/integration-test/.*

src/constructors/createGlobalStyle.js

@@ -6,6 +6,7 @@ import StyleSheet from '../models/StyleSheet';
 import { StyleSheetConsumer } from '../models/StyleSheetManager';
 import determineTheme from '../utils/determineTheme';
 import { ThemeConsumer, type Theme } from '../models/ThemeProvider';
+// $FlowFixMe
 import hashStr from '../vendor/glamor/hash';
 import css from './css';
 

src/constructors/keyframes.js

@@ -2,6 +2,7 @@
 import css from './css';
 import generateAlphabeticName from '../utils/generateAlphabeticName';
 import stringifyRules from '../utils/stringifyRules';
+// $FlowFixMe
 import hashStr from '../vendor/glamor/hash';
 import Keyframes from '../models/Keyframes';
 

src/constructors/test/createGlobalStyle.test.js

@@ -17,6 +17,7 @@ import ServerStyleSheet from '../../models/ServerStyleSheet';
 import StyleSheetManager from '../../models/StyleSheetManager';
 
 import createGlobalStyle from '../createGlobalStyle';
+import keyframes from '../keyframes';
 
 let context;
 
@@ -338,6 +339,43 @@ body{background:red;}"
       `"The global style component sc-global-2176982909 was given child JSX. createGlobalStyle does not render children."`
     );
   });
+
+  it('works with keyframes', () => {
+    const { render } = setup();
+
+    const rotate360 = keyframes`
+      from {
+        transform: rotate(0deg);
+      }
+
+      to {
+        transform: rotate(360deg);
+      }
+    `;
+
+    const GlobalStyle = createGlobalStyle`
+      div {
+        display: inline-block;
+        animation: ${rotate360} 2s linear infinite;
+        padding: 2rem 1rem;
+        font-size: 1.2rem;
+      }
+    `;
+
+    render(
+      <div>
+        <GlobalStyle />
+        <div>&lt; 💅 &gt;</div>
+      </div>
+    );
+
+    expect(getCSS(document).trim()).toMatchInlineSnapshot(`
+"/* sc-component-id:sc-global-2592835591 */
+div{display:inline-block;-webkit-animation:a 2s linear infinite;animation:a 2s linear infinite;padding:2rem 1rem;font-size:1.2rem;}
+/* sc-component-id:sc-keyframes-a */
+@-webkit-keyframes a{from{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}to{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}} @keyframes a{from{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}to{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}"
+`);
+  });
 });
 
 function setup() {

src/models/ComponentStyle.js

@@ -1,4 +1,5 @@
 // @flow
+// $FlowFixMe
 import hashStr from '../vendor/glamor/hash';
 import flatten from '../utils/flatten';
 import generateAlphabeticName from '../utils/generateAlphabeticName';

src/models/GlobalStyle.js

@@ -22,7 +22,7 @@ export default class GlobalStyle {
   }
 
   createStyles(executionContext: Object, styleSheet: StyleSheet) {
-    const flatCSS = flatten(this.rules, executionContext);
+    const flatCSS = flatten(this.rules, executionContext, styleSheet);
     const css = stringifyRules(flatCSS, '');
 
     styleSheet.inject(this.componentId, css);

src/models/InlineStyle.js

@@ -2,9 +2,11 @@
 /* eslint-disable import/no-unresolved */
 import transformDeclPairs from 'css-to-react-native';
 
+// $FlowFixMe
 import hashStr from '../vendor/glamor/hash';
 import type { RuleSet, StyleSheet } from '../types';
 import flatten from '../utils/flatten';
+// $FlowFixMe
 import parse from '../vendor/postcss-safe-parser/parse';
 
 let generated = {};