diff --git a/CHANGELOG.md b/CHANGELOG.md index e6f7e2949..5b9d5e6ec 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,8 @@ 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)) ## [v2.0.0] - 2017-05-25 @@ -33,6 +35,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 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. - diff --git a/README.md b/README.md index 2478c8119..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) @@ -110,6 +107,7 @@ We could use your help to get syntax highlighting support to other editors! If y - [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...) diff --git a/package.json b/package.json index 4ec84bbda..2a6259ad0 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", @@ -97,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/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 1769cb178..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') @@ -158,4 +192,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').extend.attrs({ + href: '/test' + })`` + + expect(shallow().html()).toEqual('') + }) }) 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 d419989c8..e7977ad74 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2505,9 +2505,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"