styled-components 2.1.1 → 2.2.1

package/lib/constructors/test/styled.test.js

@@ -1,19 +0,0 @@
-'use strict';
-
-var _index = require('../../index');
-
-var _index2 = _interopRequireDefault(_index);
-
-var _domElements = require('../../utils/domElements');
-
-var _domElements2 = _interopRequireDefault(_domElements);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-describe('styled', function () {
-  it('should have all valid HTML5 elements defined as properties', function () {
-    _domElements2.default.forEach(function (domElement) {
-      expect(_index2.default[domElement]).toBeTruthy();
-    });
-  });
-});

package/lib/models/AbstractStyledComponent.js

@@ -1,43 +0,0 @@
-'use strict';
-
-exports.__esModule = true;
-
-var _AbstractStyledCompon;
-
-var _react = require('react');
-
-var _propTypes = require('prop-types');
-
-var _propTypes2 = _interopRequireDefault(_propTypes);
-
-var _ThemeProvider = require('./ThemeProvider');
-
-var _StyleSheet = require('./StyleSheet');
-
-var _StyleSheet2 = _interopRequireDefault(_StyleSheet);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var AbstractStyledComponent = function (_Component) {
-  _inherits(AbstractStyledComponent, _Component);
-
-  function AbstractStyledComponent() {
-    _classCallCheck(this, AbstractStyledComponent);
-
-    return _possibleConstructorReturn(this, _Component.apply(this, arguments));
-  }
-
-  return AbstractStyledComponent;
-}(_react.Component);
-
-exports.default = AbstractStyledComponent;
-
-
-AbstractStyledComponent.contextTypes = (_AbstractStyledCompon = {}, _AbstractStyledCompon[_ThemeProvider.CHANNEL] = _propTypes2.default.func, _AbstractStyledCompon[_StyleSheet.CONTEXT_KEY] = _propTypes2.default.instanceOf(_StyleSheet2.default), _AbstractStyledCompon);
-module.exports = exports['default'];

package/lib/models/test/ThemeProvider.test.js

