styled-components 2.1.1 → 2.2.1

package/typings/tests/issue1068.tsx

@@ -0,0 +1,226 @@
+import * as React from "react";
+import styled from "../..";
+
+interface OptionalProps {
+    text?: string;
+}
+interface ThemedOptionalProps extends OptionalProps {
+    theme: any;
+}
+interface RequiredProps {
+    text: string;
+}
+interface ThemedRequiredProps extends RequiredProps {
+    theme: any;
+}
+
+declare const theme: any;
+
+// Tests of stateless functional components
+function statelessFunctionalComponents() {
+
+    function optionalProps() {
+        const Component = (props: OptionalProps) => <div>{props.text}</div>;
+
+        const StyledComponent = styled(Component)``;
+        const StyledStyledComponent = styled(StyledComponent)``;
+
+        <Component />;
+        <Component text="test" />;
+        <StyledComponent text="test" />;
+        <StyledComponent text="test" theme={theme} />; // theme is allowed
+        <StyledStyledComponent text="test" />;
+        <StyledStyledComponent text="test" theme={theme} />; // theme is allowed
+    }
+
+    function optionalPropsWithRequiredTheme() {
+        const Component = (props: ThemedOptionalProps) => <div>{props.text}</div>;
+
+        const StyledComponent = styled(Component)``;
+        const StyledStyledComponent = styled(StyledComponent)``;
+
+        <Component theme={theme} />; // theme is required
+        <Component text="test" theme={theme} />; // theme is required
+        <StyledComponent text="test" />; // theme is optional
+        <StyledComponent text="test" theme={theme} />; // theme is allowed
+        <StyledStyledComponent text="test" />; // theme is optional
+        <StyledStyledComponent text="test" theme={theme} />; // theme is allowed
+    }
+
+    function requiredProps() {
+        const Component = (props: RequiredProps) => <div>{props.text}</div>;
+
+        const StyledComponent = styled(Component)``;
+        const StyledStyledComponent = styled(StyledComponent)``;
+
+        // <Component />; // text required
+        <Component text="test" />;
+        // <StyledComponent />; // text required
+        <StyledComponent text="test" />;
+        <StyledComponent text="test" theme={theme} />; // theme is allowed
+        // <StyledStyledComponent />; // text allowed
+        <StyledStyledComponent text="test" />;
+        <StyledStyledComponent text="test" theme={theme} />; // theme is allowed
+    }
+
+    function requiredPropsWithRequiredTheme() {
+        const Component = (props: ThemedRequiredProps) => <div>{props.text}</div>;
+
+        const StyledComponent = styled(Component)``;
+        const StyledStyledComponent = styled(StyledComponent)``;
+
+        // <Component theme={theme} />; // theme is required
+        <Component text="test" theme={theme} />; // theme is required
+        // <StyledComponent />; // text required
+        <StyledComponent text="test" />; // theme is optional
+        <StyledComponent text="test" theme={theme} />; // theme is allowed
+        // <StyledStyledComponent />; // text required
+        <StyledStyledComponent text="test" />; // theme is optional
+        <StyledStyledComponent text="test" theme={theme} />; // theme is allowed
+    }
+
+}
+
+// Tests of pure components
+function pureComponents() {
+
+    function optionalProps() {
+        class Component extends React.PureComponent<OptionalProps> {
+            render() { return <div>{this.props.text}</div>; }
+        }
+
+        const StyledComponent = styled(Component)``;
+        const StyledStyledComponent = styled(StyledComponent)``;
+
+        <Component />;
+        <Component text="test" />;
+        <StyledComponent text="test" />;
+        <StyledComponent text="test" theme={theme} />; // theme is allowed
+        <StyledStyledComponent text="test" />;
+        <StyledStyledComponent text="test" theme={theme} />; // theme is allowed
+    }
+
+    function optionalPropsWithRequiredTheme() {
+        class Component extends React.PureComponent<ThemedOptionalProps> {
+            render() { return <div>{this.props.text}</div>; }
+        }
+
+        const StyledComponent = styled(Component)``;
+        const StyledStyledComponent = styled(StyledComponent)``;
+
+        <Component theme={theme} />; // theme is required
+        <Component text="test" theme={theme} />; // theme is required
+        <StyledComponent text="test" />; // theme is optional
+        <StyledComponent text="test" theme={theme} />; // theme is allowed
+        <StyledStyledComponent text="test" />; // theme is optional
+        <StyledStyledComponent text="test" theme={theme} />; // theme is allowed
+    }
+
+    function requiredProps() {
+        class Component extends React.PureComponent<RequiredProps> {
+            render() { return <div>{this.props.text}</div>; }
+        }
+
+        const StyledComponent = styled(Component)``;
+        const StyledStyledComponent = styled(StyledComponent)``;
+
+        // <Component />; // text required
+        <Component text="test" />;
+        // <StyledComponent />; // text required
+        <StyledComponent text="test" />;
+        <StyledComponent text="test" theme={theme} />; // theme is allowed
+        // <StyledStyledComponent />; // text allowed
+        <StyledStyledComponent text="test" />;
+        <StyledStyledComponent text="test" theme={theme} />; // theme is allowed
+    }
+
+    function requiredPropsWithRequiredTheme() {
+        class Component extends React.PureComponent<ThemedRequiredProps> {
+            render() { return <div>{this.props.text}</div>; }
+        }
+
+        const StyledComponent = styled(Component)``;
+        const StyledStyledComponent = styled(StyledComponent)``;
+
+        // <Component theme={theme} />; // theme is required
+        <Component text="test" theme={theme} />; // theme is required
+        // <StyledComponent />; // text required
+        <StyledComponent text="test" />; // theme is optional
+        <StyledComponent text="test" theme={theme} />; // theme is allowed
+        // <StyledStyledComponent />; // text required
+        <StyledStyledComponent text="test" />; // theme is optional
+        <StyledStyledComponent text="test" theme={theme} />; // theme is allowed
+    }
+}
+
+// Tests of classic components
+function classicComponents() {
+
+    function optionalProps() {
+        class Component extends React.Component<OptionalProps> {
+            render() { return <div>{this.props.text}</div>; }
+        }
+
+        const StyledComponent = styled(Component)``;
+        const StyledStyledComponent = styled(StyledComponent)``;
+
+        <Component />;
+        <Component text="test" />;
+        <StyledComponent text="test" />;
+        <StyledComponent text="test" theme={theme} />; // theme is allowed
+        <StyledStyledComponent text="test" />;
+        <StyledStyledComponent text="test" theme={theme} />; // theme is allowed
+    }
+
+    function optionalPropsWithRequiredTheme() {
+        class Component extends React.Component<ThemedOptionalProps> {
+            render() { return <div>{this.props.text}</div>; }
+        }
+
+        const StyledComponent = styled(Component)``;
+        const StyledStyledComponent = styled(StyledComponent)``;
+
+        <Component theme={theme} />; // theme is required
+        <Component text="test" theme={theme} />; // theme is required
+        <StyledComponent text="test" />; // theme is optional
+        <StyledComponent text="test" theme={theme} />; // theme is allowed
+        <StyledStyledComponent text="test" />; // theme is optional
+        <StyledStyledComponent text="test" theme={theme} />; // theme is allowed
+    }
+
+    function requiredProps() {
+        class Component extends React.Component<RequiredProps> {
+            render() { return <div>{this.props.text}</div>; }
+        }
+
+        const StyledComponent = styled(Component)``;
+        const StyledStyledComponent = styled(StyledComponent)``;
+
+        // <Component />; // text required
+        <Component text="test" />;
+        // <StyledComponent />; // text required
+        <StyledComponent text="test" />;
+        <StyledComponent text="test" theme={theme} />; // theme is allowed
+        // <StyledStyledComponent />; // text allowed
+        <StyledStyledComponent text="test" />;
+        <StyledStyledComponent text="test" theme={theme} />; // theme is allowed
+    }
+
+    function requiredPropsWithRequiredTheme() {
+        class Component extends React.Component<ThemedRequiredProps> {
+            render() { return <div>{this.props.text}</div>; }
+        }
+
+        const StyledComponent = styled(Component)``;
+        const StyledStyledComponent = styled(StyledComponent)``;
+
+        // <Component theme={theme} />; // theme is required
+        <Component text="test" theme={theme} />; // theme is required
+        // <StyledComponent />; // text required
+        <StyledComponent text="test" />; // theme is optional
+        <StyledComponent text="test" theme={theme} />; // theme is allowed
+        // <StyledStyledComponent />; // text required
+        <StyledStyledComponent text="test" />; // theme is optional
+        <StyledStyledComponent text="test" theme={theme} />; // theme is allowed
+    }
+}

