styled-components 2.1.1 → 2.2.1

package/lib/test/rehydration.test.js

@@ -1,306 +0,0 @@
-'use strict';
-
-var _templateObject = _taggedTemplateLiteralLoose(['\n        color: blue;\n      '], ['\n        color: blue;\n      ']),
-    _templateObject2 = _taggedTemplateLiteralLoose(['color: blue;'], ['color: blue;']),
-    _templateObject3 = _taggedTemplateLiteralLoose([''], ['']),
-    _templateObject4 = _taggedTemplateLiteralLoose(['color: red;'], ['color: red;']),
-    _templateObject5 = _taggedTemplateLiteralLoose(['color: green;'], ['color: green;']),
-    _templateObject6 = _taggedTemplateLiteralLoose(['\n        color: ', ';\n      '], ['\n        color: ', ';\n      ']),
-    _templateObject7 = _taggedTemplateLiteralLoose(['\n        body { color: tomato; }\n      '], ['\n        body { color: tomato; }\n      ']),
-    _templateObject8 = _taggedTemplateLiteralLoose(['color: tomato;'], ['color: tomato;']),
-    _templateObject9 = _taggedTemplateLiteralLoose(['\n        html { font-size: 16px; }\n      '], ['\n        html { font-size: 16px; }\n      ']),
-    _templateObject10 = _taggedTemplateLiteralLoose(['\n        body { background: papayawhip; }\n      '], ['\n        body { background: papayawhip; }\n      ']),
-    _templateObject11 = _taggedTemplateLiteralLoose(['\n        from { opacity: 0; }\n      '], ['\n        from { opacity: 0; }\n      ']),
-    _templateObject12 = _taggedTemplateLiteralLoose(['\n        from { opacity: 1; }\n      '], ['\n        from { opacity: 1; }\n      ']),
-    _templateObject13 = _taggedTemplateLiteralLoose(['animation: ', ' 1s both;'], ['animation: ', ' 1s both;']);
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _enzyme = require('enzyme');
-
-var _utils = require('./utils');
-
-var _injectGlobal2 = require('../constructors/injectGlobal');
-
-var _injectGlobal3 = _interopRequireDefault(_injectGlobal2);
-
-var _stringifyRules = require('../utils/stringifyRules');
-
-var _stringifyRules2 = _interopRequireDefault(_stringifyRules);
-
-var _css = require('../constructors/css');
-
-var _css2 = _interopRequireDefault(_css);
-
-var _keyframes2 = require('../constructors/keyframes');
-
-var _keyframes3 = _interopRequireDefault(_keyframes2);
-
-var _StyleSheet = require('../models/StyleSheet');
-
-var _StyleSheet2 = _interopRequireDefault(_StyleSheet);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _taggedTemplateLiteralLoose(strings, raw) { strings.raw = raw; return strings; }
-
-var keyframes = (0, _keyframes3.default)(function (hash) {
-  return 'keyframe_' + hash % 1000;
-}, _stringifyRules2.default, _css2.default);
-var injectGlobal = (0, _injectGlobal3.default)(_stringifyRules2.default, _css2.default);
-
-var getStyleTags = function getStyleTags() {
-  return Array.from(document.querySelectorAll('style')).map(function (el) {
-    return {
-      isLocal: el.getAttribute('data-styled-components-is-local'),
-      css: el.innerHTML.trim().replace(/\s+/mg, ' ')
-    };
-  });
-};
-
-var styled = void 0;
-
-describe('rehydration', function () {
-  /**
-   * Make sure the setup is the same for every test
-   */
-  beforeEach(function () {
-    styled = (0, _utils.resetStyled)();
-  });
-
-  describe('with existing styled components', function () {
-    beforeEach(function () {
-      /* Hash 1323611362 is based on name TWO and contents color: red.
-       * Change either and this will break. */
-      document.head.innerHTML = '\n        <style ' + _StyleSheet.SC_ATTR + '=\'b\' ' + _StyleSheet.LOCAL_ATTR + '=\'true\'>\n          /* sc-component-id: TWO */\n          .TWO {}\n          .b { color: red; }\n        </style>\n      ';
-      _StyleSheet2.default.reset();
-    });
-
-    it('should preserve the styles', function () {
-      (0, _utils.expectCSSMatches)('.TWO {} .b { color: red; }');
-    });
-
-    it('should append a new component like normal', function () {
-      var Comp = styled.div.withConfig({ componentId: 'ONE' })(_templateObject);
-      (0, _enzyme.shallow)(_react2.default.createElement(Comp, null));
-      (0, _utils.expectCSSMatches)('.TWO {} .b { color: red; } .ONE { } .a { color: blue; }');
-    });
-
-    it('should reuse a componentId', function () {
-      var A = styled.div.withConfig({ componentId: 'ONE' })(_templateObject2);
-      (0, _enzyme.shallow)(_react2.default.createElement(A, null));
-      var B = styled.div.withConfig({ componentId: 'TWO' })(_templateObject3);
-      (0, _enzyme.shallow)(_react2.default.createElement(B, null));
-      (0, _utils.expectCSSMatches)('.TWO {} .b { color: red; } .ONE { } .a { color: blue; }');
-    });
-
-    it('should reuse a componentId and generated class', function () {
-      var A = styled.div.withConfig({ componentId: 'ONE' })(_templateObject2);
-      (0, _enzyme.shallow)(_react2.default.createElement(A, null));
-      var B = styled.div.withConfig({ componentId: 'TWO' })(_templateObject4);
-      (0, _enzyme.shallow)(_react2.default.createElement(B, null));
-      (0, _utils.expectCSSMatches)('.TWO {} .b { color: red; } .ONE { } .a { color: blue; }');
-    });
-
-    it('should reuse a componentId and inject new classes', function () {
-      var A = styled.div.withConfig({ componentId: 'ONE' })(_templateObject2);
-      (0, _enzyme.shallow)(_react2.default.createElement(A, null));
-      var B = styled.div.withConfig({ componentId: 'TWO' })(_templateObject4);
-      (0, _enzyme.shallow)(_react2.default.createElement(B, null));
-      var C = styled.div.withConfig({ componentId: 'TWO' })(_templateObject5);
-      (0, _enzyme.shallow)(_react2.default.createElement(C, null));
-      (0, _utils.expectCSSMatches)('.TWO {} .b { color: red; } .c { color: green; } .ONE { } .a { color: blue; }');
-    });
-  });
-
-  describe('with styled components with props', function () {
-    beforeEach(function () {
-      /* Hash 1323611362 is based on name TWO and contents color: red.
-       * Change either and this will break. */
-      document.head.innerHTML = '\n        <style ' + _StyleSheet.SC_ATTR + '=\'a b\' ' + _StyleSheet.LOCAL_ATTR + '=\'true\'>\n          /* sc-component-id: ONE */\n          .ONE {}\n          .a { color: blue; }\n          /* sc-component-id: TWO */\n          .TWO {}\n          .b { color: red; }\n        </style>\n      ';
-      _StyleSheet2.default.reset();
-    });
-
-    it('should preserve the styles', function () {
-      (0, _utils.expectCSSMatches)('\n        .ONE { } .a { color: blue; }\n        .TWO { } .b { color: red; }\n      ');
-    });
-
-    it('should not inject new styles for a component already rendered', function () {
-      var Comp = styled.div.withConfig({ componentId: 'ONE' })(_templateObject6, function (props) {
-        return props.color;
-      });
-      (0, _enzyme.shallow)(_react2.default.createElement(Comp, { color: 'blue' }));
-      (0, _utils.expectCSSMatches)('\n        .ONE { } .a { color: blue; }\n        .TWO { } .b { color: red; }\n      ');
-    });
-
-    it('should inject new styles for a new computed style of a component', function () {
-      (0, _utils.seedNextClassnames)(['x']);
-      var Comp = styled.div.withConfig({ componentId: 'ONE' })(_templateObject6, function (props) {
-        return props.color;
-      });
-      (0, _enzyme.shallow)(_react2.default.createElement(Comp, { color: 'green' }));
-      (0, _utils.expectCSSMatches)('\n        .ONE { } .a { color: blue; } .x { color: green; }\n        .TWO { } .b { color: red; }\n      ');
-    });
-  });
-
-  describe('with inline styles that werent rendered by us', function () {
-    beforeEach(function () {
-      /* Same css as before, but without the data attributes we ignore it */
-      document.head.innerHTML = '\n        <style>\n          /* sc-component-id: TWO */\n          .TWO {}\n          .b { color: red; }\n        </style>\n      ';
-      _StyleSheet2.default.reset();
-    });
-
-    it('should leave the existing styles there', function () {
-      (0, _utils.expectCSSMatches)('.TWO {} .b { color: red; }');
-    });
-
-    it('should generate new classes, even if they have the same name', function () {
-      var A = styled.div.withConfig({ componentId: 'ONE' })(_templateObject2);
-      (0, _enzyme.shallow)(_react2.default.createElement(A, null));
-      var B = styled.div.withConfig({ componentId: 'TWO' })(_templateObject4);
-      (0, _enzyme.shallow)(_react2.default.createElement(B, null));
-      (0, _utils.expectCSSMatches)('.TWO {} .b { color: red; } .ONE { } .a { color: blue; } .TWO {} .b { color: red; } ');
-    });
-  });
-
-  describe('with global styles', function () {
-    beforeEach(function () {
-      /* Adding a non-local stylesheet with a hash 557410406 which is
-       * derived from "body { background: papayawhip; }" so be careful
-       * changing it. */
-      document.head.innerHTML = '\n        <style ' + _StyleSheet.SC_ATTR + ' ' + _StyleSheet.LOCAL_ATTR + '=\'false\'>\n          /* sc-component-id: sc-global-557410406 */\n          body { background: papayawhip; }\n        </style>\n        <style ' + _StyleSheet.SC_ATTR + '=\'b\' ' + _StyleSheet.LOCAL_ATTR + '=\'true\'>\n          /* sc-component-id: TWO */\n          .TWO {}\n          .b { color: red; }\n        </style>\n      ';
-      _StyleSheet2.default.reset();
-    });
-
-    it('should leave the existing styles there', function () {
-      (0, _utils.expectCSSMatches)('body { background: papayawhip; } .TWO {} .b { color: red; }');
-    });
-
-    it('should inject new global styles at the end', function () {
-      injectGlobal(_templateObject7);
-      (0, _utils.expectCSSMatches)('body { background: papayawhip; } .TWO {} .b { color: red; } body { color: tomato; }');
-
-      expect(getStyleTags()).toEqual([{ isLocal: 'false', css: '/* sc-component-id: sc-global-557410406 */ body { background: papayawhip; }' }, { isLocal: 'true', css: '/* sc-component-id: TWO */ .TWO {} .b { color: red; }' }, { isLocal: 'false', css: '/* sc-component-id: sc-global-2299393384 */ body{color: tomato;}' }]);
-    });
-
-    it('should interleave global and local styles', function () {
-      injectGlobal(_templateObject7);
-      var A = styled.div.withConfig({ componentId: 'ONE' })(_templateObject2);
-      (0, _enzyme.shallow)(_react2.default.createElement(A, null));
-
-      (0, _utils.expectCSSMatches)('body { background: papayawhip; } .TWO {} .b { color: red; } body { color: tomato; } .ONE { } .a { color: blue; }');
-      expect(getStyleTags()).toEqual([{ isLocal: 'false', css: '/* sc-component-id: sc-global-557410406 */ body { background: papayawhip; }' }, { isLocal: 'true', css: '/* sc-component-id: TWO */ .TWO {} .b { color: red; }' }, { isLocal: 'false', css: '/* sc-component-id: sc-global-2299393384 */ body{color: tomato;}' }, { isLocal: 'true', css: '/* sc-component-id: ONE */ .ONE {} .a{color: blue;}' }]);
-    });
-  });
-
-  describe('with all styles already rendered', function () {
-    var styleTags = void 0;
-    beforeEach(function () {
-      document.head.innerHTML = '\n        <style ' + _StyleSheet.SC_ATTR + ' ' + _StyleSheet.LOCAL_ATTR + '=\'false\'>\n           /* sc-component-id: sc-global-1455077013 */\n          html { font-size: 16px; }\n           /* sc-component-id: sc-global-557410406 */\n          body { background: papayawhip; }\n        </style>\n        <style ' + _StyleSheet.SC_ATTR + '=\'a b\' ' + _StyleSheet.LOCAL_ATTR + '=\'true\'>\n          /* sc-component-id: ONE */\n          .ONE {}\n          .a { color: blue; }\n          /* sc-component-id: TWO */\n          .TWO {}\n          .b { color: red; }\n        </style>\n      ';
-      styleTags = Array.from(document.querySelectorAll('style'));
-      _StyleSheet2.default.reset();
-    });
-
-    it('should not touch existing styles', function () {
-      (0, _utils.expectCSSMatches)('\n        html { font-size: 16px; }\n        body { background: papayawhip; }\n        .ONE { } .a { color: blue; }\n        .TWO { } .b { color: red; }\n      ');
-    });
-
-    it('should replace stylesheets on-demand', function () {
-      var tagsAfterReset = Array.from(document.querySelectorAll('style'));
-      expect(tagsAfterReset[0]).toBe(styleTags[0]);
-      expect(tagsAfterReset[1]).toBe(styleTags[1]);
-
-      /* Rerendering existing tags doesn't touch the DOM */
-      var A = styled.div.withConfig({ componentId: 'ONE' })(_templateObject2);
-      (0, _enzyme.shallow)(_react2.default.createElement(A, null));
-      var B = styled.div.withConfig({ componentId: 'TWO' })(_templateObject4);
-      (0, _enzyme.shallow)(_react2.default.createElement(B, null));
-      var styleTagsAfterRehydration = Array.from(document.querySelectorAll('style'));
-      expect(styleTagsAfterRehydration[0]).toBe(styleTags[0]);
-      expect(styleTagsAfterRehydration[1]).toBe(styleTags[1]);
-
-      /* Only when new components are introduced (or a previous component
-       * generates a new hash) does the style tag get replaced. */
-      var C = styled.div.withConfig({ componentId: 'THREE' })(_templateObject5);
-      (0, _enzyme.shallow)(_react2.default.createElement(C, null));
-      var styleTagsAfterAddition = Array.from(document.querySelectorAll('style'));
-
-      /* The first tag is unchanged */
-      expect(styleTagsAfterAddition[0]).toBe(styleTags[0]);
-      /* The local tag has been replaced */
-      expect(styleTagsAfterAddition[1]).not.toBe(styleTags[1]);
-      /* But it is identical, except for... */
-      expect(styleTagsAfterAddition[1].outerHTML).toEqual(styleTags[1].outerHTML
-      /* ...the new data attribute for the new classname "c"... */
-      .replace(new RegExp(_StyleSheet.SC_ATTR + '="a b"'), _StyleSheet.SC_ATTR + '="a b c"')
-      /* ...and the new CSS before the closing tag.  */
-      .replace(/(?=<\/style>)/, '\n/* sc-component-id: THREE */\n.THREE {}\n.c{color: green;}'));
-
-      /* Note: any future additions don't replace the style tag */
-      var D = styled.div.withConfig({ componentId: 'TWO' })(_templateObject8);
-      (0, _enzyme.shallow)(_react2.default.createElement(D, null));
-
-      expect(Array.from(document.querySelectorAll('style'))[1]).toBe(styleTagsAfterAddition[1]);
-
-      /* The point being, now we have a style tag we can inject new styles in the middle! */
-      (0, _utils.expectCSSMatches)('\n        html { font-size: 16px; }\n        body { background: papayawhip; }\n        .ONE { } .a { color: blue; }\n        .TWO { } .b { color: red; } .d { color: tomato; }\n        .THREE { } .c { color: green; }\n      ');
-    });
-
-    it('should not change styles if rendered in the same order they were created with', function () {
-      injectGlobal(_templateObject9);
-      injectGlobal(_templateObject10);
-      var A = styled.div.withConfig({ componentId: 'ONE' })(_templateObject2);
-      (0, _enzyme.shallow)(_react2.default.createElement(A, null));
-      var B = styled.div.withConfig({ componentId: 'TWO' })(_templateObject4);
-      (0, _enzyme.shallow)(_react2.default.createElement(B, null));
-
-      (0, _utils.expectCSSMatches)('\n        html { font-size: 16px; }\n        body { background: papayawhip; }\n        .ONE { } .a { color: blue; }\n        .TWO { } .b { color: red; }\n      ');
-    });
-
-    it('should still not change styles if rendered in a different order', function () {
-      var B = styled.div.withConfig({ componentId: 'TWO' })(_templateObject4);
-      (0, _enzyme.shallow)(_react2.default.createElement(B, null));
-      injectGlobal(_templateObject10);
-      var A = styled.div.withConfig({ componentId: 'ONE' })(_templateObject2);
-      (0, _enzyme.shallow)(_react2.default.createElement(A, null));
-      injectGlobal(_templateObject9);
-
-      (0, _utils.expectCSSMatches)('\n        html { font-size: 16px; }\n        body { background: papayawhip; }\n        .ONE { } .a { color: blue; }\n        .TWO { } .b { color: red; }\n      ');
-    });
-  });
-
-  describe('with keyframes', function () {
-    beforeEach(function () {
-      document.head.innerHTML = '\n        <style ' + _StyleSheet.SC_ATTR + '=\'keyframe_880\' ' + _StyleSheet.LOCAL_ATTR + '=\'false\'>\n          /* sc-component-id: sc-keyframes-keyframe_880 */\n          @-webkit-keyframes keyframe_880 {from {opacity: 0;}}@keyframes keyframe_880 {from {opacity: 0;}}\n        </style>\n      ';
-      _StyleSheet2.default.reset();
-    });
-
-    it('should not touch existing styles', function () {
-      (0, _utils.expectCSSMatches)('\n        @-webkit-keyframes keyframe_880 {from {opacity: 0;}}@keyframes keyframe_880 {from {opacity: 0;}}\n      ');
-    });
-
-    it('should not regenerate keyframes', function () {
-      keyframes(_templateObject11);
-      (0, _utils.expectCSSMatches)('\n        @-webkit-keyframes keyframe_880 {from {opacity: 0;}}@keyframes keyframe_880 {from {opacity: 0;}}\n      ');
-    });
-
-    it('should still inject new keyframes', function () {
-      keyframes(_templateObject12);
-      (0, _utils.expectCSSMatches)('\n        @-webkit-keyframes keyframe_880 {from {opacity: 0;}}@keyframes keyframe_880 {from {opacity: 0;}}\n        @-webkit-keyframes keyframe_144 {from {opacity: 1;}}@keyframes keyframe_144 {from {opacity: 1;}}\n      ');
-    });
-
-    it('should pass the keyframes name along as well', function () {
-      var fadeIn = keyframes(_templateObject11);
-      var A = styled.div(_templateObject13, fadeIn);
-      var fadeOut = keyframes(_templateObject12);
-      var B = styled.div(_templateObject13, fadeOut);
-      /* Purposely rendering out of order to make sure the output looks right */
-      (0, _enzyme.shallow)(_react2.default.createElement(B, null));
-      (0, _enzyme.shallow)(_react2.default.createElement(A, null));
-
-      (0, _utils.expectCSSMatches)('\n        @-webkit-keyframes keyframe_880 {from {opacity: 0;}}@keyframes keyframe_880 {from {opacity: 0;}}\n        .sc-a { } .d { -webkit-animation:keyframe_880 1s both; animation:keyframe_880 1s both; }\n        @-webkit-keyframes keyframe_144 {from {opacity: 1;}}@keyframes keyframe_144 {from {opacity: 1;}}\n        .sc-b { } .c { -webkit-animation:keyframe_144 1s both; animation:keyframe_144 1s both; }\n      ');
-    });
-  });
-});

