From fb85770dbc0965e072b68a7ffa80c1243b8eb087 Mon Sep 17 00:00:00 2001 From: Jesse Hallett Date: Fri, 26 May 2017 12:05:32 -0400 Subject: [PATCH 01/11] Fixes for Flow v0.47.0 As of v0.47.0 Flow strictly checks function arity. That means you will get an error if you call a function with more arguments than are listed in the function signature. For details see https://flow.org/blog/2017/05/07/Strict-Function-Call-Arity/ There are also some changes to checking React component prop types. The latest Flow will report some errors that previous versions missed. The full changelog is here: https://github.com/facebook/flow/blob/master/Changelog.md#0470 --- package.json | 2 +- src/models/StyleSheetManager.js | 6 ++++-- src/test/theme.test.js | 2 +- src/utils/create-broadcast.js | 2 +- yarn.lock | 6 +++--- 5 files changed, 10 insertions(+), 8 deletions(-) diff --git a/package.json b/package.json index 20643fb67..a7e750468 100644 --- a/package.json +++ b/package.json @@ -96,7 +96,7 @@ "eslint-plugin-jsx-a11y": "^2.0.2", "eslint-plugin-react": "^6.8.0", "express": "^4.14.1", - "flow-bin": "^0.43.1", + "flow-bin": "^0.47.0", "flow-copy-source": "^1.1.0", "flow-watch": "^1.1.1", "jest": "^19.0.2", diff --git a/src/models/StyleSheetManager.js b/src/models/StyleSheetManager.js index b6b76469f..56834b6ec 100644 --- a/src/models/StyleSheetManager.js +++ b/src/models/StyleSheetManager.js @@ -10,8 +10,10 @@ class StyleSheetManager extends Component { render() { /* eslint-disable react/prop-types */ - // $FlowFixMe - return React.Children.only(this.props.children) + // Flow v0.43.1 will report an error accessing the `children` property, + // but v0.47.0 will not. It is necessary to use a type cast instead of + // a "fixme" comment to satisfy both Flow versions. + return React.Children.only((this.props: any).children) } } diff --git a/src/test/theme.test.js b/src/test/theme.test.js index af042bfa7..499f72101 100644 --- a/src/test/theme.test.js +++ b/src/test/theme.test.js @@ -356,7 +356,7 @@ describe('theming', () => { }, } - const Theme = ({ props }) => ( + const Theme = props => ( diff --git a/src/utils/create-broadcast.js b/src/utils/create-broadcast.js index e83609e27..28c38c897 100644 --- a/src/utils/create-broadcast.js +++ b/src/utils/create-broadcast.js @@ -7,7 +7,7 @@ export type Broadcast = { publish: (value: mixed) => void, - subscribe: (listener: () => void) => () => void + subscribe: (listener: (currentValue: mixed) => void) => () => void } const createBroadcast = (initialValue: mixed): Broadcast => { diff --git a/yarn.lock b/yarn.lock index 87feef57f..54a5ad403 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2499,9 +2499,9 @@ flat-cache@^1.2.1: graceful-fs "^4.1.2" write "^0.2.1" -flow-bin@^0.43.1: - version "0.43.1" - resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.43.1.tgz#0733958b448fb8ad4b1576add7e87c31794c81bc" +flow-bin@^0.47.0: + version "0.47.0" + resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.47.0.tgz#a2a08ab3e0d1f1cb57d17e27b30b118b62fda367" flow-copy-source@^1.1.0: version "1.1.0" From e7dad01e139158060980d0b9fe516d2c30e1104e Mon Sep 17 00:00:00 2001 From: Jesse Hallett Date: Sat, 27 May 2017 15:56:58 -0400 Subject: [PATCH 02/11] Note changes to Flow type signatures in changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 32e545201..d7fe66ae1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -29,6 +29,7 @@ All notable changes to this project will be documented in this file. If a contri - Restore `setNativeProps` in StyledNativeComponent, thanks to [@MatthieuLemoine](https://github.com/MatthieuLemoine). (see [#764](https://github.com/styled-components/styled-components/pull/764)) - Fix `ref` being passed to Stateless Functional Components in StyledNativeComponent. (see [#828](https://github.com/styled-components/styled-components/pull/828)) - Add `displayName` to `componentId` when both are present (see [#821](https://github.com/styled-components/styled-components/pull/821)) +- Fix Flow type signatures for compatibility with Flow v0.47.0 (see [#840](https://github.com/styled-components/styled-components/pull/840)) ## [v1.4.6] - 2017-05-02 From b196467e34b8c8715d51f25890d67098b22165fb Mon Sep 17 00:00:00 2001 From: Brandon Mills Date: Mon, 29 May 2017 11:48:04 -0400 Subject: [PATCH 03/11] Fix typo in contributing docs clone URL --- CONTRIBUTING.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 25b832364..5ee22c382 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -10,7 +10,7 @@ Please also give the code of conduct a read. Also make sure that no one else is already working on it. We don't want you to be disappointed. -2. Fork, then clone: `git clone httpsL://github.com/YOUR_USERNAME/styled-components.git` +2. Fork, then clone: `git clone https://github.com/YOUR_USERNAME/styled-components.git` 3. Create a branch with a meaningful name for the issue: `git checkout -b fix-something` @@ -35,4 +35,3 @@ Run `npm install` and edit code in the `src/` folder. It's luckily very simple! When you commit our pre-commit hook will run, which executes `lint-staged`. It will run the linter automatically and warn you, if the code you've written doesn't comply with our code style. - From 4a62d5d541f8338144d054e19eccf7298612c65f Mon Sep 17 00:00:00 2001 From: Brandon Mills Date: Mon, 29 May 2017 12:06:03 -0400 Subject: [PATCH 04/11] Failing test: withComponent(...).attrs is not a function Should it be possible to add `attrs` after overriding `withComponent`? I found a test for `withComponent` followed by `extend`, but none for `attrs`, so I added one: ```js const Parent = styled.button` color: red; ` const Child = Parent.withComponent('a').attrs({ href: '/test' })`` ``` Currently this throws `TypeError: Parent.withComponent(...).attrs is not a function`. --- src/test/extending.test.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/test/extending.test.js b/src/test/extending.test.js index 1769cb178..36caafe28 100644 --- a/src/test/extending.test.js +++ b/src/test/extending.test.js @@ -158,4 +158,15 @@ describe('extending', () => { .sc-c {} .d { color: red; color: green; } `) }) + + it('should allow changing component and adding attributes', () => { + const Parent = styled.button` + color: red; + ` + const Child = Parent.withComponent('a').attrs({ + href: '/test' + })`` + + expect(shallow().html()).toEqual('') + }) }) From a7e47c318ac6c12f0149d4d1f5e5fe38bb8d4e54 Mon Sep 17 00:00:00 2001 From: Brandon Mills Date: Fri, 2 Jun 2017 01:47:59 -0400 Subject: [PATCH 05/11] Insert extend in withComponenet attrs test --- src/test/extending.test.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/test/extending.test.js b/src/test/extending.test.js index 36caafe28..88eb5d457 100644 --- a/src/test/extending.test.js +++ b/src/test/extending.test.js @@ -163,10 +163,10 @@ describe('extending', () => { const Parent = styled.button` color: red; ` - const Child = Parent.withComponent('a').attrs({ + const Child = Parent.withComponent('a').extend.attrs({ href: '/test' })`` - expect(shallow().html()).toEqual('') + expect(shallow().html()).toEqual('') }) }) From 3d455b67aaaf9f8e88e5d539a93a8bbb9afd63c0 Mon Sep 17 00:00:00 2001 From: Brandon Mills Date: Fri, 2 Jun 2017 02:33:39 -0400 Subject: [PATCH 06/11] Add changelog entry --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index e6f7e2949..5f4802f7a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,7 @@ All notable changes to this project will be documented in this file. If a contri ## [Unreleased] +- Added a test for `withComponent` followed by `attrs`, thanks to [@btmills](https://github.com/btmills). (see [#851](https://github.com/styled-components/styled-components/pull/851)) - Upgrade stylis to v3.0.4. (see [#829](https://github.com/styled-components/styled-components/pull/829)) ## [v2.0.0] - 2017-05-25 From bb7f11ac08e99d85e3c70a6b894feee5d627aa44 Mon Sep 17 00:00:00 2001 From: Rolf Erik Lekang Date: Fri, 2 Jun 2017 20:25:11 +0200 Subject: [PATCH 07/11] Remove the flow copy logic from build process These should not be used anymore as we have written in the docs lately libdef is now the easiest way to use flow with styled-components. Using the sources as we did earlier generates a lot of errors that is hard to avoid. --- package.json | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/package.json b/package.json index 616498314..028da4348 100644 --- a/package.json +++ b/package.json @@ -7,10 +7,9 @@ "jsnext:main": "dist/styled-components.es.js", "module": "dist/styled-components.es.js", "scripts": { - "build": "npm run build:lib && npm run build:dist && npm run build:flow", + "build": "npm run build:lib && npm run build:dist", "prebuild:lib": "rimraf lib/*", "build:lib": "babel --out-dir lib src", - "build:flow": "flow-copy-source -v -i '{**/test/*.js,**/*.test.js}' src lib", "prebuild:dist": "rimraf dist/*", "build:dist": "rollup -c && rollup -c --environment ESBUNDLE && rollup -c --environment PRODUCTION", "build:watch": "npm run build:lib -- --watch", From ad471b85f7fa810f92ea09c6f5da19033d51fb43 Mon Sep 17 00:00:00 2001 From: Erik Rasmussen Date: Fri, 2 Jun 2017 21:06:30 +0200 Subject: [PATCH 08/11] Added reference to styled-components-theme lib --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 2478c8119..662202386 100644 --- a/README.md +++ b/README.md @@ -106,6 +106,7 @@ We could use your help to get syntax highlighting support to other editors! If y #### Helpers - [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)) - [styled-components-breakpoint](https://github.com/jameslnewell/styled-components-breakpoint): Utility function for using breakpoints with `styled-components`. +- [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)};` - [styled-theme](https://github.com/diegohaz/styled-theme): Extensible theming system for styled-components. - [styled-tools](https://github.com/diegohaz/styled-tools): Useful interpolated functions for styled-components. - [styled-ax](https://github.com/Lokua/styled-ax): Functional theme property accessor(s) From 871bcfaf19b606769042bd7426b4dfd258a97e71 Mon Sep 17 00:00:00 2001 From: Erik Rasmussen Date: Fri, 2 Jun 2017 21:11:40 +0200 Subject: [PATCH 09/11] Placed at end of list. --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 662202386..36ff14bb9 100644 --- a/README.md +++ b/README.md @@ -106,11 +106,11 @@ We could use your help to get syntax highlighting support to other editors! If y #### Helpers - [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)) - [styled-components-breakpoint](https://github.com/jameslnewell/styled-components-breakpoint): Utility function for using breakpoints with `styled-components`. -- [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)};` - [styled-theme](https://github.com/diegohaz/styled-theme): Extensible theming system for styled-components. - [styled-tools](https://github.com/diegohaz/styled-tools): Useful interpolated functions for styled-components. - [styled-ax](https://github.com/Lokua/styled-ax): Functional theme property accessor(s) - [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. +- [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)};` ### Boilerplates - [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...) From 6d9a0a5d5e7de7b1d531f7deed46d31478a7ca37 Mon Sep 17 00:00:00 2001 From: Bruno Lemos Date: Sun, 4 Jun 2017 21:53:37 -0300 Subject: [PATCH 10/11] Fix extend for 3 or more inheritances (Fix #780) --- CHANGELOG.md | 1 + src/models/StyledComponent.js | 19 +++++++++-- src/models/StyledNativeComponent.js | 25 +++++++++++++-- src/native/test/native.test.js | 49 +++++++++++++++++++++++++++++ src/test/extending.test.js | 34 ++++++++++++++++++++ 5 files changed, 123 insertions(+), 5 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5f4802f7a..83471e8f6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,7 @@ All notable changes to this project will be documented in this file. If a contri ## [Unreleased] +- Fixed `extend` not working with 3 or more inheritances, thanks to [@brunolemos](https://twitter.com/brunolemos). (see [#871](https://github.com/styled-components/styled-components/pull/871)) - Added a test for `withComponent` followed by `attrs`, thanks to [@btmills](https://github.com/btmills). (see [#851](https://github.com/styled-components/styled-components/pull/851)) - Upgrade stylis to v3.0.4. (see [#829](https://github.com/styled-components/styled-components/pull/829)) diff --git a/src/models/StyledComponent.js b/src/models/StyledComponent.js index 3d93d404f..238471cac 100644 --- a/src/models/StyledComponent.js +++ b/src/models/StyledComponent.js @@ -214,8 +214,23 @@ export default (ComponentStyle: Function, constructWithOptions: Function) => { } static get extend() { - const { displayName: _, componentId: __, ...optionsToCopy } = options - const newOptions = { ...optionsToCopy, rules, ParentComponent: StyledComponent } + const { + displayName: _, + componentId: __, + rules: rulesFromOptions, + ...optionsToCopy + } = options + + const newRules = rulesFromOptions === undefined + ? rules + : rulesFromOptions.concat(rules) + + const newOptions = { + ...optionsToCopy, + rules: newRules, + ParentComponent: StyledComponent, + } + return constructWithOptions(createStyledComponent, target, newOptions) } } diff --git a/src/models/StyledNativeComponent.js b/src/models/StyledNativeComponent.js index 4f03f20be..0b0a1de01 100644 --- a/src/models/StyledNativeComponent.js +++ b/src/models/StyledNativeComponent.js @@ -182,9 +182,28 @@ export default (constructWithOptions: Function) => { } static get extend() { - const { displayName: _, componentId: __, ...optionsToCopy } = options - const newOptions = { ...optionsToCopy, rules, ParentComponent: StyledNativeComponent } - return constructWithOptions(createStyledNativeComponent, target, newOptions) + const { + displayName: _, + componentId: __, + rules: rulesFromOptions, + ...optionsToCopy + } = options + + const newRules = rulesFromOptions === undefined + ? rules + : rulesFromOptions.concat(rules) + + const newOptions = { + ...optionsToCopy, + rules: newRules, + ParentComponent: StyledNativeComponent, + } + + return constructWithOptions( + createStyledNativeComponent, + target, + newOptions, + ) } } diff --git a/src/native/test/native.test.js b/src/native/test/native.test.js index d7ee1e180..775f5cbf9 100644 --- a/src/native/test/native.test.js +++ b/src/native/test/native.test.js @@ -55,6 +55,55 @@ describe('native', () => { }, undefined ]) }) + + it('should combine styles of extending components in >= 3 inheritances', () => { + const GrandGrandParent = styled.View`background-color: red;` + const GrandParent = GrandGrandParent.extend`borderWidth: 10;` + const Parent = GrandParent.extend`opacity: 0.9;` + const Child = Parent.extend`padding: 10px;` + + const grandGrandParent = shallow() + const grandParent = shallow() + const parent = shallow() + const child = shallow() + + 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', () => { diff --git a/src/test/extending.test.js b/src/test/extending.test.js index 88eb5d457..e22a70bc9 100644 --- a/src/test/extending.test.js +++ b/src/test/extending.test.js @@ -138,6 +138,40 @@ describe('extending', () => { expect(Child.fetchData()).toEqual(1) }) + it('should keep styles in >= 3 inheritances', () => { + const GrandGrandParent = styled.div` + background-color: red; + ` + + const GrandParent = GrandGrandParent.extend` + color: blue; + ` + + const Parent = GrandParent.extend` + border: 2px solid black; + ` + + const Child = Parent.extend` + border-width: 10; + ` + + shallow() + shallow() + shallow() + shallow() + + expectCSSMatches(` + .sc-a { } + .e { background-color: red; } + .sc-b { } + .f { background-color: red; color: blue; } + .sc-c { } + .g { background-color: red; color: blue; border: 2px solid black; } + .sc-d { } + .h { background-color: red; color: blue; border: 2px solid black; border-width: 10; } + `) + }) + it('should allow changing component', () => { const Parent = styled.div`color: red;` const Child = Parent.withComponent('span') From 07c83172edaa7f99d46ed892b09caa68fac567b2 Mon Sep 17 00:00:00 2001 From: Max Stoiber Date: Mon, 5 Jun 2017 12:52:14 +0200 Subject: [PATCH 11/11] Update badges - Link to new [Spectrum community forum](https://spectrum.chat/styled-components) - Remove build status badges (they aren't necessary at all since they don't correspond to what people install) - Remove "Supported by Thinkmill"-badge (I no longer work there) --- README.md | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/README.md b/README.md index 36ff14bb9..73d549c22 100644 --- a/README.md +++ b/README.md @@ -10,10 +10,7 @@ npm install --save styled-components ``` [![npm](https://img.shields.io/npm/v/styled-components.svg)](https://www.npmjs.com/package/styled-components) -[![Travis Build Status](https://travis-ci.org/styled-components/styled-components.svg?branch=master)](https://travis-ci.org/styled-components/styled-components) -[![AppVeyor Build Status](https://ci.appveyor.com/api/projects/status/github/gruntjs/grunt?branch=master&svg=true)](https://ci.appveyor.com/project/mxstbr/styled-components) -[![Supported by Thinkmill](https://thinkmill.github.io/badge/heart.svg)](http://thinkmill.com.au/?utm_source=github&utm_medium=badge&utm_campaign=styled-components) -[![gitter](https://camo.githubusercontent.com/54dc79dc7da6b76b17bc8013342da9b4266d993c/68747470733a2f2f6261646765732e6769747465722e696d2f6d78737462722f72656163742d626f696c6572706c6174652e737667)](https://gitter.im/styled-components/styled-components) +[![Join the community on Spectrum](https://withspectrum.github.io/badge/badge.svg)](https://spectrum.chat/styled-components) ![gzip size](http://img.badgesize.io/https://unpkg.com/styled-components/dist/styled-components.min.js?compression=gzip&label=gzip%20size) ![size](http://img.badgesize.io/https://unpkg.com/styled-components/dist/styled-components.min.js?label=size)