@@ -1,200 +0,0 @@
-'use strict';
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _propTypes = require('prop-types');
-
-var _propTypes2 = _interopRequireDefault(_propTypes);
-
-var _enzyme = require('enzyme');
-
-var _ThemeProvider = require('../ThemeProvider');
-
-var _ThemeProvider2 = _interopRequireDefault(_ThemeProvider);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-/* eslint-disable react/no-multi-comp */
-
-
-describe('ThemeProvider', function () {
-  it('should not throw an error when no children are passed', function () {
-    var result = (0, _enzyme.shallow)(_react2.default.createElement(_ThemeProvider2.default, { theme: {} }));
-    expect(result.html()).toEqual(null);
-  });
-
-  it('should accept a theme prop that\'s a plain object', function () {
-    (0, _enzyme.shallow)(_react2.default.createElement(_ThemeProvider2.default, { theme: { main: 'black' } }));
-  });
-
-  it('should render its child', function () {
-    var child = _react2.default.createElement(
-      'p',
-      null,
-      'Child!'
-    );
-    var renderedComp = (0, _enzyme.shallow)(_react2.default.createElement(
-      _ThemeProvider2.default,
-      { theme: { main: 'black' } },
-      child
-    ));
-    expect(renderedComp.contains(child)).toEqual(true);
-  });
-
-  it('should merge its theme with an outer theme', function (done) {
-    var _Child$contextTypes;
-
-    var outerTheme = { main: 'black' };
-    var innerTheme = { secondary: 'black' };
-    // Setup Child
-
-    var Child = function (_React$Component) {
-      _inherits(Child, _React$Component);
-
-      function Child() {
-        _classCallCheck(this, Child);
-
-        return _possibleConstructorReturn(this, _React$Component.apply(this, arguments));
-      }
-
-      Child.prototype.componentWillMount = function componentWillMount() {
-        this.context[_ThemeProvider.CHANNEL](function (theme) {
-          expect(theme).toEqual(_extends({}, outerTheme, innerTheme));
-          done();
-        });
-      };
-
-      Child.prototype.render = function render() {
-        return null;
-      };
-
-      return Child;
-    }(_react2.default.Component);
-
-    Child.contextTypes = (_Child$contextTypes = {}, _Child$contextTypes[_ThemeProvider.CHANNEL] = _propTypes2.default.object, _Child$contextTypes);
-
-    (0, _enzyme.render)(_react2.default.createElement(
-      _ThemeProvider2.default,
-      { theme: outerTheme },
-      _react2.default.createElement(
-        _ThemeProvider2.default,
-        { theme: innerTheme },
-        _react2.default.createElement(Child, null)
-      )
-    ));
-  });
-
-  it('should merge its theme with multiple outer themes', function (done) {
-    var _Child$contextTypes2;
-
-    var outerestTheme = { main: 'black' };
-    var outerTheme = { main: 'blue' };
-    var innerTheme = { secondary: 'black' };
-    // Setup Child
-
-    var Child = function (_React$Component2) {
-      _inherits(Child, _React$Component2);
-
-      function Child() {
-        _classCallCheck(this, Child);
-
-        return _possibleConstructorReturn(this, _React$Component2.apply(this, arguments));
-      }
-
-      Child.prototype.componentWillMount = function componentWillMount() {
-        this.context[_ThemeProvider.CHANNEL](function (theme) {
-          expect(theme).toEqual(_extends({}, outerestTheme, outerTheme, innerTheme));
-          done();
-        });
-      };
-
-      Child.prototype.render = function render() {
-        return null;
-      };
-
-      return Child;
-    }(_react2.default.Component);
-
-    Child.contextTypes = (_Child$contextTypes2 = {}, _Child$contextTypes2[_ThemeProvider.CHANNEL] = _propTypes2.default.object, _Child$contextTypes2);
-
-    (0, _enzyme.render)(_react2.default.createElement(
-      _ThemeProvider2.default,
-      { theme: outerestTheme },
-      _react2.default.createElement(
-        _ThemeProvider2.default,
-        { theme: outerTheme },
-        _react2.default.createElement(
-          _ThemeProvider2.default,
-          { theme: innerTheme },
-          _react2.default.createElement(Child, null)
-        )
-      )
-    ));
-  });
-
-  it('should be able to render two independent themes', function (done) {
-    var _Child$contextTypes3;
-
-    var themes = {
-      one: { main: 'black', secondary: 'red' },
-      two: { main: 'blue', other: 'green' }
-    };
-    var childRendered = 0;
-    // Setup Child
-
-    var Child = function (_React$Component3) {
-      _inherits(Child, _React$Component3);
-
-      function Child() {
-        _classCallCheck(this, Child);
-
-        return _possibleConstructorReturn(this, _React$Component3.apply(this, arguments));
-      }
-
-      Child.prototype.componentWillMount = function componentWillMount() {
-        var _this4 = this;
-
-        this.context[_ThemeProvider.CHANNEL](function (theme) {
-          // eslint-disable-next-line react/prop-types
-          expect(theme).toEqual(themes[_this4.props.shouldHaveTheme]);
-          childRendered++; // eslint-disable-line no-plusplus
-          if (childRendered === Object.keys(themes).length) {
-            done();
-          }
-        });
-      };
-
-      Child.prototype.render = function render() {
-        return null;
-      };
-
-      return Child;
-    }(_react2.default.Component);
-
-    Child.contextTypes = (_Child$contextTypes3 = {}, _Child$contextTypes3[_ThemeProvider.CHANNEL] = _propTypes2.default.object, _Child$contextTypes3);
-
-    (0, _enzyme.render)(_react2.default.createElement(
-      'div',
-      null,
-      _react2.default.createElement(
-        _ThemeProvider2.default,
-        { theme: themes.one },
-        _react2.default.createElement(Child, { shouldHaveTheme: 'one' })
-      ),
-      _react2.default.createElement(
-        _ThemeProvider2.default,
-        { theme: themes.two },
-        _react2.default.createElement(Child, { shouldHaveTheme: 'two' })
-      )
-    ));
-  });
-});

package/lib/native/test/native.test.js

