From 4a62d5d541f8338144d054e19eccf7298612c65f Mon Sep 17 00:00:00 2001 From: Brandon Mills Date: Mon, 29 May 2017 12:06:03 -0400 Subject: [PATCH 1/8] 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 2/8] 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 3/8] 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 4/8] 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 5/8] 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 6/8] 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 7/8] 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 8/8] 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)