package/lib/test/ssr.test.js

@@ -1,187 +0,0 @@
-'use strict';
-
-var _templateObject = _taggedTemplateLiteralLoose(['\n      color: red;\n    '], ['\n      color: red;\n    ']),
-    _templateObject2 = _taggedTemplateLiteralLoose(['\n      body { background: papayawhip; }\n    '], ['\n      body { background: papayawhip; }\n    ']),
-    _templateObject3 = _taggedTemplateLiteralLoose(['\n      color: blue;\n    '], ['\n      color: blue;\n    ']),
-    _templateObject4 = _taggedTemplateLiteralLoose(['html::before { content: \'Before both renders\'; }'], ['html::before { content: \'Before both renders\'; }']),
-    _templateObject5 = _taggedTemplateLiteralLoose(['html::before { content: \'During first render\'; }'], ['html::before { content: \'During first render\'; }']),
-    _templateObject6 = _taggedTemplateLiteralLoose(['html::before { content: \'Between renders\'; }'], ['html::before { content: \'Between renders\'; }']),
-    _templateObject7 = _taggedTemplateLiteralLoose(['html::before { content: \'During second render\'; }'], ['html::before { content: \'During second render\'; }']),
-    _templateObject8 = _taggedTemplateLiteralLoose(['html::before { content: \'After both renders\'; }'], ['html::before { content: \'After both renders\'; }']),
-    _templateObject9 = _taggedTemplateLiteralLoose(['\n      animation: ', ' 1s both;\n    '], ['\n      animation: ', ' 1s both;\n    ']),
-    _templateObject10 = _taggedTemplateLiteralLoose(['0% { opacity: 0; }'], ['0% { opacity: 0; }']);
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _server = require('react-dom/server');
-
-var _ServerStyleSheet = require('../models/ServerStyleSheet');
-
-var _ServerStyleSheet2 = _interopRequireDefault(_ServerStyleSheet);
-
-var _utils = require('./utils');
-
-var _injectGlobal2 = require('../constructors/injectGlobal');
-
-var _injectGlobal3 = _interopRequireDefault(_injectGlobal2);
-
-var _keyframes2 = require('../constructors/keyframes');
-
-var _keyframes3 = _interopRequireDefault(_keyframes2);
-
-var _stringifyRules = require('../utils/stringifyRules');
-
-var _stringifyRules2 = _interopRequireDefault(_stringifyRules);
-
-var _css = require('../constructors/css');
-
-var _css2 = _interopRequireDefault(_css);
-
-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 index = 0;
-var keyframes = (0, _keyframes3.default)(function () {
-  return 'keyframe_' + index++;
-}, _stringifyRules2.default, _css2.default);
-
-var styled = void 0;
-
-var format = function format(css) {
-  return (0, _utils.stripWhitespace)(css).replace(/ {/g, "{").replace(/(\*\/|[}>])/g, "$1\n").replace(/\n\s+/g, "\n");
-};
-
-describe('ssr', function () {
-  beforeEach(function () {
-    styled = (0, _utils.resetStyled)(true);
-  });
-
-  it('should extract the CSS in a simple case', function () {
-    var Heading = styled.h1(_templateObject);
-
-    var sheet = new _ServerStyleSheet2.default();
-    var html = (0, _server.renderToString)(sheet.collectStyles(_react2.default.createElement(
-      Heading,
-      null,
-      'Hello SSR!'
-    )));
-    var css = format(sheet.getStyleTags());
-
-    expect(html).toEqual('<h1 class="sc-a b" data-reactroot="" data-reactid="1" data-react-checksum="197727696">Hello SSR!</h1>');
-    expect(css).toEqual(format('\n      <style type="text/css" data-styled-components="b" data-styled-components-is-local="true">\n      /* sc-component-id: sc-a */\n      .sc-a {}\n      .b { color: red; }\n\n      </style>\n    '));
-  });
-
-  it('should extract both global and local CSS', function () {
-    injectGlobal(_templateObject2);
-    var Heading = styled.h1(_templateObject);
-
-    var sheet = new _ServerStyleSheet2.default();
-    var html = (0, _server.renderToString)(sheet.collectStyles(_react2.default.createElement(
-      Heading,
-      null,
-      'Hello SSR!'
-    )));
-    var css = format(sheet.getStyleTags());
-
-    expect(html).toEqual('<h1 class="sc-a b" data-reactroot="" data-reactid="1" data-react-checksum="197727696">Hello SSR!</h1>');
-    expect(css).toEqual(format('\n      <style type="text/css" data-styled-components="" data-styled-components-is-local="false">\n      /* sc-component-id: sc-global-2303210225 */\n      body { background: papayawhip; }\n\n      </style>\n      <style type="text/css" data-styled-components="b" data-styled-components-is-local="true">\n      /* sc-component-id: sc-a */\n      .sc-a {}\n      .b { color: red; }\n\n      </style>\n    '));
-  });
-
-  it('should render CSS in the order the components were defined, not rendered', function () {
-    var ONE = styled.h1.withConfig({ componentId: 'ONE' })(_templateObject);
-    var TWO = styled.h2.withConfig({ componentId: 'TWO' })(_templateObject3);
-
-    var sheet = new _ServerStyleSheet2.default();
-    var html = (0, _server.renderToString)(sheet.collectStyles(_react2.default.createElement(
-      'div',
-      null,
-      _react2.default.createElement(TWO, null),
-      _react2.default.createElement(ONE, null)
-    )));
-    var css = format(sheet.getStyleTags());
-
-    expect(html).toEqual('<div data-reactroot="" data-reactid="1" data-react-checksum="275982144"><h2 class="TWO a" data-reactid="2"></h2><h1 class="ONE b" data-reactid="3"></h1></div>');
-    expect(css).toEqual(format('\n      <style type="text/css" data-styled-components="a b" data-styled-components-is-local="true">\n      /* sc-component-id: ONE */\n      .ONE {}\n      .b {color: red;}\n      /* sc-component-id: TWO */\n      .TWO {}\n      .a {color: blue;}\n\n      </style>\n    '));
-  });
-
-  it('should share global styles but keep renders separate', function () {
-    injectGlobal(_templateObject2);
-    var PageOne = styled.h1.withConfig({ componentId: 'PageOne' })(_templateObject);
-    var PageTwo = styled.h2.withConfig({ componentId: 'PageTwo' })(_templateObject3);
-
-    var sheetOne = new _ServerStyleSheet2.default();
-    var htmlOne = (0, _server.renderToString)(sheetOne.collectStyles(_react2.default.createElement(
-      PageOne,
-      null,
-      'Camera One!'
-    )));
-    var cssOne = format(sheetOne.getStyleTags());
-
-    var sheetTwo = new _ServerStyleSheet2.default();
-    var htmlTwo = (0, _server.renderToString)(sheetTwo.collectStyles(_react2.default.createElement(
-      PageTwo,
-      null,
-      'Camera Two!'
-    )));
-    var cssTwo = format(sheetTwo.getStyleTags());
-
-    expect(htmlOne).toEqual('<h1 class="PageOne a" data-reactroot="" data-reactid="1" data-react-checksum="2014320521">Camera One!</h1>');
-    expect(cssOne).toEqual(format('\n      <style type="text/css" data-styled-components="" data-styled-components-is-local="false">\n      /* sc-component-id: sc-global-2303210225 */\n      body { background: papayawhip; }\n      </style>\n      <style type="text/css" data-styled-components="a" data-styled-components-is-local="true">\n      /* sc-component-id: PageOne */\n      .PageOne {}\n      .a { color: red; }\n      </style>\n    '));
-
-    expect(htmlTwo).toEqual('<h2 class="PageTwo b" data-reactroot="" data-reactid="1" data-react-checksum="2124224444">Camera Two!</h2>');
-    expect(cssTwo).toEqual(format('\n      <style type="text/css" data-styled-components="" data-styled-components-is-local="false">\n      /* sc-component-id: sc-global-2303210225 */\n      body { background: papayawhip; }\n      </style>\n      <style type="text/css" data-styled-components="b" data-styled-components-is-local="true">\n      /* sc-component-id: PageTwo */\n      .PageTwo {}\n      .b { color: blue; }\n      </style>\n    '));
-  });
-
-  it('should allow global styles to be injected during rendering', function () {
-    injectGlobal(_templateObject4);
-    var PageOne = styled.h1.withConfig({ componentId: 'PageOne' })(_templateObject);
-    var PageTwo = styled.h2.withConfig({ componentId: 'PageTwo' })(_templateObject3);
-
-    var sheetOne = new _ServerStyleSheet2.default();
-    var htmlOne = (0, _server.renderToString)(sheetOne.collectStyles(_react2.default.createElement(
-      PageOne,
-      null,
-      'Camera One!'
-    )));
-    injectGlobal(_templateObject5);
-    var cssOne = format(sheetOne.getStyleTags());
-
-    injectGlobal(_templateObject6);
-
-    var sheetTwo = new _ServerStyleSheet2.default();
-    injectGlobal(_templateObject7);
-    var htmlTwo = (0, _server.renderToString)(sheetTwo.collectStyles(_react2.default.createElement(
-      PageTwo,
-      null,
-      'Camera Two!'
-    )));
-    var cssTwo = format(sheetTwo.getStyleTags());
-
-    injectGlobal(_templateObject8);
-
-    expect(htmlOne).toEqual('<h1 class="PageOne a" data-reactroot="" data-reactid="1" data-react-checksum="2014320521">Camera One!</h1>');
-    expect(cssOne).toEqual(format('\n      <style type="text/css" data-styled-components="" data-styled-components-is-local="false">\n      /* sc-component-id: sc-global-737874422 */\n      html::before { content: \'Before both renders\'; }\n      </style>\n      <style type="text/css" data-styled-components="a" data-styled-components-is-local="true">\n      /* sc-component-id: PageOne */\n      .PageOne {}\n      .a { color: red; }\n      </style>\n      <style type="text/css" data-styled-components="" data-styled-components-is-local="false">\n      /* sc-component-id: sc-global-2914197427 */\n      html::before { content: \'During first render\'; }\n      </style>\n    '));
-
-    expect(htmlTwo).toEqual('<h2 class="PageTwo b" data-reactroot="" data-reactid="1" data-react-checksum="2124224444">Camera Two!</h2>');
-    expect(cssTwo).toEqual(format('\n      <style type="text/css" data-styled-components="" data-styled-components-is-local="false">\n      /* sc-component-id: sc-global-737874422 */\n      html::before { content: \'Before both renders\'; }\n      </style>\n      <style type="text/css" data-styled-components="b" data-styled-components-is-local="true">\n      /* sc-component-id: PageTwo */\n      .PageTwo {}\n      .b { color: blue; }\n      </style>\n      <style type="text/css" data-styled-components="" data-styled-components-is-local="false">\n      /* sc-component-id: sc-global-2914197427 */\n      html::before { content: \'During first render\'; }\n      /* sc-component-id: sc-global-1207956261 */\n      html::before { content: \'Between renders\'; }\n      /* sc-component-id: sc-global-3990873394 */\n      html::before { content: \'During second render\'; }\n      </style>\n    '));
-  });
-
-  it('should dispatch global styles to each ServerStyleSheet', function () {
-    injectGlobal(_templateObject2);
-    var Header = styled.h1.withConfig({ componentId: 'Header' })(_templateObject9, function (props) {
-      return props.animation;
-    });
-
-    var sheet = new _ServerStyleSheet2.default();
-    var html = (0, _server.renderToString)(sheet.collectStyles(_react2.default.createElement(Header, { animation: keyframes(_templateObject10) })));
-    var css = format(sheet.getStyleTags());
-
-    expect(html).toEqual('<h1 class="Header a" data-reactroot="" data-reactid="1" data-react-checksum="1829114759"></h1>');
-    expect(css).toEqual(format('\n      <style type="text/css" data-styled-components="" data-styled-components-is-local="false">\n      /* sc-component-id: sc-global-2303210225 */\n      body { background: papayawhip; }\n      </style>\n      <style type="text/css" data-styled-components="a" data-styled-components-is-local="true">\n      /* sc-component-id: Header */\n      .Header {}\n      .a { -webkit-animation:keyframe_0 1s both; animation:keyframe_0 1s both; }\n      /* sc-component-id: sc-keyframes-keyframe_0 */\n      @-webkit-keyframes keyframe_0 {0% {opacity: 0;}}@keyframes keyframe_0 {0% {opacity: 0;}}\n      </style>\n    '));
-  });
-});