@@ -1,290 +0,0 @@
-'use strict';
-
-var _templateObject = _taggedTemplateLiteralLoose([''], ['']),
-    _templateObject2 = _taggedTemplateLiteralLoose(['\n      padding-top: 10;\n    '], ['\n      padding-top: 10;\n    ']),
-    _templateObject3 = _taggedTemplateLiteralLoose(['opacity: 0.9;'], ['opacity: 0.9;']),
-    _templateObject4 = _taggedTemplateLiteralLoose(['padding: 10px;'], ['padding: 10px;']),
-    _templateObject5 = _taggedTemplateLiteralLoose(['background-color: red;'], ['background-color: red;']),
-    _templateObject6 = _taggedTemplateLiteralLoose(['borderWidth: 10;'], ['borderWidth: 10;']);
-
-require('react-native');
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _index = require('../index');
-
-var _index2 = _interopRequireDefault(_index);
-
-var _enzyme = require('enzyme');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-function _taggedTemplateLiteralLoose(strings, raw) { strings.raw = raw; return strings; }
-
-// NOTE: These tests are like the ones for Web but a "light-version" of them
-// This is mostly due to the similar logic
-
-describe('native', function () {
-  it('should not throw an error when called', function () {
-    _index2.default.View(_templateObject);
-  });
-
-  it('should generate inline styles', function () {
-    var Comp = _index2.default.View(_templateObject);
-    var wrapper = (0, _enzyme.shallow)(_react2.default.createElement(Comp, null));
-    var view = wrapper.find('View').first();
-
-    expect(view.prop('style')).toEqual([{}, undefined]);
-  });
-
-  it('should combine inline styles and the style prop', function () {
-    var Comp = _index2.default.View(_templateObject2);
-
-    var style = { opacity: 0.9 };
-    var wrapper = (0, _enzyme.shallow)(_react2.default.createElement(Comp, { style: style }));
-    var view = wrapper.find('View').first();
-
-    expect(view.prop('style')).toEqual([{ paddingTop: 10 }, style]);
-  });
-
-  describe('extending', function () {
-    it('should combine styles of extending components', function () {
-      var Parent = _index2.default.View(_templateObject3);
-      var Child = Parent.extend(_templateObject4);
-
-      var parent = (0, _enzyme.shallow)(_react2.default.createElement(Parent, null));
-      var child = (0, _enzyme.shallow)(_react2.default.createElement(Child, null));
-
-      expect(parent.find('View').prop('style')).toEqual([{ opacity: 0.9 }, undefined]);
-
-      expect(child.find('View').prop('style')).toEqual([{
-        opacity: 0.9,
-        paddingTop: 10,
-        paddingRight: 10,
-        paddingBottom: 10,
-        paddingLeft: 10
-      }, undefined]);
-    });
-
-    it('should combine styles of extending components in >= 3 inheritances', function () {
-      var GrandGrandParent = _index2.default.View(_templateObject5);
-      var GrandParent = GrandGrandParent.extend(_templateObject6);
-      var Parent = GrandParent.extend(_templateObject3);
-      var Child = Parent.extend(_templateObject4);
-
-      var grandGrandParent = (0, _enzyme.shallow)(_react2.default.createElement(GrandGrandParent, null));
-      var grandParent = (0, _enzyme.shallow)(_react2.default.createElement(GrandParent, null));
-      var parent = (0, _enzyme.shallow)(_react2.default.createElement(Parent, null));
-      var child = (0, _enzyme.shallow)(_react2.default.createElement(Child, null));
-
-      expect(grandGrandParent.find('View').prop('style')).toEqual([{
-        backgroundColor: 'red'
-      }, undefined]);
-
-      expect(grandParent.find('View').prop('style')).toEqual([{
-        backgroundColor: 'red',
-        borderWidth: 10
-      }, undefined]);
-
-      expect(parent.find('View').prop('style')).toEqual([{
-        backgroundColor: 'red',
-        borderWidth: 10,
-        opacity: 0.9
-      }, undefined]);
-
-      expect(child.find('View').prop('style')).toEqual([{
-        backgroundColor: 'red',
-        borderWidth: 10,
-        opacity: 0.9,
-        paddingTop: 10,
-        paddingRight: 10,
-        paddingBottom: 10,
-        paddingLeft: 10
-      }, undefined]);
-    });
-  });
-
-  describe('attrs', function () {
-    it('works fine with an empty object', function () {
-      var Comp = _index2.default.View.attrs({})(_templateObject);
-      var wrapper = (0, _enzyme.shallow)(_react2.default.createElement(Comp, null));
-      var view = wrapper.find('View').first();
-
-      expect(view.props()).toEqual({
-        style: [{}, undefined]
-      });
-    });
-
-    it('passes simple props on', function () {
-      var Comp = _index2.default.View.attrs({
-        test: true
-      })(_templateObject);
-
-      var wrapper = (0, _enzyme.shallow)(_react2.default.createElement(Comp, null));
-      var view = wrapper.find('View').first();
-
-      expect(view.props()).toEqual({
-        style: [{}, undefined],
-        test: true
-      });
-    });
-
-    it('calls an attr-function with context', function () {
-      var Comp = _index2.default.View.attrs({
-        copy: function copy(props) {
-          return props.test;
-        }
-      })(_templateObject);
-
-      var test = 'Put that cookie down!';
-      var wrapper = (0, _enzyme.shallow)(_react2.default.createElement(Comp, { test: test }));
-      var view = wrapper.find('View').first();
-
-      expect(view.props()).toEqual({
-        style: [{}, undefined],
-        copy: test,
-        test: test
-      });
-    });
-
-    it('merges multiple calls', function () {
-      var Comp = _index2.default.View.attrs({
-        first: 'first',
-        test: '_'
-      }).attrs({
-        second: 'second',
-        test: 'test'
-      })(_templateObject);
-
-      var wrapper = (0, _enzyme.shallow)(_react2.default.createElement(Comp, null));
-      var view = wrapper.find('View').first();
-
-      expect(view.props()).toEqual({
-        style: [{}, undefined],
-        first: 'first',
-        second: 'second',
-        test: 'test'
-      });
-    });
-
-    it('merges attrs when inheriting SC', function () {
-      var Parent = _index2.default.View.attrs({
-        first: 'first'
-      })(_templateObject);
-
-      var Child = Parent.extend.attrs({
-        second: 'second'
-      })(_templateObject);
-
-      var wrapper = (0, _enzyme.shallow)(_react2.default.createElement(Child, null));
-      var view = wrapper.find('View').first();
-
-      expect(view.props()).toEqual({
-        style: [{}, undefined],
-        first: 'first',
-        second: 'second'
-      });
-    });
-  });
-
-  describe('expanded API', function () {
-    it('should attach a displayName', function () {
-      var Comp = _index2.default.View(_templateObject);
-      expect(Comp.displayName).toBe('Styled(View)');
-
-      var CompTwo = _index2.default.View.withConfig({ displayName: 'Test' })(_templateObject);
-      expect(CompTwo.displayName).toBe('Test');
-    });
-
-    it('should allow multiple calls to be chained', function () {
-      var Comp = _index2.default.View.withConfig({ displayName: 'Test1' }).withConfig({ displayName: 'Test2' })(_templateObject);
-
-      expect(Comp.displayName).toBe('Test2');
-    });
-  });
-
-  describe('innerRef', function () {
-    it('should pass the ref to the component', function () {
-      var Comp = _index2.default.View(_templateObject);
-      var ref = jest.fn();
-
-      var wrapper = (0, _enzyme.mount)(_react2.default.createElement(Comp, { innerRef: ref }));
-      var view = wrapper.find('View').first();
-      var comp = wrapper.find(Comp).first();
-
-      // $FlowFixMe
-      expect(ref).toHaveBeenCalledWith(view.node);
-      expect(view.prop('innerRef')).toBeFalsy();
-      expect(comp.node.root).toBeTruthy();
-    });
-
-    var InnerComponent = function (_React$Component) {
-      _inherits(InnerComponent, _React$Component);
-
-      function InnerComponent() {
-        _classCallCheck(this, InnerComponent);
-
-        return _possibleConstructorReturn(this, _React$Component.apply(this, arguments));
-      }
-
-      InnerComponent.prototype.render = function render() {
-        return null;
-      };
-
-      return InnerComponent;
-    }(_react2.default.Component);
-
-    it('should not leak the innerRef prop to the wrapped child', function () {
-      var OuterComponent = (0, _index2.default)(InnerComponent)(_templateObject);
-      var ref = jest.fn();
-
-      var wrapper = (0, _enzyme.mount)(_react2.default.createElement(OuterComponent, { innerRef: ref }));
-      var innerComponent = wrapper.find(InnerComponent).first();
-      var outerComponent = wrapper.find(OuterComponent).first();
-
-      // $FlowFixMe
-      expect(ref).toHaveBeenCalledWith(innerComponent.node);
-      expect(innerComponent.prop('innerRef')).toBeFalsy();
-      expect(outerComponent.node.root).toBeTruthy();
-    });
-
-    it('should pass the innerRef to the wrapped styled component', function () {
-      var InnerComponent = _index2.default.View(_templateObject);
-      var OuterComponent = (0, _index2.default)(InnerComponent)(_templateObject);
-      var ref = jest.fn();
-
-      var wrapper = (0, _enzyme.mount)(_react2.default.createElement(OuterComponent, { innerRef: ref }));
-      var view = wrapper.find('View').first();
-      var innerComponent = wrapper.find(InnerComponent).first();
-      var outerComponent = wrapper.find(OuterComponent).first();
-
-      // $FlowFixMe
-      expect(ref).toHaveBeenCalledWith(view.node);
-      expect(outerComponent.node.root).toBeTruthy();
-    });
-
-    it('should pass innerRef instead of ref to a wrapped stateless functional component', function () {
-      var InnerComponent = function InnerComponent() {
-        return null;
-      };
-      var OuterComponent = (0, _index2.default)(InnerComponent)(_templateObject);
-      // NOTE: A ref should always be passed, so we don't need to (setNativeProps feature)
-
-      var wrapper = (0, _enzyme.mount)(_react2.default.createElement(OuterComponent, null));
-      var outerComponent = wrapper.find(OuterComponent).first();
-      var innerComponent = wrapper.find(InnerComponent).first();
-
-      expect(innerComponent.prop('ref')).toBeFalsy();
-      expect(innerComponent.prop('innerRef')).toBeTruthy();
-      expect(outerComponent.node.root).toBeFalsy();
-    });
-  });
-});