package/typings/tests/main-test.tsx

@@ -40,7 +40,7 @@ interface MyTheme {
 interface ButtonProps {
   name: string;
   primary?: boolean;
-  theme?: MyTheme;
+  theme: MyTheme;
 }
 
 class MyButton extends React.Component<ButtonProps, {}> {

package/typings/tests/string-tags-test.tsx

@@ -0,0 +1,62 @@
+import * as React from "react";
+
+import styled from "../..";
+
+// Create a <Link> react component that renders an <a> which is
+// centered, palevioletred and sized at 1.5em
+const Link = styled.a`
+  font-size: 1.5em;
+  text-align: center;
+  color: palevioletred;
+`;
+
+// A Link instance should be backed by an HTMLAnchorElement
+const MyComponent = () =>
+  <Link
+    onClick={(e: React.MouseEvent<HTMLAnchorElement>) => undefined}
+  />;
+
+// Create a <LinkFromString> react component that renders an <a> which is
+// centered, palevioletred and sized at 1.5em
+const LinkFromString = styled("a")`
+  font-size: 1.5em;
+  text-align: center;
+  color: palevioletred;
+`;
+
+// A LinkFromString instance should be backed by an HTMLAnchorElement
+const MyOtherComponent = () =>
+  <LinkFromString
+    onClick={(e: React.MouseEvent<HTMLAnchorElement>) => undefined}
+  />;
+
+// Create a <LinkFromStringWithProps> react component that renders an <a>
+// which takes extra props
+type LinkProps = {canClick: boolean};
+const LinkFromStringWithProps = styled("a")`
+  font-size: 1.5em;
+  text-align: center;
+  color: ${(a: LinkProps) => a.canClick ? "palevioletred" : "gray"};
+`;
+
+// A LinkFromStringWithProps instance should be backed by an HTMLAnchorElement
+const MyOtherComponentWithProps = () =>
+  <LinkFromStringWithProps
+    canClick={false}
+    onClick={(e: React.MouseEvent<HTMLAnchorElement>) => undefined}
+  />;
+
+// Create a <LinkFromStringWithPropsAndGenerics> react component that renders an <a>
+// which takes extra props passed as a generic type argument
+const LinkFromStringWithPropsAndGenerics = styled<LinkProps, "a">("a")`
+  font-size: 1.5em;
+  text-align: center;
+  color: ${a => a.canClick ? "palevioletred" : "gray"};
+`;
+
+// A LinkFromStringWithPropsAndGenerics instance should be backed by an HTMLAnchorElement
+const MyOtherComponentWithPropsAndGenerics = () =>
+  <LinkFromStringWithPropsAndGenerics
+    canClick={false}
+    onClick={(e: React.MouseEvent<HTMLAnchorElement>) => undefined}
+  />;

package/typings/tests/themed-tests/issue1068.tsx

@@ -0,0 +1,226 @@
+import * as React from "react";
+import styled, { MyTheme } from "./mytheme-styled-components";
+
+interface OptionalProps {
+    text?: string;
+}
+interface ThemedOptionalProps extends OptionalProps {
+    theme: MyTheme;
+}
+interface RequiredProps {
+    text: string;
+}
+interface ThemedRequiredProps extends RequiredProps {
+    theme: MyTheme;
+}
+
+declare const theme: MyTheme;
+
+// Tests of stateless functional components
+function statelessFunctionalComponents() {
+
+    function optionalProps() {
+        const Component = (props: OptionalProps) => <div>{props.text}</div>;
+
+        const StyledComponent = styled(Component)``;
+        const StyledStyledComponent = styled(StyledComponent)``;
+
+        <Component />;
+        <Component text="test" />;
+        <StyledComponent text="test" />;
+        <StyledComponent text="test" theme={theme} />; // theme is allowed
+        <StyledStyledComponent text="test" />;
+        <StyledStyledComponent text="test" theme={theme} />; // theme is allowed
+    }
+
+    function optionalPropsWithRequiredTheme() {
+        const Component = (props: ThemedOptionalProps) => <div>{props.text}</div>;
+
+        const StyledComponent = styled(Component)``;
+        const StyledStyledComponent = styled(StyledComponent)``;
+
+        <Component theme={theme} />; // theme is required
+        <Component text="test" theme={theme} />; // theme is required
+        <StyledComponent text="test" />; // theme is optional
+        <StyledComponent text="test" theme={theme} />; // theme is allowed
+        <StyledStyledComponent text="test" />; // theme is optional
+        <StyledStyledComponent text="test" theme={theme} />; // theme is allowed
+    }
+
+    function requiredProps() {
+        const Component = (props: RequiredProps) => <div>{props.text}</div>;
+
+        const StyledComponent = styled(Component)``;
+        const StyledStyledComponent = styled(StyledComponent)``;
+
+        // <Component />; // text required
+        <Component text="test" />;
+        // <StyledComponent />; // text required
+        <StyledComponent text="test" />;
+        <StyledComponent text="test" theme={theme} />; // theme is allowed
+        // <StyledStyledComponent />; // text allowed
+        <StyledStyledComponent text="test" />;
+        <StyledStyledComponent text="test" theme={theme} />; // theme is allowed
+    }
+
+    function requiredPropsWithRequiredTheme() {
+        const Component = (props: ThemedRequiredProps) => <div>{props.text}</div>;
+
+        const StyledComponent = styled(Component)``;
+        const StyledStyledComponent = styled(StyledComponent)``;
+
+        // <Component theme={theme} />; // theme is required
+        <Component text="test" theme={theme} />; // theme is required
+        // <StyledComponent />; // text required
+        <StyledComponent text="test" />; // theme is optional
+        <StyledComponent text="test" theme={theme} />; // theme is allowed
+        // <StyledStyledComponent />; // text required
+        <StyledStyledComponent text="test" />; // theme is optional
+        <StyledStyledComponent text="test" theme={theme} />; // theme is allowed
+    }
+
+}
+
+// Tests of pure components
+function pureComponents() {
+
+    function optionalProps() {
+        class Component extends React.PureComponent<OptionalProps> {
+            render() { return <div>{this.props.text}</div>; }
+        }
+
+        const StyledComponent = styled(Component)``;
+        const StyledStyledComponent = styled(StyledComponent)``;
+
+        <Component />;
+        <Component text="test" />;
+        <StyledComponent text="test" />;
+        <StyledComponent text="test" theme={theme} />; // theme is allowed
+        <StyledStyledComponent text="test" />;
+        <StyledStyledComponent text="test" theme={theme} />; // theme is allowed
+    }
+
+    function optionalPropsWithRequiredTheme() {
+        class Component extends React.PureComponent<ThemedOptionalProps> {
+            render() { return <div>{this.props.text}</div>; }
+        }
+
+        const StyledComponent = styled(Component)``;
+        const StyledStyledComponent = styled(StyledComponent)``;
+
+        <Component theme={theme} />; // theme is required
+        <Component text="test" theme={theme} />; // theme is required
+        <StyledComponent text="test" />; // theme is optional
+        <StyledComponent text="test" theme={theme} />; // theme is allowed
+        <StyledStyledComponent text="test" />; // theme is optional
+        <StyledStyledComponent text="test" theme={theme} />; // theme is allowed
+    }
+
+    function requiredProps() {
+        class Component extends React.PureComponent<RequiredProps> {
+            render() { return <div>{this.props.text}</div>; }
+        }
+
+        const StyledComponent = styled(Component)``;
+        const StyledStyledComponent = styled(StyledComponent)``;
+
+        // <Component />; // text required
+        <Component text="test" />;
+        // <StyledComponent />; // text required
+        <StyledComponent text="test" />;
+        <StyledComponent text="test" theme={theme} />; // theme is allowed
+        // <StyledStyledComponent />; // text allowed
+        <StyledStyledComponent text="test" />;
+        <StyledStyledComponent text="test" theme={theme} />; // theme is allowed
+    }
+
+    function requiredPropsWithRequiredTheme() {
+        class Component extends React.PureComponent<ThemedRequiredProps> {
+            render() { return <div>{this.props.text}</div>; }
+        }
+
+        const StyledComponent = styled(Component)``;
+        const StyledStyledComponent = styled(StyledComponent)``;
+
+        // <Component theme={theme} />; // theme is required
+        <Component text="test" theme={theme} />; // theme is required
+        // <StyledComponent />; // text required
+        <StyledComponent text="test" />; // theme is optional
+        <StyledComponent text="test" theme={theme} />; // theme is allowed
+        // <StyledStyledComponent />; // text required
+        <StyledStyledComponent text="test" />; // theme is optional
+        <StyledStyledComponent text="test" theme={theme} />; // theme is allowed
+    }
+}
+
+// Tests of classic components
+function classicComponents() {
+
+    function optionalProps() {
+        class Component extends React.Component<OptionalProps> {
+            render() { return <div>{this.props.text}</div>; }
+        }
+
+        const StyledComponent = styled(Component)``;
+        const StyledStyledComponent = styled(StyledComponent)``;
+
+        <Component />;
+        <Component text="test" />;
+        <StyledComponent text="test" />;
+        <StyledComponent text="test" theme={theme} />; // theme is allowed
+        <StyledStyledComponent text="test" />;
+        <StyledStyledComponent text="test" theme={theme} />; // theme is allowed
+    }
+
+    function optionalPropsWithRequiredTheme() {
+        class Component extends React.Component<ThemedOptionalProps> {
+            render() { return <div>{this.props.text}</div>; }
+        }
+
+        const StyledComponent = styled(Component)``;
+        const StyledStyledComponent = styled(StyledComponent)``;
+
+        <Component theme={theme} />; // theme is required
+        <Component text="test" theme={theme} />; // theme is required
+        <StyledComponent text="test" />; // theme is optional
+        <StyledComponent text="test" theme={theme} />; // theme is allowed
+        <StyledStyledComponent text="test" />; // theme is optional
+        <StyledStyledComponent text="test" theme={theme} />; // theme is allowed
+    }
+
+    function requiredProps() {
+        class Component extends React.Component<RequiredProps> {
+            render() { return <div>{this.props.text}</div>; }
+        }
+
+        const StyledComponent = styled(Component)``;
+        const StyledStyledComponent = styled(StyledComponent)``;
+
+        // <Component />; // text required
+        <Component text="test" />;
+        // <StyledComponent />; // text required
+        <StyledComponent text="test" />;
+        <StyledComponent text="test" theme={theme} />; // theme is allowed
+        // <StyledStyledComponent />; // text allowed
+        <StyledStyledComponent text="test" />;
+        <StyledStyledComponent text="test" theme={theme} />; // theme is allowed
+    }
+
+    function requiredPropsWithRequiredTheme() {
+        class Component extends React.Component<ThemedRequiredProps> {
+            render() { return <div>{this.props.text}</div>; }
+        }
+
+        const StyledComponent = styled(Component)``;
+        const StyledStyledComponent = styled(StyledComponent)``;
+
+        // <Component theme={theme} />; // theme is required
+        <Component text="test" theme={theme} />; // theme is required
+        // <StyledComponent />; // text required
+        <StyledComponent text="test" />; // theme is optional
+        <StyledComponent text="test" theme={theme} />; // theme is allowed
+        // <StyledStyledComponent />; // text required
+        <StyledStyledComponent text="test" />; // theme is optional
+        <StyledStyledComponent text="test" theme={theme} />; // theme is allowed
+    }
+}

package/typings/tests/themed-tests/mytheme-styled-components.tsx

@@ -17,7 +17,7 @@ const {
 } = styledComponents as ThemedStyledComponentsModule<MyTheme>;
 
 interface ThemeProps {
-  theme?: MyTheme;
+  theme: MyTheme;
 }
 
 export default styled;

package/typings/tests/themed-tests/with-theme-test.tsx

@@ -22,4 +22,5 @@ const text = "hey";
 
 const MyThemedComponent = withTheme(MyComponent);
 
-<MyThemedComponent text={text} />;
+<MyThemedComponent text={text} />; // ok
+<MyThemedComponent text={text} theme={theme} />; // ok

package/typings/tests/with-theme-test.tsx

@@ -0,0 +1,17 @@
+import * as React from "react";
+
+import styled, { withTheme } from "../..";
+
+interface Props {
+    theme: {
+        color: string;
+    };
+    text: string;
+}
+
+const Component = (props: Props) => <div style={{color: props.theme.color}}>{props.text}</div>;
+
+const ComponentWithTheme = withTheme(Component);
+
+<ComponentWithTheme text={"hi"} />; // ok
+<ComponentWithTheme text={"hi"} theme={{ color: "red" }} />; // ok

package/lib/constructors/test/injectGlobal.test.js

@@ -1,63 +0,0 @@
-'use strict';
-
-var _templateObject = _taggedTemplateLiteralLoose(['\n      html {\n        ', '\n      }\n    '], ['\n      html {\n        ', '\n      }\n    ']),
-    _templateObject2 = _taggedTemplateLiteralLoose(['\n      a {\n        ', '\n      }\n    '], ['\n      a {\n        ', '\n      }\n    ']),
-    _templateObject3 = _taggedTemplateLiteralLoose(['\n      ', '\n    '], ['\n      ', '\n    ']);
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _enzyme = require('enzyme');
-
-var _injectGlobal2 = require('../injectGlobal');
-
-var _injectGlobal3 = _interopRequireDefault(_injectGlobal2);
-
-var _stringifyRules = require('../../utils/stringifyRules');
-
-var _stringifyRules2 = _interopRequireDefault(_stringifyRules);
-
-var _css = require('../css');
-
-var _css2 = _interopRequireDefault(_css);
-
-var _utils = require('../../test/utils');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _taggedTemplateLiteralLoose(strings, raw) { strings.raw = raw; return strings; }
-
-var injectGlobal = (0, _injectGlobal3.default)(_stringifyRules2.default, _css2.default);
-
-var styled = (0, _utils.resetStyled)();
-var rule1 = 'width: 100%;';
-var rule2 = 'padding: 10px;';
-var rule3 = 'color: blue;';
-
-describe('injectGlobal', function () {
-  beforeEach(function () {
-    (0, _utils.resetStyled)();
-  });
-
-  it('should inject rules into the head', function () {
-    injectGlobal(_templateObject, rule1);
-    (0, _utils.expectCSSMatches)('\n      html {\n        ' + rule1 + '\n      }\n    ');
-  });
-
-  it('should non-destructively inject styles when called repeatedly', function () {
-    injectGlobal(_templateObject, rule1);
-
-    injectGlobal(_templateObject2, rule2);
-    (0, _utils.expectCSSMatches)('\n      html {\n        ' + rule1 + '\n      }\n      a {\n        ' + rule2 + '\n      }\n    ');
-  });
-
-  it('should non-destructively inject styles when called after a component', function () {
-    var Comp = styled.div(_templateObject3, rule3);
-    (0, _enzyme.shallow)(_react2.default.createElement(Comp, null));
-
-    injectGlobal(_templateObject, rule1);
-
-    (0, _utils.expectCSSMatches)('\n      .sc-a {}\n      .b {\n        ' + rule3 + '\n      }\n      html {\n        ' + rule1 + '\n      }\n    ');
-  });
-});

package/lib/constructors/test/keyframes.test.js

@@ -1,48 +0,0 @@
-'use strict';
-
-var _templateObject = _taggedTemplateLiteralLoose(['\n      0% {\n        opacity: 0;\n      }\n      100% {\n        opacity: 1;\n      }\n    '], ['\n      0% {\n        opacity: 0;\n      }\n      100% {\n        opacity: 1;\n      }\n    ']),
-    _templateObject2 = _taggedTemplateLiteralLoose(['', ''], ['', '']);
-
-var _keyframes2 = require('../keyframes');
-
-var _keyframes3 = _interopRequireDefault(_keyframes2);
-
-var _stringifyRules = require('../../utils/stringifyRules');
-
-var _stringifyRules2 = _interopRequireDefault(_stringifyRules);
-
-var _css = require('../css');
-
-var _css2 = _interopRequireDefault(_css);
-
-var _utils = require('../../test/utils');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _taggedTemplateLiteralLoose(strings, raw) { strings.raw = raw; return strings; }
-
-/**
- * Setup
- */
-var index = 0;
-var keyframes = (0, _keyframes3.default)(function () {
-  return 'keyframe_' + index++;
-}, _stringifyRules2.default, _css2.default);
-
-describe('keyframes', function () {
-  beforeEach(function () {
-    (0, _utils.resetStyled)();
-    index = 0;
-  });
-
-  it('should return its name', function () {
-    expect(keyframes(_templateObject)).toEqual('keyframe_0');
-  });
-
-  it('should insert the correct styles', function () {
-    var rules = '\n      0% {\n        opacity: 0;\n      }\n      100% {\n        opacity: 1;\n      }\n    ';
-
-    var name = keyframes(_templateObject2, rules);
-    (0, _utils.expectCSSMatches)('\n      @-webkit-keyframes ' + name + ' {\n        0% {\n          opacity: 0;\n        }\n        100% {\n          opacity: 1;\n        }\n      }\n\n      @keyframes ' + name + ' {\n        0% {\n          opacity: 0;\n        }\n        100% {\n          opacity: 1;\n        }\n      }\n    ');
-  });
-});