Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

styled-components

Package Overview
Dependencies
Maintainers
2
Versions
358
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

styled-components - npm Package Compare versions

Comparing version 1.1.2-0 to 1.1.2

14

CHANGELOG.md

@@ -13,4 +13,13 @@ # Change Log

- Modify `StyleNativeComponent.js` so that `generateAndInjectStyles` is called outside of `render`, thanks to [@sheepsteak](https://github.com/sheepsteak). (see [#171](https://github.com/styled-components/styled-components/pull/171))
## [v1.1.2]
### Added
- Add `// @flow` to files missing them and fix ThemeProvider types, thanks to [@relekang](https://github.com/relekang). (see [#225](https://github.com/styled-components/styled-components/pull/225))
### Changed
- Fixed setting the default theme via `defaultProps` and theme changes not re-rendering components with new styles, thanks to [@michalkvasnicak](https://github.com/michalkvasnicak). (see [#253](https://github.com/styled-components/styled-components/pull/253))
- Improve ReactNative style generation performance, thanks to [@sheepsteak](https://github.com/sheepsteak). (see [#171](https://github.com/styled-components/styled-components/pull/171))
## [v1.1.1]

@@ -112,3 +121,4 @@

[Unreleased]: https://github.com/styled-components/styled-components/compare/v1.1.1...master
[Unreleased]: https://github.com/styled-components/styled-components/compare/v1.1.2...master
[v1.1.2]: https://github.com/styled-components/styled-components/compare/v1.1.1...v1.1.2
[v1.1.1]: https://github.com/styled-components/styled-components/compare/v1.1.0...v1.1.1

@@ -115,0 +125,0 @@ [v1.1.0]: https://github.com/styled-components/styled-components/compare/v1.0.11...v1.1.0

1

docs/flow-support.md

@@ -67,3 +67,2 @@ # Flow Support

node_modules/styled-components/flow-typed/lodash_v4.x.x.js
node_modules/styled-components/flow-typed/react-native.js
node_modules/styled-components/flow-typed/inline-style-prefixer_vx.x.x.js

@@ -70,0 +69,0 @@

2

flow-typed/npm/css-to-react-native_v1.x.x.js
declare module 'css-to-react-native' {
declare module.exports: ([string, string])[] => { [key:string]: string }
declare module.exports: ([string, string])[] => { [key:string]: any }
}

4

lib/constructors/css.js

@@ -17,2 +17,6 @@ 'use strict';

var babelPluginFlowReactPropTypes_proptype_RuleSet = require('../types').babelPluginFlowReactPropTypes_proptype_RuleSet || require('react').PropTypes.any;
var babelPluginFlowReactPropTypes_proptype_Interpolation = require('../types').babelPluginFlowReactPropTypes_proptype_Interpolation || require('react').PropTypes.any;
exports.default = function (strings) {

@@ -19,0 +23,0 @@ for (var _len = arguments.length, interpolations = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {

2

lib/constructors/injectGlobal.js

@@ -17,2 +17,4 @@ 'use strict';

var babelPluginFlowReactPropTypes_proptype_Interpolation = require('../types').babelPluginFlowReactPropTypes_proptype_Interpolation || require('react').PropTypes.any;
var injectGlobal = function injectGlobal(strings) {

@@ -19,0 +21,0 @@ for (var _len = arguments.length, interpolations = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {

4

lib/constructors/keyframes.js

@@ -21,2 +21,6 @@ 'use strict';

var babelPluginFlowReactPropTypes_proptype_NameGenerator = require('../types').babelPluginFlowReactPropTypes_proptype_NameGenerator || require('react').PropTypes.any;
var babelPluginFlowReactPropTypes_proptype_Interpolation = require('../types').babelPluginFlowReactPropTypes_proptype_Interpolation || require('react').PropTypes.any;
var replaceWhitespace = function replaceWhitespace(str) {

@@ -23,0 +27,0 @@ return str.replace(/\s|\\n/g, '');

4

lib/constructors/styled.js

@@ -13,2 +13,6 @@ 'use strict';

var babelPluginFlowReactPropTypes_proptype_Target = require('../types').babelPluginFlowReactPropTypes_proptype_Target || require('react').PropTypes.any;
var babelPluginFlowReactPropTypes_proptype_Interpolation = require('../types').babelPluginFlowReactPropTypes_proptype_Interpolation || require('react').PropTypes.any;
exports.default = function (styledComponent) {

@@ -15,0 +19,0 @@ var styled = function styled(tag) {

4

lib/models/ComponentStyle.js

@@ -37,2 +37,6 @@ 'use strict';

var babelPluginFlowReactPropTypes_proptype_NameGenerator = require('../types').babelPluginFlowReactPropTypes_proptype_NameGenerator || require('react').PropTypes.any;
var babelPluginFlowReactPropTypes_proptype_RuleSet = require('../types').babelPluginFlowReactPropTypes_proptype_RuleSet || require('react').PropTypes.any;
/*

@@ -39,0 +43,0 @@ ComponentStyle is all the CSS-specific stuff, not

2

lib/models/GlobalStyle.js

@@ -29,2 +29,4 @@ 'use strict';

var babelPluginFlowReactPropTypes_proptype_RuleSet = require('../types').babelPluginFlowReactPropTypes_proptype_RuleSet || require('react').PropTypes.any;
var ComponentStyle = function () {

@@ -31,0 +33,0 @@ function ComponentStyle(rules, selector) {

15

lib/models/InlineStyle.js

@@ -33,2 +33,4 @@ 'use strict';

var babelPluginFlowReactPropTypes_proptype_RuleSet = require('../types').babelPluginFlowReactPropTypes_proptype_RuleSet || require('react').PropTypes.any;
var generated = {};

@@ -56,5 +58,14 @@

var declPairs = [];
var workaroundValues = {};
root.each(function (node) {
if (node.type === 'decl') {
declPairs.push([node.prop, node.value]);
if (/border-?radius/i.test(node.prop)) {
// RN currently does not support differing values for the corner radii of Image
// components (but does for View). It is almost impossible to tell whether we'll have
// support, so we'll just disable multiple values here.
// https://github.com/styled-components/css-to-react-native/issues/11
workaroundValues.borderRadius = Number(node.value);
} else {
declPairs.push([node.prop, node.value]);
}
} else {

@@ -65,3 +76,3 @@ /* eslint-disable no-console */

});
var styleObject = (0, _cssToReactNative2.default)(declPairs);
var styleObject = Object.assign((0, _cssToReactNative2.default)(declPairs), workaroundValues);
var styles = _reactNative.StyleSheet.create({

@@ -68,0 +79,0 @@ generated: styleObject

27

lib/models/StyledComponent.js

@@ -35,2 +35,8 @@ 'use strict';

var babelPluginFlowReactPropTypes_proptype_Theme = require('./ThemeProvider').babelPluginFlowReactPropTypes_proptype_Theme || require('react').PropTypes.any;
var babelPluginFlowReactPropTypes_proptype_Target = require('../types').babelPluginFlowReactPropTypes_proptype_Target || require('react').PropTypes.any;
var babelPluginFlowReactPropTypes_proptype_RuleSet = require('../types').babelPluginFlowReactPropTypes_proptype_RuleSet || require('react').PropTypes.any;
exports.default = function (ComponentStyle) {

@@ -57,3 +63,3 @@ // eslint-disable-next-line no-undef

_this.state = {
theme: {},
theme: null,
generatedClassName: ''

@@ -86,4 +92,5 @@ };

} else {
var generatedClassName = this.generateAndInjectStyles(this.props.theme || {}, this.props);
this.setState({ generatedClassName: generatedClassName });
var theme = this.props.theme || {};
var generatedClassName = this.generateAndInjectStyles(theme, this.props);
this.setState({ theme: theme, generatedClassName: generatedClassName });
}

@@ -94,4 +101,6 @@ }

value: function componentWillReceiveProps(nextProps) {
var generatedClassName = this.generateAndInjectStyles(this.state.theme || this.props.theme, nextProps);
this.setState({ generatedClassName: generatedClassName });
var theme = nextProps.theme || this.state.theme;
var generatedClassName = this.generateAndInjectStyles(theme, nextProps);
this.setState({ theme: theme, generatedClassName: generatedClassName });
}

@@ -110,6 +119,6 @@ }, {

var _props = this.props;
var className = _props.className;
var children = _props.children;
var innerRef = _props.innerRef;
var _props = this.props,
className = _props.className,
children = _props.children,
innerRef = _props.innerRef;
var generatedClassName = this.state.generatedClassName;

@@ -116,0 +125,0 @@

25

lib/models/StyledNativeComponent.js

@@ -35,2 +35,8 @@ 'use strict';

var babelPluginFlowReactPropTypes_proptype_Theme = require('./ThemeProvider').babelPluginFlowReactPropTypes_proptype_Theme || require('react').PropTypes.any;
var babelPluginFlowReactPropTypes_proptype_Target = require('../types').babelPluginFlowReactPropTypes_proptype_Target || require('react').PropTypes.any;
var babelPluginFlowReactPropTypes_proptype_RuleSet = require('../types').babelPluginFlowReactPropTypes_proptype_RuleSet || require('react').PropTypes.any;
var createStyledNativeComponent = function createStyledNativeComponent(target, rules, parent) {

@@ -78,4 +84,5 @@ /* Handle styled(OtherStyledNativeComponent) differently */

} else {
var generatedStyles = this.generateAndInjectStyles(this.props.theme || {}, this.props);
this.setState({ generatedStyles: generatedStyles });
var theme = this.props.theme || {};
var generatedStyles = this.generateAndInjectStyles(theme, this.props);
this.setState({ generatedStyles: generatedStyles, theme: theme });
}

@@ -86,4 +93,6 @@ }

value: function componentWillReceiveProps(nextProps) {
var generatedStyles = this.generateAndInjectStyles(this.state.theme || this.props.theme, nextProps);
this.setState({ generatedStyles: generatedStyles });
var theme = nextProps.theme || this.state.theme;
var generatedStyles = this.generateAndInjectStyles(theme, nextProps);
this.setState({ generatedStyles: generatedStyles, theme: theme });
}

@@ -108,6 +117,6 @@ }, {

value: function render() {
var _props = this.props;
var style = _props.style;
var children = _props.children;
var innerRef = _props.innerRef;
var _props = this.props,
style = _props.style,
children = _props.children,
innerRef = _props.innerRef;
var generatedStyles = this.state.generatedStyles;

@@ -114,0 +123,0 @@

5

lib/models/test/ThemeProvider.test.js

@@ -29,3 +29,4 @@ 'use strict';

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 */
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 */

@@ -36,3 +37,3 @@

var result = (0, _enzyme.shallow)(_react2.default.createElement(_ThemeProvider2.default, { theme: {} }));
(0, _expect2.default)(result.node).toEqual(null);
(0, _expect2.default)(result.html()).toEqual(null);
});

@@ -39,0 +40,0 @@

12

lib/models/ThemeProvider.js

@@ -37,6 +37,12 @@ 'use strict';

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; }
/* globals React$Element */
// NOTE: DO NOT CHANGE, changing this is a semver major change!
var babelPluginFlowReactPropTypes_proptype_Broadcast = require('../utils/create-broadcast').babelPluginFlowReactPropTypes_proptype_Broadcast || require('react').PropTypes.any;
var CHANNEL = exports.CHANNEL = '__styled-components__';
Object.defineProperty(module.exports, 'babelPluginFlowReactPropTypes_proptype_Theme', require('react').PropTypes.shape({}));
/**

@@ -122,2 +128,8 @@ * Provide a theme to an entire react component tree via context and event listeners (have to do

ThemeProvider.propTypes = {
children: require('react').PropTypes.any,
theme: require('react').PropTypes.oneOfType([require('react').PropTypes.shape({}), require('react').PropTypes.func]).isRequired
};
ThemeProvider.childContextTypes = _defineProperty({}, CHANNEL, _react.PropTypes.func.isRequired);

@@ -124,0 +136,0 @@ ThemeProvider.contextTypes = _defineProperty({}, CHANNEL, _react.PropTypes.func);

4

lib/native/index.js

@@ -27,2 +27,6 @@ 'use strict';

/* eslint-disable import/no-unresolved */
var babelPluginFlowReactPropTypes_proptype_Target = require('../types').babelPluginFlowReactPropTypes_proptype_Target || require('react').PropTypes.any;
var babelPluginFlowReactPropTypes_proptype_Interpolation = require('../types').babelPluginFlowReactPropTypes_proptype_Interpolation || require('react').PropTypes.any;
var styled = function styled(tag) {

@@ -29,0 +33,0 @@ return function (strings) {

3

lib/test/basic.test.js

@@ -73,3 +73,3 @@ 'use strict';

(0, _enzyme.shallow)(_react2.default.createElement(Comp, null));
(0, _utils.expectCSSMatches)('.a { \n }', { skipWhitespace: false });
(0, _utils.expectCSSMatches)('.a { \n }', { ignoreWhitespace: false });
});

@@ -112,2 +112,3 @@

var wrapper = (0, _enzyme.mount)(_react2.default.createElement(WrapperComp, null));
// $FlowIssue
(0, _expect2.default)(wrapper.node.testRef).toExist();

@@ -114,0 +115,0 @@ });

80

lib/test/theme.test.js
'use strict';
var _templateObject = _taggedTemplateLiteral(['\n color: ', ';\n '], ['\n color: ', ';\n ']),
_templateObject2 = _taggedTemplateLiteral(['\n background: ', ';\n '], ['\n background: ', ';\n ']);
_templateObject2 = _taggedTemplateLiteral(['\n background: ', ';\n '], ['\n background: ', ';\n ']),
_templateObject3 = _taggedTemplateLiteral(['\n color: ', ';\n z-index: ', 'px;\n '], ['\n color: ', ';\n z-index: ', 'px;\n ']);
var _mochaJsdom = require('mocha-jsdom');
var _mochaJsdom2 = _interopRequireDefault(_mochaJsdom);
var _react = require('react');

@@ -65,3 +70,3 @@

var Comp1 = styled.div(_templateObject, function (props) {
return props.theme.color;
return props.theme.test.color;
});

@@ -71,3 +76,5 @@

theme: {
color: "purple"
test: {
color: "purple"
}
}

@@ -168,2 +175,69 @@ };

});
});
describe('theming (jsdom)', function () {
(0, _mochaJsdom2.default)();
beforeEach(function () {
styled = (0, _utils.resetStyled)();
});
it('should properly render with the same theme from default props on re-render', function () {
var Comp1 = styled.div(_templateObject, function (props) {
return props.theme.color;
});
Comp1.defaultProps = {
theme: {
color: "purple"
}
};
var wrapper = (0, _enzyme.mount)(_react2.default.createElement(Comp1, null));
(0, _utils.expectCSSMatches)('.a { color: purple; }');
wrapper.update();
(0, _utils.expectCSSMatches)('.a { color: purple; }');
});
it('should properly update style if theme is changed', function () {
var Comp1 = styled.div(_templateObject, function (props) {
return props.theme.color;
});
Comp1.defaultProps = {
theme: {
color: "purple"
}
};
var wrapper = (0, _enzyme.mount)(_react2.default.createElement(Comp1, null));
(0, _utils.expectCSSMatches)('.a { color: purple; }');
wrapper.setProps({ theme: { color: 'pink' } });
(0, _utils.expectCSSMatches)('.a { color: purple; }.b { color: pink; }');
});
it('should properly update style if props used in styles is changed', function () {
var Comp1 = styled.div(_templateObject3, function (props) {
return props.theme.color;
}, function (props) {
return props.zIndex;
});
Comp1.defaultProps = {
theme: {
color: "purple"
},
zIndex: 0
};
var wrapper = (0, _enzyme.mount)(_react2.default.createElement(Comp1, null));
var expectedStyles = '.a { color: purple; z-index: 0px; }';
(0, _utils.expectCSSMatches)(expectedStyles);
wrapper.setProps({ theme: { color: 'pink' } });
expectedStyles = expectedStyles + '.b { color: pink; z-index: 0px; }';
(0, _utils.expectCSSMatches)(expectedStyles);
wrapper.setProps({ zIndex: 1 });
(0, _utils.expectCSSMatches)(expectedStyles + '.c { color: pink; z-index: 1px; }');
});
});

9

lib/test/utils.js

@@ -31,6 +31,7 @@ 'use strict';

/* Ignore hashing, just return class names sequentially as .a .b .c etc */
var index = 0; /**
* This sets up our end-to-end test suite, which essentially makes sure
* our public API works the way we promise/want
*/
var index = 0;
/**
* This sets up our end-to-end test suite, which essentially makes sure
* our public API works the way we promise/want
*/

@@ -37,0 +38,0 @@ var classNames = function classNames() {

2

lib/utils/autoprefix.js

@@ -26,2 +26,4 @@ 'use strict';

var babelPluginFlowReactPropTypes_proptype_Container = require('../vendor/postcss/container').babelPluginFlowReactPropTypes_proptype_Container || require('react').PropTypes.any;
exports.default = function (root) {

@@ -28,0 +30,0 @@ root.walkDecls(function (decl) {

15

lib/utils/create-broadcast.js

@@ -6,4 +6,12 @@ "use strict";

});
Object.defineProperty(module.exports, "babelPluginFlowReactPropTypes_proptype_Broadcast", require("react").PropTypes.shape({
publish: require("react").PropTypes.func.isRequired,
subscribe: require("react").PropTypes.func.isRequired
}));
/**
* Creates a broadcast that can be listened to, i.e. simple event emitter
*
* @see https://github.com/ReactTraining/react-broadcast
*/
var createBroadcast = function createBroadcast(initialValue) {

@@ -34,9 +42,4 @@ var listeners = [];

};
/**
* Creates a broadcast that can be listened to, i.e. simple event emitter
*
* @see https://github.com/ReactTraining/react-broadcast
*/
exports.default = createBroadcast;
module.exports = exports["default"];

2

lib/utils/flatten.js

@@ -20,2 +20,4 @@ 'use strict';

var babelPluginFlowReactPropTypes_proptype_Interpolation = require('../types').babelPluginFlowReactPropTypes_proptype_Interpolation || require('react').PropTypes.any;
var objToCss = exports.objToCss = function objToCss(obj) {

@@ -22,0 +24,0 @@ return Object.keys(obj).map(function (key) {

3

lib/utils/interleave.js

@@ -7,3 +7,4 @@ 'use strict';

// eslint-disable-next-line max-len
var babelPluginFlowReactPropTypes_proptype_Interpolation = require('../types').babelPluginFlowReactPropTypes_proptype_Interpolation || require('react').PropTypes.any;
exports.default = function (strings, interpolations) {

@@ -10,0 +11,0 @@ return interpolations.reduce(function (array, interp, i) {

3

lib/utils/isTag.js

@@ -7,2 +7,5 @@ 'use strict';

exports.default = isTag;
var babelPluginFlowReactPropTypes_proptype_Target = require('../types').babelPluginFlowReactPropTypes_proptype_Target || require('react').PropTypes.any;
function isTag(target) /* : %checks */{

@@ -9,0 +12,0 @@ return typeof target === 'string';

9

lib/utils/test/flatten.test.js

@@ -22,2 +22,3 @@ 'use strict';

it('drops nulls', function () {
// $FlowInvalidInputTest
(0, _expect2.default)((0, _flatten2.default)(['foo', false, 'bar', undefined, 'baz', null])).toEqual(['foo', 'bar', 'baz']);

@@ -29,2 +30,3 @@ });

it('toStrings everything', function () {
// $FlowInvalidInputTest
(0, _expect2.default)((0, _flatten2.default)([1, true])).toEqual(['1', 'true']);

@@ -38,3 +40,5 @@ });

var css = 'font-size: 14px; -webkit-filter: blur(2px);';
// $FlowIssue
(0, _expect2.default)((0, _flatten2.default)([obj])).toEqual([css]);
// $FlowIssue
(0, _expect2.default)((0, _flatten2.default)(['some:thing;', obj, 'something: else;'])).toEqual(['some:thing;', css, 'something: else;']);

@@ -57,6 +61,9 @@ });

}();
// $FlowIssue
(0, _expect2.default)((0, _flatten2.default)([new SomeClass()])).toEqual(['some: thing;']);
});
it('flattens subarrays', function () {
// $FlowIssue
(0, _expect2.default)((0, _flatten2.default)([1, 2, [3, 4, 5], 'come:on;', 'lets:ride;'])).toEqual(['1', '2', '3', '4', '5', 'come:on;', 'lets:ride;']);

@@ -68,2 +75,3 @@ });

};
// $FlowIssue
var funcWFunc = function funcWFunc() {

@@ -92,2 +100,3 @@ return ['static', function (subfunc) {

it('recursively calls functions', function () {
// $FlowIssue
var func = function func() {

@@ -94,0 +103,0 @@ return ['static', function (_ref2) {

11

lib/vendor/glamor/sheet.js

@@ -75,9 +75,8 @@ 'use strict';

function StyleSheet() {
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
_ref$speedy = _ref.speedy,
speedy = _ref$speedy === undefined ? !isDev && !isTest : _ref$speedy,
_ref$maxLength = _ref.maxLength,
maxLength = _ref$maxLength === undefined ? isBrowser && oldIE ? 4000 : 65000 : _ref$maxLength;
var _ref$speedy = _ref.speedy;
var speedy = _ref$speedy === undefined ? !isDev && !isTest : _ref$speedy;
var _ref$maxLength = _ref.maxLength;
var maxLength = _ref$maxLength === undefined ? isBrowser && oldIE ? 4000 : 65000 : _ref$maxLength;
_classCallCheck(this, StyleSheet);

@@ -84,0 +83,0 @@

5

package.json
{
"name": "styled-components",
"version": "1.1.2-0",
"version": "1.1.2",
"description": "Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅",

@@ -56,2 +56,3 @@ "main": "lib/index.js",

"babel-plugin-external-helpers": "^6.8.0",
"babel-plugin-flow-react-proptypes": "^0.17.2",
"babel-plugin-transform-flow-strip-types": "^6.14.0",

@@ -71,3 +72,3 @@ "babel-plugin-transform-object-rest-spread": "^6.16.0",

"express": "^4.14.0",
"flow-bin": "^0.34.0",
"flow-bin": "^0.35.0",
"flow-copy-source": "^1.1.0",

@@ -74,0 +75,0 @@ "jsdom": "^9.8.0",

1

src/constructors/injectGlobal.js

@@ -0,1 +1,2 @@

// @flow
import css from './css'

@@ -2,0 +3,0 @@ import GlobalStyle from '../models/GlobalStyle'

1

src/constructors/test/injectGlobal.test.js

@@ -0,1 +1,2 @@

// @flow
import React, { Component } from 'react'

@@ -2,0 +3,0 @@ import expect from 'expect'

1

src/constructors/test/styled.test.js

@@ -0,1 +1,2 @@

// @flow
import expect from 'expect'

@@ -2,0 +3,0 @@ import styled from '../../index'

13

src/models/InlineStyle.js

@@ -29,5 +29,14 @@ // @flow

const declPairs = []
const workaroundValues = {}
root.each(node => {
if (node.type === 'decl') {
declPairs.push([node.prop, node.value])
if (/border-?radius/i.test(node.prop)) {
// RN currently does not support differing values for the corner radii of Image
// components (but does for View). It is almost impossible to tell whether we'll have
// support, so we'll just disable multiple values here.
// https://github.com/styled-components/css-to-react-native/issues/11
workaroundValues.borderRadius = Number(node.value)
} else {
declPairs.push([node.prop, node.value])
}
} else {

@@ -38,3 +47,3 @@ /* eslint-disable no-console */

})
const styleObject = transformDeclPairs(declPairs)
const styleObject = Object.assign(transformDeclPairs(declPairs), workaroundValues)
const styles = StyleSheet.create({

@@ -41,0 +50,0 @@ generated: styleObject,

20

src/models/StyledComponent.js

@@ -5,2 +5,4 @@ // @flow

import type { Theme } from './ThemeProvider'
import validAttr from '../utils/validAttr'

@@ -32,3 +34,3 @@ import isTag from '../utils/isTag'

this.state = {
theme: {},
theme: null,
generatedClassName: '',

@@ -55,16 +57,16 @@ }

} else {
const theme = this.props.theme || {}
const generatedClassName = this.generateAndInjectStyles(
this.props.theme || {},
theme,
this.props
)
this.setState({ generatedClassName })
this.setState({ theme, generatedClassName })
}
}
componentWillReceiveProps(nextProps: any) {
const generatedClassName = this.generateAndInjectStyles(
this.state.theme || this.props.theme,
nextProps
)
this.setState({ generatedClassName })
componentWillReceiveProps(nextProps: { theme?: Theme, [key: string]: any }) {
const theme = nextProps.theme || this.state.theme
const generatedClassName = this.generateAndInjectStyles(theme, nextProps)
this.setState({ theme, generatedClassName })
}

@@ -71,0 +73,0 @@

18

src/models/StyledNativeComponent.js
// @flow
import { createElement } from 'react'
import type { Theme } from './ThemeProvider'
import isTag from '../utils/isTag'

@@ -45,16 +47,16 @@ import type { RuleSet, Target } from '../types'

} else {
const theme = this.props.theme || {}
const generatedStyles = this.generateAndInjectStyles(
this.props.theme || {},
theme,
this.props
)
this.setState({ generatedStyles })
this.setState({ generatedStyles, theme })
}
}
componentWillReceiveProps(nextProps: any) {
const generatedStyles = this.generateAndInjectStyles(
this.state.theme || this.props.theme,
nextProps
)
this.setState({ generatedStyles })
componentWillReceiveProps(nextProps: { theme?: Theme, [key: string]: any }) {
const theme = nextProps.theme || this.state.theme
const generatedStyles = this.generateAndInjectStyles(theme, nextProps)
this.setState({ generatedStyles, theme })
}

@@ -61,0 +63,0 @@

3

src/models/test/ThemeProvider.test.js

@@ -0,1 +1,2 @@

// @flow
/* eslint-disable react/no-multi-comp */

@@ -10,3 +11,3 @@ import React from 'react'

const result = shallow(<ThemeProvider theme={{}} />)
expect(result.node).toEqual(null)
expect(result.html()).toEqual(null)
})

@@ -13,0 +14,0 @@

9

src/models/ThemeProvider.js
// @flow
/* globals React$Element */
import React, { PropTypes, Component } from 'react'

@@ -11,6 +12,6 @@ import isFunction from 'lodash/isFunction'

type Theme = {[key: string]: mixed};
export type Theme = {[key: string]: mixed};
type ThemeProviderProps = {|
children: any,
theme: (outherTheme: Theme) => void | Theme,
children?: React$Element<any>,
theme: Theme | (outherTheme: Theme) => void,
|};

@@ -23,3 +24,3 @@

class ThemeProvider extends Component {
getTheme: (theme?: (outherTheme: Theme) => void | Theme) => Theme
getTheme: (theme?: Theme | (outherTheme: Theme) => void) => Theme
outerTheme: Theme

@@ -26,0 +27,0 @@ unsubscribeToOuter: () => void

5

src/test/basic.test.js

@@ -0,1 +1,2 @@

// @flow
import React, { Component } from 'react'

@@ -44,3 +45,3 @@ import expect from 'expect'

shallow(<Comp />)
expectCSSMatches('.a { \n }', { skipWhitespace: false })
expectCSSMatches('.a { \n }', { ignoreWhitespace: false })
})

@@ -60,2 +61,3 @@

const WrapperComp = class extends Component {
testRef: any;
render() {

@@ -67,2 +69,3 @@ return <Comp innerRef={(comp) => { this.testRef = comp }} />

const wrapper = mount(<WrapperComp />)
// $FlowIssue
expect(wrapper.node.testRef).toExist()

@@ -69,0 +72,0 @@ })

1

src/test/css.test.js

@@ -0,1 +1,2 @@

// @flow
import React from 'react'

@@ -2,0 +3,0 @@ import { shallow } from 'enzyme'

1

src/test/extending.test.js

@@ -0,1 +1,2 @@

// @flow
import React from 'react'

@@ -2,0 +3,0 @@ import expect from 'expect'

1

src/test/props.test.js

@@ -0,1 +1,2 @@

// @flow
import React from 'react'

@@ -2,0 +3,0 @@ import { shallow } from 'enzyme'

1

src/test/styles.test.js

@@ -0,1 +1,2 @@

// @flow
import React from 'react'

@@ -2,0 +3,0 @@ import { shallow } from 'enzyme'

84

src/test/theme.test.js

@@ -0,3 +1,5 @@

// @flow
import jsdom from 'mocha-jsdom';
import React from 'react'
import { render } from 'enzyme'
import { mount, render } from 'enzyme'

@@ -46,3 +48,3 @@ import { resetStyled, expectCSSMatches } from './utils'

const Comp1 = styled.div`
color: ${props => props.theme.color};
color: ${props => props.theme.test.color};
`

@@ -52,3 +54,5 @@

theme: {
color: "purple"
test: {
color: "purple"
}
}

@@ -64,3 +68,3 @@ }

it('should properly set the theme with an empty object when no teme is provided and no defaults are set', () => {
it('should properly set the theme with an empty object when no teme is provided and no defaults are set', () => {
const Comp1 = styled.div`

@@ -143,1 +147,73 @@ color: ${props => props.theme.color};

})
describe('theming (jsdom)', () => {
jsdom()
beforeEach(() => {
styled = resetStyled()
})
it('should properly render with the same theme from default props on re-render', () => {
const Comp1 = styled.div`
color: ${props => props.theme.color};
`
Comp1.defaultProps = {
theme: {
color: "purple"
}
}
const wrapper = mount(
<Comp1 />
)
expectCSSMatches(`.a { color: purple; }`)
wrapper.update();
expectCSSMatches(`.a { color: purple; }`)
})
it('should properly update style if theme is changed', () => {
const Comp1 = styled.div`
color: ${props => props.theme.color};
`
Comp1.defaultProps = {
theme: {
color: "purple"
}
}
const wrapper = mount(
<Comp1 />
)
expectCSSMatches(`.a { color: purple; }`)
wrapper.setProps({ theme: { color: 'pink' } })
expectCSSMatches(`.a { color: purple; }.b { color: pink; }`)
})
it('should properly update style if props used in styles is changed', () => {
const Comp1 = styled.div`
color: ${props => props.theme.color};
z-index: ${props => props.zIndex}px;
`
Comp1.defaultProps = {
theme: {
color: "purple"
},
zIndex: 0
}
const wrapper = mount(
<Comp1 />
)
let expectedStyles = `.a { color: purple; z-index: 0px; }`
expectCSSMatches(expectedStyles)
wrapper.setProps({ theme: { color: 'pink' } })
expectedStyles = `${expectedStyles}.b { color: pink; z-index: 0px; }`
expectCSSMatches(expectedStyles)
wrapper.setProps({ zIndex: 1 });
expectCSSMatches(`${expectedStyles}.c { color: pink; z-index: 1px; }`)
});
})

6

src/test/utils.js

@@ -0,1 +1,2 @@

// @flow
/**

@@ -23,3 +24,6 @@ * This sets up our end-to-end test suite, which essentially makes sure

const stripWhitespace = str => str.trim().replace(/\s+/g, ' ')
export const expectCSSMatches = (expectation, opts = { ignoreWhitespace: true }) => {
export const expectCSSMatches = (
expectation: string,
opts: { ignoreWhitespace: boolean } = { ignoreWhitespace: true }
) => {
const css = styleSheet.rules().map(rule => rule.cssText).join('\n')

@@ -26,0 +30,0 @@ if (opts.ignoreWhitespace) {

2

src/types.js
// @flow
export type Interpolation = ((executionContext: Object) => string) | string
export type Interpolation = ((executionContext: Object) => string) | string | number
/* todo: I want this to actually be an array of Function | string but that causes errors */

@@ -4,0 +4,0 @@ export type RuleSet = Array<Interpolation>

6

src/utils/interleave.js
// @flow
import type { Interpolation } from '../types'
// eslint-disable-next-line max-len
export default (strings: Array<string>, interpolations: Array<Interpolation>): Array<Interpolation> => (
export default (
strings: Array<string>,
interpolations: Array<Interpolation>
): Array<Interpolation> => (
interpolations.reduce((array: Array<Interpolation>, interp: Interpolation, i: number) => (

@@ -7,0 +9,0 @@ array.concat(interp, strings[i + 1])

9

src/utils/test/flatten.test.js

@@ -0,1 +1,2 @@

// @flow
import expect from 'expect'

@@ -9,2 +10,3 @@ import flatten from '../flatten'

it('drops nulls', () => {
// $FlowInvalidInputTest
expect(flatten(['foo', false, 'bar', undefined, 'baz', null])).toEqual(['foo', 'bar', 'baz'])

@@ -16,2 +18,3 @@ })

it('toStrings everything', () => {
// $FlowInvalidInputTest
expect(flatten([1, true])).toEqual(['1', 'true'])

@@ -25,3 +28,5 @@ })

const css = 'font-size: 14px; -webkit-filter: blur(2px);'
// $FlowIssue
expect(flatten([obj])).toEqual([css])
// $FlowIssue
expect(flatten(['some:thing;', obj, 'something: else;'])).toEqual(['some:thing;', css, 'something: else;'])

@@ -35,5 +40,7 @@ })

}
// $FlowIssue
expect(flatten([new SomeClass()])).toEqual(['some: thing;'])
})
it('flattens subarrays', () => {
// $FlowIssue
expect(flatten([1, 2, [3, 4, 5], 'come:on;', 'lets:ride;'])).toEqual(['1', '2', '3', '4', '5', 'come:on;', 'lets:ride;'])

@@ -43,2 +50,3 @@ })

const func = () => 'bar'
// $FlowIssue
const funcWFunc = () => ['static', subfunc => subfunc ? 'bar' : 'baz']

@@ -58,2 +66,3 @@ expect(flatten(['foo', func, 'baz'])).toEqual(['foo', func, 'baz'])

it('recursively calls functions', () => {
// $FlowIssue
const func = () => ['static', ({ bool }) => bool ? 'bar' : 'baz']

@@ -60,0 +69,0 @@ expect(flatten(['foo', func], { bool: true })).toEqual(['foo', 'static', 'bar'])

1

src/utils/test/interleave.test.js

@@ -0,1 +1,2 @@

// @flow
import expect from 'expect'

@@ -2,0 +3,0 @@ import interleave from '../interleave'

1

src/utils/test/validAttr.test.js

@@ -0,1 +1,2 @@

// @flow
import expect from 'expect'

@@ -2,0 +3,0 @@ import validAttr from '../validAttr'

dist/styled-components.es.js

Sorry, the diff of this file is too big to display

dist/styled-components.js

Sorry, the diff of this file is too big to display

dist/styled-components.min.js

Sorry, the diff of this file is too big to display

lib/constructors/injectGlobal.js.flow

Sorry, the diff of this file is not supported yet

lib/models/InlineStyle.js.flow

Sorry, the diff of this file is not supported yet

lib/models/StyledComponent.js.flow

Sorry, the diff of this file is not supported yet

lib/models/StyledNativeComponent.js.flow

Sorry, the diff of this file is not supported yet

lib/models/ThemeProvider.js.flow

Sorry, the diff of this file is not supported yet

lib/types.js.flow

Sorry, the diff of this file is not supported yet

lib/utils/interleave.js.flow

Sorry, the diff of this file is not supported yet

yarn.lock

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc