Merge branch 'master' into feature/typings-2

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
 

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.
-

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...)

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",

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)
   }
 }
 

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)
       }
     }

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,
+        )
       }
     }
 

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(<GrandGrandParent />)
+      const grandParent = shallow(<GrandParent />)
+      const parent = shallow(<Parent />)
+      const child = shallow(<Child />)
+
+      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', () => {

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(<GrandGrandParent />)
+    shallow(<GrandParent />)
+    shallow(<Parent />)
+    shallow(<Child />)
+
+    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(<Child />).html()).toEqual('<a href="/test" class="sc-c d"></a>')
+  })
 })

src/test/theme.test.js

@@ -356,7 +356,7 @@ describe('theming', () => {
       },
     }
 
-    const Theme = ({ props }) => (
+    const Theme = props => (
       <ThemeProvider theme={{ color: 'green' }}>
         <Text {...props} />
       </ThemeProvider>

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 => {

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"