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
package/CHANGELOG.md
CHANGED
|
@@ -6,6 +6,29 @@ All notable changes to this project will be documented in this file. If a contri
|
|
|
6
6
|
|
|
7
7
|
## Unreleased
|
|
8
8
|
|
|
9
|
+
- N/A
|
|
10
|
+
|
|
11
|
+
## [v2.2.1] - 2017-10-04
|
|
12
|
+
|
|
13
|
+
- Cache static classnames in browser environments, thanks to [@schwers](https://github.com/schwers) (see [#1069]https://github.com/styled-components/styled-components/pull/1069))
|
|
14
|
+
- Move the list of libraries built with styled-components to [`awesome-styled-components`](https://github.com/styled-components/awesome-styled-components), thanks to [@romellogood](https://github.com/romellogood) (see [#1203](https://github.com/styled-components/styled-components/pull/1203))
|
|
15
|
+
- Don't emit empty rules like from interpolations, thanks to [@wmertens](https://github.com/wmertens) (see [#1149](https://github.com/styled-components/styled-components/pull/1149))
|
|
16
|
+
|
|
17
|
+
## [v2.2.0] - 2017-09-27
|
|
18
|
+
|
|
19
|
+
- Fixed downstream minification issue with replacing `process` (see [#1150](https://github.com/styled-components/styled-components/pull/1150))
|
|
20
|
+
- Fixed nonce missing from global styles (see [#1088](https://github.com/styled-components/styled-components/pull/1088))
|
|
21
|
+
- Improve component mount and unmount performance with changes to `createBroadcast`. Deprecates usage of `CHANNEL` as a function, will be update to `CHANNEL_NEXT`'s propType in a future version. (see [#1048](https://github.com/styled-components/styled-components/pull/1048))
|
|
22
|
+
- Fixed comments in react-native (see [#1041](https://github.com/styled-components/styled-components/pull/1041))
|
|
23
|
+
- Add support for the `__webpack_nonce__` CSP attribute (see [#1022](https://github.com/styled-components/styled-components/pull/1022) and [#1043](https://github.com/styled-components/styled-components/pull/1043))
|
|
24
|
+
- Add react-native `ImageBackground` alias (see [#1028](https://github.com/styled-components/styled-components/pull/1028))
|
|
25
|
+
- Refactor variable in generateAlphabeticName.js (see [#1040](https://github.com/styled-components/styled-components/pull/1040))
|
|
26
|
+
- Enable the Node environment for SSR tests, switch some output verification to snapshot testing (see [#1023](https://github.com/styled-components/styled-components/pull/1023))
|
|
27
|
+
- Add .extend and .withComponent deterministic ID generation (see [#1044](https://github.com/styled-components/styled-components/pull/1044))
|
|
28
|
+
- Add `marquee` tag to domElements (see [#1167](https://github.com/styled-components/styled-components/pull/1167))
|
|
29
|
+
|
|
30
|
+
## [v2.1.1] - 2017-07-03
|
|
31
|
+
|
|
9
32
|
- Upgrade stylis to 2.3 and use constructor to fix bugs with multiple libs using stylis simultaneously (see [#962](https://github.com/styled-components/styled-components/pull/962))
|
|
10
33
|
|
|
11
34
|
## [v2.1.0] - 2017-06-15
|
|
@@ -47,6 +70,7 @@ All notable changes to this project will be documented in this file. If a contri
|
|
|
47
70
|
- Restore `setNativeProps` in StyledNativeComponent, thanks to [@MatthieuLemoine](https://github.com/MatthieuLemoine). (see [#764](https://github.com/styled-components/styled-components/pull/764))
|
|
48
71
|
- Fix `ref` being passed to Stateless Functional Components in StyledNativeComponent. (see [#828](https://github.com/styled-components/styled-components/pull/828))
|
|
49
72
|
- Add `displayName` to `componentId` when both are present (see [#821](https://github.com/styled-components/styled-components/pull/821))
|
|
73
|
+
- Test node 8.x as well in travis (see [#1153](https://github.com/styled-components/styled-components/pull/1153))
|
|
50
74
|
|
|
51
75
|
## [v1.4.6] - 2017-05-02
|
|
52
76
|
|
|
@@ -262,7 +286,13 @@ All notable changes to this project will be documented in this file. If a contri
|
|
|
262
286
|
|
|
263
287
|
- Fixed compatibility with other react-broadcast-based systems (like `react-router` v4)
|
|
264
288
|
|
|
265
|
-
[Unreleased]: https://github.com/styled-components/styled-components/compare/v2.
|
|
289
|
+
[Unreleased]: https://github.com/styled-components/styled-components/compare/v2.2.1...master
|
|
290
|
+
[v2.2.1]: https://github.com/styled-components/styled-components/compare/v2.2.0...v2.2.1
|
|
291
|
+
[v2.2.0]: https://github.com/styled-components/styled-components/compare/v2.1.1...v2.2.0
|
|
292
|
+
[v2.1.2]: https://github.com/styled-components/styled-components/compare/v2.1.1...v2.1.2
|
|
293
|
+
[v2.1.1]: https://github.com/styled-components/styled-components/compare/v2.1.0...v2.1.1
|
|
294
|
+
[v2.1.0]: https://github.com/styled-components/styled-components/compare/v2.0.1...v2.1.0
|
|
295
|
+
[v2.0.1]: https://github.com/styled-components/styled-components/compare/v2.0.0...v2.0.1
|
|
266
296
|
[v2.0.0]: https://github.com/styled-components/styled-components/compare/v1.4.6...v2.0.0
|
|
267
297
|
[v1.4.6]: https://github.com/styled-components/styled-components/compare/v1.4.5...v1.4.6
|
|
268
298
|
[v1.4.5]: https://github.com/styled-components/styled-components/compare/v1.4.4...v1.4.5
|
package/CODE_OF_CONDUCT.md
CHANGED
|
@@ -55,7 +55,7 @@ further defined and clarified by project maintainers.
|
|
|
55
55
|
## Enforcement
|
|
56
56
|
|
|
57
57
|
Instances of abusive, harassing, or otherwise unacceptable behavior may be
|
|
58
|
-
reported by contacting the project team at
|
|
58
|
+
reported by contacting the project team at glenmaddern@gmail.com or contact@mxstbr.com. All
|
|
59
59
|
complaints will be reviewed and investigated and will result in a response that
|
|
60
60
|
is deemed necessary and appropriate to the circumstances. The project team is
|
|
61
61
|
obligated to maintain confidentiality with regard to the reporter of an incident.
|
package/README.md
CHANGED
|
@@ -48,7 +48,7 @@ See the [`stylelint-processor-styled-components`](https://github.com/styled-comp
|
|
|
48
48
|
|
|
49
49
|
## Syntax highlighting
|
|
50
50
|
|
|
51
|
-
The one thing you lose when writing CSS in template literals is syntax highlighting. We're working hard on making proper syntax highlighting happening in all editors. We currently have support for Atom, Visual Studio Code, and soon Sublime Text.
|
|
51
|
+
The one thing you lose when writing CSS in template literals is syntax highlighting. We're working hard on making proper syntax highlighting happening in all editors. We currently have support for Atom, Visual Studio Code, WebStorm, and soon Sublime Text.
|
|
52
52
|
|
|
53
53
|
This is what it looks like when properly highlighted:
|
|
54
54
|
|
|
@@ -77,78 +77,23 @@ The [`vim-styled-components`](https://github.com/fleischie/vim-styled-components
|
|
|
77
77
|
|
|
78
78
|
Also if you're looking for an awesome javascript syntax package you can never go wrong with [YAJS.vim](https://github.com/othree/yajs.vim).
|
|
79
79
|
|
|
80
|
+
### WebStorm, IntelliJ IDEA, PhpStorm, PyCharm, and RubyMine
|
|
81
|
+
|
|
82
|
+
The [`webstorm-styled-components`](https://github.com/styled-components/webstorm-styled-components) plugin adds code completion and highlighting for CSS properties and values in the template strings. And it also provides code completion and navigation for JavaScript symbols in the interpolations. You can install it from the IDE: go to `Preferences | Plugins` and search for `Styled Components`.
|
|
83
|
+
|
|
80
84
|
### Other Editors
|
|
81
85
|
|
|
82
86
|
We could use your help to get syntax highlighting support to other editors! If you want to start working on syntax highlighting for your editor, open an issue to let us know.
|
|
83
87
|
|
|
88
|
+
## Code completions and error reporting
|
|
89
|
+
|
|
90
|
+
Along with sytnax highlighting, you can install the [TypeScript styled plugin](https://github.com/Microsoft/typescript-styled-plugin) to get error reporting and code completeion for styled components in your editor. The plugin supports styled components in both JavaScript and TypeScript files, and works in Visual Studio Code, Sublime, and Atom.
|
|
91
|
+
|
|
84
92
|
## Built with `styled-components`
|
|
85
93
|
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
- [react-enhanced-form](https://github.com/xeonys/react-enhanced-form): The best react form component, on earth π. It makes form inputs easy, finally !
|
|
90
|
-
- [react-teleportation](https://github.com/xeonys/react-teleportation): Teleport your components to the foreground.
|
|
91
|
-
- [reshake](https://github.com/elrumordelaluz/reshake): CSShake as a React Functional Component ([demo](https://elrumordelaluz.github.io/reshake/))
|
|
92
|
-
- [last-draft](https://github.com/vacenz/last-draft): A Draft.js Editor ([demo](http://lastdraft.vace.nz))
|
|
93
|
-
- [styled-components-spacing](https://github.com/jameslnewell/styled-components-spacing): Responsive margin and padding components for `styled-components`.
|
|
94
|
-
- [reactour](https://github.com/elrumordelaluz/reactour): Tourist Guide into your React Components ([demo](https://elrumordelaluz.github.io/reactour/))
|
|
95
|
-
- [mcs-lite-ui](https://github.com/MCS-Lite/mcs-lite): An on-premises Internet of Things cloud platform, which can be quickly built and get started with. ([demo](http://mcs-lite-ui.netlify.com/))
|
|
96
|
-
- [react-progressive-bg-image](https://github.com/evenchange4/react-progressive-bg-image): πΌ Medium style progressive background image. ([demo](http://react-progressive-bg-image.netlify.com/))
|
|
97
|
-
- [react-simple-chatbot](https://github.com/LucasBassetti/react-simple-chatbot): Simple chatbot / conversational-ui React component. ([demo](https://lucasbassetti.com.br/react-simple-chatbot/))
|
|
98
|
-
- [react-css-loaders](https://github.com/LucasBassetti/react-css-loaders): A collection of pure CSS React loading components. ([demo](https://lucasbassetti.com.br/react-css-loaders/))
|
|
99
|
-
|
|
100
|
-
#### Grid Systems
|
|
101
|
-
- [grid-styled](https://github.com/jxnblk/grid-styled): Responsive grid system ([demo](http://jxnblk.com/grid-styled/))
|
|
102
|
-
- [Hedron](http://github.com/jsbros/hedron): A no-frills flex-box grid system.
|
|
103
|
-
- [styled-components-grid](https://github.com/jameslnewell/styled-components-grid): Responsive grid components for `styled-components`.
|
|
104
|
-
- [react-styled-flexboxgrid](https://github.com/LoicMahieu/react-styled-flexboxgrid): Grid system based on Flexbox ([demo](https://loicmahieu.github.io/react-styled-flexboxgrid/demo/index.html))
|
|
105
|
-
- [react-flexa](https://github.com/aaronvanston/react-flexa): React grid system implementing the flexbox CSS API responsively.
|
|
106
|
-
|
|
107
|
-
#### Helpers
|
|
108
|
-
- [styled-props](https://github.com/RafalFilipek/styled-props): Simple lib that allows you to set styled props in your styled-components without stress ([demo](http://www.webpackbin.com/N1EKUqgvG))
|
|
109
|
-
- [styled-components-breakpoint](https://github.com/jameslnewell/styled-components-breakpoint): Utility function for using breakpoints with `styled-components`.
|
|
110
|
-
- [styled-theme](https://github.com/diegohaz/styled-theme): Extensible theming system for styled-components.
|
|
111
|
-
- [styled-tools](https://github.com/diegohaz/styled-tools): Useful interpolated functions for styled-components.
|
|
112
|
-
- [styled-ax](https://github.com/Lokua/styled-ax): Functional theme property accessor(s)
|
|
113
|
-
- [react-create-component-from-tag-prop](https://github.com/jameslnewell/react-create-component-from-tag-prop): Create a react component from a tag prop. Lets your users to choose which HTML elements get styled by your π
styled-components.
|
|
114
|
-
- [styled-components-theme](https://github.com/erikras/styled-components-theme): A library for refering to theme colors and modifying them inline. e.g. `color: ${primary.lighten(0.3)};`
|
|
115
|
-
- [styled-map](https://github.com/scf4/styled-map) - Super simple lib to map props to styles with `styled-components`
|
|
116
|
-
|
|
117
|
-
### Boilerplates
|
|
118
|
-
- [react-redux-styled-hot-universal](https://github.com/krasevych/react-redux-styled-hot-universal) (SSR, Universal Webpack, Redux, React-router, Webpack 2, Babel, Styled Components and more...)
|
|
119
|
-
- [ARc](https://github.com/diegohaz/arc): Atomic React App boilerplate with styled components ([demo](https://diegohaz.github.io/arc))
|
|
120
|
-
- [react-boilerplate](https://github.com/mxstbr/react-boilerplate): A highly scalable, offline-first foundation with the best developer experience and a focus on performance and best practices
|
|
121
|
-
- [Scalable React Boilerplate](https://github.com/RyanCCollins/scalable-react-boilerplate)
|
|
122
|
-
- [Scalable React TypeScript Boilerplate](https://github.com/RyanCCollins/scalable-react-ts-boilerplate)
|
|
123
|
-
- [Superstylin'](https://github.com/bntzio/gatsby-starter-superstylin): A Gatsby starter with styled-components π
([demo](https://superstylin.netlify.com/))
|
|
124
|
-
|
|
125
|
-
### Websites
|
|
126
|
-
- [PostCSS.parts](http://postcss.parts): A searchable catalog of PostCSS plugins
|
|
127
|
-
- [spaceexperience.club](https://spaceexperience.club/): Brings you each day a stunning picture of our universe, Astronomy Picture of the Day. ([source](https://github.com/caspg/space-exp))
|
|
128
|
-
- [sachagreif.com](http://sachagreif.com): personal homepage built with [Gatsby](https://github.com/gatsbyjs/gatsby) ([source](https://github.com/SachaG/sg2017)).
|
|
129
|
-
- [ismaywolff.nl](https://ismaywolff.nl): personal portfolio with serverside rendering ([source](https://github.com/ismay/ismaywolff.nl)).
|
|
130
|
-
- [Dirtyredz.com](http://dirtyredz.com): David McClain | Dirtyredz - About me, Latest projects and Contact ([source](https://github.com/dirtyredz/dirtyredz.com))
|
|
131
|
-
- [Reactiflux](https://www.reactiflux.com): Reactiflux community home build with [Gatsby](https://github.com/gatsbyjs/gatsby) ([source](https://github.com/reactiflux/reactiflux.com)).
|
|
132
|
-
- [michaelhsu.tw](http://michaelhsu.tw): A simple static homepage built with CRA pre-renderer ([source](https://github.com/evenchange4/michaelhsu.tw)).
|
|
133
|
-
- [joeireland.com](https://joeireland.com): Portfolio of Joseph Ireland ([source](https://github.com/IamJoseph/JoesReactWebsite)).
|
|
134
|
-
- [rosesdaycare.center](https://rosesdaycare.center): Marketing website with theme colors that change on refresh ([source](https://github.com/anthony2025/roses-daycare)).
|
|
135
|
-
- [CodeSandbox](https://codesandbox.io/s/new): An online editor tailored for React development ([source](https://github.com/CompuIves/codesandbox-client)).
|
|
136
|
-
|
|
137
|
-
### Other
|
|
138
|
-
- [react-presents](https://bvaughn.github.io/react-presents/): Highly customizable React slideshow framework with syntaxt highlighting and mobile support.
|
|
139
|
-
- [react-adminlte-dash](https://github.com/zksailor534/react-adminlte-dash): AdminLTE dashboard components in React ([demo](http://zksailor534.github.io/react-adminlte-dash))
|
|
140
|
-
- [colors-show](https://github.com/RafalFilipek/colors-show): Present your application colors with style. ([demo](https://colors-show.now.sh/))
|
|
141
|
-
|
|
142
|
-
*Built something with `styled-components`? Submit a PR and add it to this list!*
|
|
143
|
-
|
|
144
|
-
## Further Reading
|
|
145
|
-
|
|
146
|
-
These are some great articles and talks about related topics in case you're hungry for more:
|
|
147
|
-
|
|
148
|
-
- [π "Scale" FUD and Style Components](https://medium.com/learnreact/scale-fud-and-style-components-c0ce87ec9772#.kzjba8lcg): Using components as low-level styling constructs
|
|
149
|
-
- [π The Future of Reusable CSS](https://www.youtube.com/watch?v=XR6eM_5pAb0): How component libraries should be styled, and why they're not yet
|
|
150
|
-
- [π Rendering Khan Academyβs Learn Menu Wherever I Please](https://medium.com/@jdan/rendering-khan-academys-learn-menu-wherever-i-please-4b58d4a9432d#.w9nshye05): Documenting the move from the handlebars + less combo to react and inline styles
|
|
151
|
-
- [π₯ Ryan's random thoughts about inline styles](https://www.youtube.com/watch?v=EkPcGS4TzdQ): Explaining some benefits of using styles in js
|
|
94
|
+
A lot of hard work goes into community libraries, projects, and guides. A lot of them make it easier to get started or help you with your next project! Thereβs also a whole lot of interesting apps and sites that people have built using styled-components.
|
|
95
|
+
|
|
96
|
+
Make sure to head over to [awesome-styled-components](https://github.com/styled-components/awesome-styled-components) to see them all! And please contribute and add your own work to the list so others can find it.
|
|
152
97
|
|
|
153
98
|
## Alternative Installation Methods
|
|
154
99
|
|