package/lib/test/styles.test.js

@@ -1,146 +0,0 @@
-'use strict';
-
-var _templateObject = _taggedTemplateLiteralLoose(['\n        ', '\n      '], ['\n        ', '\n      ']),
-    _templateObject2 = _taggedTemplateLiteralLoose(['\n        ', '\n        ', '\n      '], ['\n        ', '\n        ', '\n      ']),
-    _templateObject3 = _taggedTemplateLiteralLoose(['\n      ', '\n    '], ['\n      ', '\n    ']);
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _enzyme = require('enzyme');
-
-var _utils = require('./utils');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _taggedTemplateLiteralLoose(strings, raw) { strings.raw = raw; return strings; }
-
-var styled = void 0;
-
-describe('with styles', function () {
-  /**
-   * Make sure the setup is the same for every test
-   */
-  beforeEach(function () {
-    styled = (0, _utils.resetStyled)();
-  });
-
-  it('should append a style', function () {
-    var rule = 'color: blue;';
-    var Comp = styled.div(_templateObject, rule);
-    (0, _enzyme.shallow)(_react2.default.createElement(Comp, null));
-    (0, _utils.expectCSSMatches)('.sc-a {} .b { color: blue; }');
-  });
-
-  it('should append multiple styles', function () {
-    var rule1 = 'color: blue;';
-    var rule2 = 'background: red;';
-    var Comp = styled.div(_templateObject2, rule1, rule2);
-    (0, _enzyme.shallow)(_react2.default.createElement(Comp, null));
-    (0, _utils.expectCSSMatches)('.sc-a {} .b { color: blue; background: red; }');
-  });
-
-  it('should handle inline style objects', function () {
-    var rule1 = {
-      backgroundColor: 'blue'
-    };
-    var Comp = styled.div(_templateObject, rule1);
-    (0, _enzyme.shallow)(_react2.default.createElement(Comp, null));
-    (0, _utils.expectCSSMatches)('.sc-a {} .b { background-color: blue; }');
-  });
-
-  it('should handle inline style objects with media queries', function () {
-    var rule1 = {
-      backgroundColor: 'blue',
-      '@media screen and (min-width: 250px)': {
-        backgroundColor: 'red'
-      }
-    };
-    var Comp = styled.div(_templateObject, rule1);
-    (0, _enzyme.shallow)(_react2.default.createElement(Comp, null));
-    (0, _utils.expectCSSMatches)('.sc-a {} .b { background-color: blue; } @media screen and (min-width: 250px) { .b { background-color: red; } }');
-  });
-
-  it('should handle inline style objects with pseudo selectors', function () {
-    var rule1 = {
-      backgroundColor: 'blue',
-      '&:hover': {
-        textDecoration: 'underline'
-      }
-    };
-    var Comp = styled.div(_templateObject3, rule1);
-    (0, _enzyme.shallow)(_react2.default.createElement(Comp, null));
-    (0, _utils.expectCSSMatches)('.sc-a {} .b { background-color: blue; } .b:hover { -webkit-text-decoration: underline; text-decoration: underline; }');
-  });
-
-  it('should handle inline style objects with pseudo selectors', function () {
-    var rule1 = {
-      backgroundColor: 'blue',
-      '&:hover': {
-        textDecoration: 'underline'
-      }
-    };
-    var Comp = styled.div(_templateObject3, rule1);
-    (0, _enzyme.shallow)(_react2.default.createElement(Comp, null));
-    (0, _utils.expectCSSMatches)('.sc-a {} .b { background-color: blue; } .b:hover { -webkit-text-decoration: underline; text-decoration: underline; }');
-  });
-
-  it('should handle inline style objects with nesting', function () {
-    var rule1 = {
-      backgroundColor: 'blue',
-      '> h1': {
-        color: 'white'
-      }
-    };
-    var Comp = styled.div(_templateObject3, rule1);
-    (0, _enzyme.shallow)(_react2.default.createElement(Comp, null));
-    (0, _utils.expectCSSMatches)('.sc-a {} .b { background-color: blue; } .b > h1 { color: white; }');
-  });
-
-  it('should handle inline style objects with contextual selectors', function () {
-    var rule1 = {
-      backgroundColor: 'blue',
-      'html.something &': {
-        color: 'white'
-      }
-    };
-    var Comp = styled.div(_templateObject3, rule1);
-    (0, _enzyme.shallow)(_react2.default.createElement(Comp, null));
-    (0, _utils.expectCSSMatches)('.sc-a {} .b { background-color: blue; } html.something .b { color: white; }');
-  });
-
-  it('should inject styles of multiple components', function () {
-    var firstRule = 'background: blue;';
-    var secondRule = 'background: red;';
-    var FirstComp = styled.div(_templateObject, firstRule);
-    var SecondComp = styled.div(_templateObject, secondRule);
-
-    (0, _enzyme.shallow)(_react2.default.createElement(FirstComp, null));
-    (0, _enzyme.shallow)(_react2.default.createElement(SecondComp, null));
-
-    (0, _utils.expectCSSMatches)('.sc-a {} .c { background: blue; } .sc-b {} .d { background: red; }');
-  });
-
-  it('should inject styles of multiple components based on creation, not rendering order', function () {
-    var firstRule = 'content: "first rule";';
-    var secondRule = 'content: "second rule";';
-    var FirstComp = styled.div(_templateObject, firstRule);
-    var SecondComp = styled.div(_templateObject, secondRule);
-
-    // Switch rendering order, shouldn't change injection order
-    (0, _enzyme.shallow)(_react2.default.createElement(SecondComp, null));
-    (0, _enzyme.shallow)(_react2.default.createElement(FirstComp, null));
-
-    // Classes _do_ get generated in the order of rendering but that's ok
-    (0, _utils.expectCSSMatches)('\n        .sc-a {}\n        .d { content: "first rule"; }\n        .sc-b {}\n        .c { content: "second rule"; }\n      ');
-  });
-
-  it('should strip a JS-style (invalid) comment in the styles', function () {
-    var comment = '// This is an invalid comment';
-    var rule = 'color: blue;';
-    var Comp = styled.div(_templateObject2, comment, rule);
-    (0, _enzyme.shallow)(_react2.default.createElement(Comp, null));
-    (0, _utils.expectCSSMatches)('\n        .sc-a {}\n        .b {\n          color: blue;\n        }\n      ');
-  });
-});