styled-components 2.1.1 → 2.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +31 -1
- package/CODE_OF_CONDUCT.md +1 -1
- package/README.md +12 -67
- package/dist/styled-components.es.js +273 -110
- package/dist/styled-components.js +325 -119
- package/dist/styled-components.min.js +2 -2
- package/lib/hoc/withTheme.js +13 -7
- package/lib/models/BrowserStyleSheet.js +11 -0
- package/lib/models/ComponentStyle.js +45 -2
- package/lib/models/InlineStyle.js +1 -1
- package/lib/models/ServerStyleSheet.js +33 -17
- package/lib/models/StyleSheet.js +9 -0
- package/lib/models/StyledComponent.js +82 -38
- package/lib/models/StyledNativeComponent.js +31 -15
- package/lib/models/ThemeProvider.js +44 -12
- package/lib/native/index.js +1 -1
- package/lib/test/utils.js +5 -2
- package/lib/utils/create-broadcast.js +34 -24
- package/lib/utils/domElements.js +1 -1
- package/lib/utils/flatten.js +4 -1
- package/lib/utils/generateAlphabeticName.js +1 -1
- package/lib/utils/nonce.js +10 -0
- package/lib/utils/once.js +17 -0
- package/package.json +10 -10
- package/src/hoc/withTheme.js +14 -7
- package/src/models/BrowserStyleSheet.js +8 -0
- package/src/models/ComponentStyle.js +42 -2
- package/src/models/InlineStyle.js +1 -1
- package/src/models/ServerStyleSheet.js +27 -12
- package/src/models/StyleSheet.js +9 -0
- package/src/models/StyledComponent.js +81 -26
- package/src/models/StyledNativeComponent.js +30 -10
- package/src/models/ThemeProvider.js +38 -9
- package/src/models/test/ThemeProvider.test.js +7 -8
- package/src/native/index.js +1 -1
- package/src/native/test/native.test.js +14 -0
- package/src/test/__snapshots__/ssr.test.js.snap +147 -0
- package/src/test/expanded-api.test.js +24 -0
- package/src/test/props.test.js +14 -3
- package/src/test/ssr.test.js +90 -123
- package/src/test/styles.test.js +52 -0
- package/src/test/utils.js +5 -2
- package/src/utils/create-broadcast.js +31 -17
- package/src/utils/domElements.js +1 -0
- package/src/utils/flatten.js +16 -6
- package/src/utils/generateAlphabeticName.js +1 -1
- package/src/utils/nonce.js +6 -0
- package/src/utils/once.js +12 -0
- package/typings/styled-components.d.ts +15 -21
- package/typings/tests/issue1068.tsx +226 -0
- package/typings/tests/main-test.tsx +1 -1
- package/typings/tests/string-tags-test.tsx +62 -0
- package/typings/tests/themed-tests/issue1068.tsx +226 -0
- package/typings/tests/themed-tests/mytheme-styled-components.tsx +1 -1
- package/typings/tests/themed-tests/with-theme-test.tsx +2 -1
- package/typings/tests/with-theme-test.tsx +17 -0
- package/lib/constructors/test/injectGlobal.test.js +0 -63
- package/lib/constructors/test/keyframes.test.js +0 -48
- package/lib/constructors/test/styled.test.js +0 -19
- package/lib/models/AbstractStyledComponent.js +0 -43
- package/lib/models/test/ThemeProvider.test.js +0 -200
- package/lib/native/test/native.test.js +0 -290
- package/lib/no-parser/test/basic.test.js +0 -46
- package/lib/no-parser/test/flatten.test.js +0 -125
- package/lib/no-parser/test/keyframes.test.js +0 -45
- package/lib/primitives/test/primitives.test.js +0 -289
- package/lib/test/attrs.test.js +0 -158
- package/lib/test/basic.test.js +0 -267
- package/lib/test/css.test.js +0 -43
- package/lib/test/expanded-api.test.js +0 -90
- package/lib/test/extending.test.js +0 -198
- package/lib/test/overriding.test.js +0 -35
- package/lib/test/props.test.js +0 -38
- package/lib/test/rehydration.test.js +0 -306
- package/lib/test/ssr.test.js +0 -187
- package/lib/test/styles.test.js +0 -146
- package/lib/test/theme.test.js +0 -497
- package/lib/test/warnTooManyClasses.test.js +0 -71
- package/lib/utils/test/extractCompsFromCSS.test.js +0 -46
- package/lib/utils/test/flatten.test.js +0 -109
- package/lib/utils/test/generateAlphabeticName.test.js +0 -14
- package/lib/utils/test/interleave.test.js +0 -22
- package/lib/utils/test/validAttr.test.js +0 -560
- package/src/models/AbstractStyledComponent.js +0 -21
- package/typings/tags.d.ts +0 -137
|
@@ -1,109 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var _flatten = require('../flatten');
|
|
4
|
-
|
|
5
|
-
var _flatten2 = _interopRequireDefault(_flatten);
|
|
6
|
-
|
|
7
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
8
|
-
|
|
9
|
-
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
10
|
-
|
|
11
|
-
describe('flatten', function () {
|
|
12
|
-
it('doesnt merge strings', function () {
|
|
13
|
-
expect((0, _flatten2.default)(['foo', 'bar', 'baz'])).toEqual(['foo', 'bar', 'baz']);
|
|
14
|
-
});
|
|
15
|
-
it('drops nulls', function () {
|
|
16
|
-
// $FlowInvalidInputTest
|
|
17
|
-
expect((0, _flatten2.default)(['foo', false, 'bar', undefined, 'baz', null])).toEqual(['foo', 'bar', 'baz']);
|
|
18
|
-
});
|
|
19
|
-
it('doesnt drop any numbers', function () {
|
|
20
|
-
expect((0, _flatten2.default)(['foo', 0, 'bar', NaN, 'baz', -1])).toEqual(['foo', '0', 'bar', 'NaN', 'baz', '-1']);
|
|
21
|
-
});
|
|
22
|
-
it('toStrings everything', function () {
|
|
23
|
-
// $FlowInvalidInputTest
|
|
24
|
-
expect((0, _flatten2.default)([1, true])).toEqual(['1', 'true']);
|
|
25
|
-
});
|
|
26
|
-
it('hypenates objects', function () {
|
|
27
|
-
var obj = {
|
|
28
|
-
fontSize: '14px',
|
|
29
|
-
WebkitFilter: 'blur(2px)'
|
|
30
|
-
};
|
|
31
|
-
var css = 'font-size: 14px; -webkit-filter: blur(2px);';
|
|
32
|
-
// $FlowFixMe
|
|
33
|
-
expect((0, _flatten2.default)([obj])).toEqual([css]);
|
|
34
|
-
// $FlowFixMe
|
|
35
|
-
expect((0, _flatten2.default)(['some:thing;', obj, 'something: else;'])).toEqual(['some:thing;', css, 'something: else;']);
|
|
36
|
-
});
|
|
37
|
-
it('handles nested objects', function () {
|
|
38
|
-
var obj = {
|
|
39
|
-
fontSize: '14px',
|
|
40
|
-
'@media screen and (min-width: 250px)': {
|
|
41
|
-
fontSize: '16px'
|
|
42
|
-
},
|
|
43
|
-
'&:hover': {
|
|
44
|
-
fontWeight: 'bold'
|
|
45
|
-
}
|
|
46
|
-
};
|
|
47
|
-
var css = 'font-size: 14px; @media screen and (min-width: 250px) {\n font-size: 16px;\n} &:hover {\n font-weight: bold;\n}';
|
|
48
|
-
// $FlowFixMe
|
|
49
|
-
expect((0, _flatten2.default)([obj])).toEqual([css]);
|
|
50
|
-
// $FlowFixMe
|
|
51
|
-
expect((0, _flatten2.default)(['some:thing;', obj, 'something: else;'])).toEqual(['some:thing;', css, 'something: else;']);
|
|
52
|
-
});
|
|
53
|
-
it('toStrings class instances', function () {
|
|
54
|
-
var SomeClass = function () {
|
|
55
|
-
function SomeClass() {
|
|
56
|
-
_classCallCheck(this, SomeClass);
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
SomeClass.prototype.toString = function toString() {
|
|
60
|
-
return 'some: thing;';
|
|
61
|
-
};
|
|
62
|
-
|
|
63
|
-
return SomeClass;
|
|
64
|
-
}();
|
|
65
|
-
// $FlowFixMe
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
expect((0, _flatten2.default)([new SomeClass()])).toEqual(['some: thing;']);
|
|
69
|
-
});
|
|
70
|
-
it('flattens subarrays', function () {
|
|
71
|
-
expect((0, _flatten2.default)([1, 2, [3, 4, 5], 'come:on;', 'lets:ride;'])).toEqual(['1', '2', '3', '4', '5', 'come:on;', 'lets:ride;']);
|
|
72
|
-
});
|
|
73
|
-
it('defers functions', function () {
|
|
74
|
-
var func = function func() {
|
|
75
|
-
return 'bar';
|
|
76
|
-
};
|
|
77
|
-
var funcWFunc = function funcWFunc() {
|
|
78
|
-
return ['static', function (subfunc) {
|
|
79
|
-
return subfunc ? 'bar' : 'baz';
|
|
80
|
-
}];
|
|
81
|
-
};
|
|
82
|
-
expect((0, _flatten2.default)(['foo', func, 'baz'])).toEqual(['foo', func, 'baz']);
|
|
83
|
-
expect((0, _flatten2.default)(['foo', funcWFunc, 'baz'])).toEqual(['foo', funcWFunc, 'baz']);
|
|
84
|
-
});
|
|
85
|
-
it('executes functions', function () {
|
|
86
|
-
var func = function func() {
|
|
87
|
-
return 'bar';
|
|
88
|
-
};
|
|
89
|
-
expect((0, _flatten2.default)(['foo', func, 'baz'], { bool: true })).toEqual(['foo', 'bar', 'baz']);
|
|
90
|
-
});
|
|
91
|
-
it('passes values to function', function () {
|
|
92
|
-
var func = function func(_ref) {
|
|
93
|
-
var bool = _ref.bool;
|
|
94
|
-
return bool ? 'bar' : 'baz';
|
|
95
|
-
};
|
|
96
|
-
expect((0, _flatten2.default)(['foo', func], { bool: true })).toEqual(['foo', 'bar']);
|
|
97
|
-
expect((0, _flatten2.default)(['foo', func], { bool: false })).toEqual(['foo', 'baz']);
|
|
98
|
-
});
|
|
99
|
-
it('recursively calls functions', function () {
|
|
100
|
-
var func = function func() {
|
|
101
|
-
return ['static', function (_ref2) {
|
|
102
|
-
var bool = _ref2.bool;
|
|
103
|
-
return bool ? 'bar' : 'baz';
|
|
104
|
-
}];
|
|
105
|
-
};
|
|
106
|
-
expect((0, _flatten2.default)(['foo', func], { bool: true })).toEqual(['foo', 'static', 'bar']);
|
|
107
|
-
expect((0, _flatten2.default)(['foo', func], { bool: false })).toEqual(['foo', 'static', 'baz']);
|
|
108
|
-
});
|
|
109
|
-
});
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var _generateAlphabeticName = require('../generateAlphabeticName');
|
|
4
|
-
|
|
5
|
-
var _generateAlphabeticName2 = _interopRequireDefault(_generateAlphabeticName);
|
|
6
|
-
|
|
7
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
8
|
-
|
|
9
|
-
describe('generateAlphabeticName', function () {
|
|
10
|
-
it('should create alphabetic names for number input data', function () {
|
|
11
|
-
expect((0, _generateAlphabeticName2.default)(1000000000)).toEqual('cGNYzm');
|
|
12
|
-
expect((0, _generateAlphabeticName2.default)(2000000000)).toEqual('fnBWYy');
|
|
13
|
-
});
|
|
14
|
-
});
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var _interleave = require('../interleave');
|
|
4
|
-
|
|
5
|
-
var _interleave2 = _interopRequireDefault(_interleave);
|
|
6
|
-
|
|
7
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
8
|
-
|
|
9
|
-
describe('interleave', function () {
|
|
10
|
-
it('blindly interleave', function () {
|
|
11
|
-
expect((0, _interleave2.default)([], [])).toEqual([undefined]);
|
|
12
|
-
expect((0, _interleave2.default)(['foo'], [])).toEqual(['foo']);
|
|
13
|
-
expect((0, _interleave2.default)(['foo'], [1])).toEqual(['foo', 1, undefined]);
|
|
14
|
-
expect((0, _interleave2.default)(['foo', 'bar'], [1])).toEqual(['foo', 1, 'bar']);
|
|
15
|
-
});
|
|
16
|
-
it('should be driven off the number of interpolations', function () {
|
|
17
|
-
expect((0, _interleave2.default)(['foo', 'bar'], [])).toEqual(['foo']);
|
|
18
|
-
expect((0, _interleave2.default)(['foo', 'bar', 'baz'], [1])).toEqual(['foo', 1, 'bar']);
|
|
19
|
-
expect((0, _interleave2.default)([], [1])).toEqual([undefined, 1, undefined]);
|
|
20
|
-
expect((0, _interleave2.default)(['foo'], [1, 2, 3])).toEqual(['foo', 1, undefined, 2, undefined, 3, undefined]);
|
|
21
|
-
});
|
|
22
|
-
});
|