package/lib/no-parser/test/basic.test.js

@@ -1,46 +0,0 @@
-'use strict';
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _enzyme = require('enzyme');
-
-var _utils = require('../../test/utils');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var styled = void 0;
-
-
-describe('basic', function () {
-  beforeEach(function () {
-    styled = (0, _utils.resetNoParserStyled)();
-  });
-
-  it('should throw a meaningful error when called with null', function () {
-    var invalidComps = [undefined, null, 123, []];
-    invalidComps.forEach(function (comp) {
-      expect(function () {
-        // $FlowInvalidInputTest
-        var Comp = styled(comp);
-        (0, _enzyme.shallow)(_react2.default.createElement(Comp, null));
-        // $FlowInvalidInputTest
-      }).toThrow('Cannot create styled-component for component: ' + comp);
-    });
-  });
-
-  it('should correctly assemble preprocessed CSS', function () {
-    var Comp = styled.div([['{ color: red; }']]);
-    (0, _enzyme.shallow)(_react2.default.createElement(Comp, null));
-    (0, _utils.expectCSSMatches)('.sc-a {} .b{ color: red; }');
-  });
-
-  it('should correctly execute passed functions and assemble preprocessed CSS', function () {
-    var Comp = styled.div([['{ color: ', function () {
-      return 'red';
-    }, '; }']]);
-    (0, _enzyme.shallow)(_react2.default.createElement(Comp, null));
-    (0, _utils.expectCSSMatches)('.sc-a {} .b{ color: red; }');
-  });
-});