From 54b4367b4e2addc8f41cd7b5fc538850895fa340 Mon Sep 17 00:00:00 2001 From: Gajus Kuizinas Date: Thu, 9 Aug 2018 11:07:10 +0100 Subject: [PATCH 01/11] docs: add DEPRECATION NOTICE --- README.md | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index d16c474..28c29da 100644 --- a/README.md +++ b/README.md @@ -8,9 +8,7 @@ React CSS Modules implement automatic mapping of CSS modules. Every CSS class is assigned a local-scoped identifier with a global unique name. CSS Modules enable a modular and reusable CSS! -> ⚠️⚠️⚠️ -> -> Note: +> ## ⚠️⚠️⚠️ DEPRECATION NOTICE ⚠️⚠️⚠️ > > If you are considering to use `react-css-modules`, evaluate if [`babel-plugin-react-css-modules`](https://github.com/gajus/babel-plugin-react-css-modules) covers your use case. > `babel-plugin-react-css-modules` is a lightweight alternative of `react-css-modules`. @@ -18,8 +16,7 @@ React CSS Modules implement automatic mapping of CSS modules. Every CSS class is > `babel-plugin-react-css-modules` is not a drop-in replacement and does not cover all the use cases of `react-css-modules`. > However, it has a lot smaller performance overhead (0-10% vs +50%; see [Performance](https://github.com/gajus/babel-plugin-react-css-modules#performance)) and a lot smaller size footprint (less than 2kb vs +17kb). > -> It is easy to get started! -> See the demo https://github.com/gajus/babel-plugin-react-css-modules/tree/master/demo +> It is easy to get started! See the demo https://github.com/gajus/babel-plugin-react-css-modules/tree/master/demo - [CSS Modules](#css-modules) - [webpack `css-loader`](#webpack-css-loader) From 982fcf53fefab011a7c9ce07d3a68473f34e3eca Mon Sep 17 00:00:00 2001 From: Vitaliy Mazurenko Date: Fri, 10 Aug 2018 11:47:01 +0300 Subject: [PATCH 02/11] fix: #285 react-css-modules causes modifying key property of the component children (#286) --- src/linkClass.js | 2 +- tests/linkClass.js | 16 ++++++++++++++++ 2 files changed, 17 insertions(+), 1 deletion(-) diff --git a/src/linkClass.js b/src/linkClass.js index 4618446..73783b4 100644 --- a/src/linkClass.js +++ b/src/linkClass.js @@ -50,7 +50,7 @@ const linkElement = (element: ReactElement, styles: Object, configuration: Objec if (React.isValidElement(children)) { elementShallowCopy.props.children = linkElement(React.Children.only(children), styles, configuration); } else if (_.isArray(children) || isIterable(children)) { - elementShallowCopy.props.children = React.Children.map(children, (node) => { + elementShallowCopy.props.children = _.map(children, (node) => { if (React.isValidElement(node)) { // eslint-disable-next-line no-use-before-define return linkElement(React.Children.only(node), styles, configuration); diff --git a/tests/linkClass.js b/tests/linkClass.js index 6a13f21..90a66b2 100644 --- a/tests/linkClass.js +++ b/tests/linkClass.js @@ -141,6 +141,22 @@ describe('linkClass', () => { expect(subject.props.children[0].props).not.to.have.property('styleName'); expect(subject.props.children[1].props).not.to.have.property('styleName'); }); + it('preserves original keys', () => { + let subject; + + subject =
+

+

+

; + + subject = linkClass(subject, { + bar: 'bar-1', + foo: 'foo-1' + }); + + expect(subject.props.children[0].key).to.equal('1'); + expect(subject.props.children[1].key).to.equal('2'); + }); }); context('when multiple descendants have styleName and are iterable', () => { it('assigns a generated className', () => { From 7a87ee39cac01b100596a3dbefbb8f6624337f34 Mon Sep 17 00:00:00 2001 From: Vitaliy Mazurenko Date: Wed, 22 Aug 2018 14:19:57 +0300 Subject: [PATCH 03/11] fix: assign a generated className to elements inside nested arrays (#292) --- src/linkClass.js | 9 +-------- tests/linkClass.js | 27 +++++++++++++++++++++++++++ 2 files changed, 28 insertions(+), 8 deletions(-) diff --git a/src/linkClass.js b/src/linkClass.js index 73783b4..d296742 100644 --- a/src/linkClass.js +++ b/src/linkClass.js @@ -50,14 +50,7 @@ const linkElement = (element: ReactElement, styles: Object, configuration: Objec if (React.isValidElement(children)) { elementShallowCopy.props.children = linkElement(React.Children.only(children), styles, configuration); } else if (_.isArray(children) || isIterable(children)) { - elementShallowCopy.props.children = _.map(children, (node) => { - if (React.isValidElement(node)) { - // eslint-disable-next-line no-use-before-define - return linkElement(React.Children.only(node), styles, configuration); - } else { - return node; - } - }); + elementShallowCopy.props.children = linkArray(objectUnfreeze(children), styles, configuration); } _.forEach(restProps, (propValue, propName) => { diff --git a/tests/linkClass.js b/tests/linkClass.js index 90a66b2..cf7c289 100644 --- a/tests/linkClass.js +++ b/tests/linkClass.js @@ -125,6 +125,33 @@ describe('linkClass', () => { expect(subject.props.children[0].props.className).to.equal('foo-1'); expect(subject.props.children[1].props.className).to.equal('bar-1'); }); + it('assigns a generated className to elements inside nested arrays', () => { + let subject; + + subject =
+ {[ + [ +

, +

+ ], + [ +

, +

+ ] + ]} +

; + + subject = linkClass(subject, { + bar: 'bar-1', + foo: 'foo-1' + }); + + expect(subject.props.children[0][0].props.className).to.equal('foo-1'); + expect(subject.props.children[0][1].props.className).to.equal('bar-1'); + + expect(subject.props.children[1][0].props.className).to.equal('foo-1'); + expect(subject.props.children[1][1].props.className).to.equal('bar-1'); + }); it('styleName is deleted from props', () => { let subject; From 5e787d41192c96d5650a3036443cff2bb977cd39 Mon Sep 17 00:00:00 2001 From: Gajus Kuizinas Date: Fri, 30 Nov 2018 14:36:09 +0000 Subject: [PATCH 04/11] fix: implement a fix for React warning --- src/extendReactClass.js | 27 +++++++++++++++++++++++---- 1 file changed, 23 insertions(+), 4 deletions(-) diff --git a/src/extendReactClass.js b/src/extendReactClass.js index f1f41a6..23f251b 100644 --- a/src/extendReactClass.js +++ b/src/extendReactClass.js @@ -18,7 +18,9 @@ export default (Component: Object, defaultStyles: Object, options: Object) => { let styles; const hasDefaultstyles = _.isObject(defaultStyles); - + + let renderResult; + if (this.props.styles || hasDefaultstyles) { const props = Object.assign({}, this.props); @@ -35,14 +37,31 @@ export default (Component: Object, defaultStyles: Object, options: Object) => { value: styles, writable: false }); + + const originalProps = this.props; + + let renderIsSuccessful = false; - this.props = props; + try { + this.props = props; + + renderResult = super.render(); + + renderIsSuccessful = true; + } finally { + this.props = originalProps; + } + + // @see https://github.com/facebook/react/issues/14224 + if (!renderIsSuccessful) { + renderResult = super.render(); + } } else { styles = {}; + + renderResult = super.render(); } - const renderResult = super.render(); - if (renderResult) { return linkClass(renderResult, styles, options); } From 0d96a9f943c1a74db6fefa4dd74162ca202dba37 Mon Sep 17 00:00:00 2001 From: Gajus Kuizinas Date: Fri, 30 Nov 2018 14:39:48 +0000 Subject: [PATCH 05/11] style: remove trailing spaces --- src/extendReactClass.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/extendReactClass.js b/src/extendReactClass.js index 23f251b..4741bea 100644 --- a/src/extendReactClass.js +++ b/src/extendReactClass.js @@ -18,9 +18,9 @@ export default (Component: Object, defaultStyles: Object, options: Object) => { let styles; const hasDefaultstyles = _.isObject(defaultStyles); - + let renderResult; - + if (this.props.styles || hasDefaultstyles) { const props = Object.assign({}, this.props); @@ -37,28 +37,28 @@ export default (Component: Object, defaultStyles: Object, options: Object) => { value: styles, writable: false }); - + const originalProps = this.props; - + let renderIsSuccessful = false; try { this.props = props; - + renderResult = super.render(); - + renderIsSuccessful = true; } finally { this.props = originalProps; } - + // @see https://github.com/facebook/react/issues/14224 if (!renderIsSuccessful) { renderResult = super.render(); } } else { styles = {}; - + renderResult = super.render(); } From f65a5512a71399247e97a6ed8575dca18555bcfb Mon Sep 17 00:00:00 2001 From: Gajus Kuizinas Date: Fri, 30 Nov 2018 14:40:47 +0000 Subject: [PATCH 06/11] chore: add .editorconfig --- .editorconfig | 9 +++++++++ .gitignore | 7 ++++--- 2 files changed, 13 insertions(+), 3 deletions(-) create mode 100644 .editorconfig diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..0f17867 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,9 @@ +root = true + +[*] +charset = utf-8 +end_of_line = lf +indent_size = 2 +indent_style = space +insert_final_newline = true +trim_trailing_whitespace = true diff --git a/.gitignore b/.gitignore index d54786c..df978de 100755 --- a/.gitignore +++ b/.gitignore @@ -3,9 +3,10 @@ coverage dist *.log .* -!.README +!.babelrc +!.editorconfig +!.eslintrc !.gitignore !.npmignore -!.babelrc +!.README !.travis.yml -!.eslintrc From 4d6a71ebc3b1ce4f19b1f13951f2ddc5e0e0e56e Mon Sep 17 00:00:00 2001 From: Vitaliy Date: Thu, 3 Jan 2019 19:41:07 +0200 Subject: [PATCH 07/11] fix: unfreeze nested children array before passing it to linkArray (#293) --- src/linkClass.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/linkClass.js b/src/linkClass.js index d296742..4ed3975 100644 --- a/src/linkClass.js +++ b/src/linkClass.js @@ -13,7 +13,9 @@ const linkArray = (array: Array, styles: Object, configuration: Object) => { // eslint-disable-next-line no-use-before-define array[index] = linkElement(React.Children.only(value), styles, configuration); } else if (_.isArray(value)) { - array[index] = linkArray(value, styles, configuration); + const unfreezedValue = Object.isFrozen(value) ? objectUnfreeze(value) : value; + + array[index] = linkArray(unfreezedValue, styles, configuration); } }); From 4f143d358a7fdca48b5e651cf55e942c2857a8e3 Mon Sep 17 00:00:00 2001 From: Gajus Kuizinas Date: Thu, 9 May 2019 17:52:52 +0100 Subject: [PATCH 08/11] docs: add GitSpo mentions badge --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 28c29da..484f9e7 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,6 @@ # React CSS Modules +![[GitSpo Mentions](https://gitspo.com/mentions/gajus/react-css-modules)](https://gitspo.com/badges/gajus/react-css-modules?style=flat-square) [![Travis build status](http://img.shields.io/travis/gajus/react-css-modules/master.svg?style=flat-square)](https://travis-ci.org/gajus/react-css-modules) [![NPM version](http://img.shields.io/npm/v/react-css-modules.svg?style=flat-square)](https://www.npmjs.org/package/react-css-modules) [![js-canonical-style](https://img.shields.io/badge/code%20style-canonical-blue.svg?style=flat-square)](https://github.com/gajus/canonical) From 3d29360dc3b1d400efa4523c77620f591f969546 Mon Sep 17 00:00:00 2001 From: Gajus Kuizinas Date: Thu, 9 May 2019 17:59:01 +0100 Subject: [PATCH 09/11] fix: correct GitSpo badge markdown --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 484f9e7..4d7f5af 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # React CSS Modules -![[GitSpo Mentions](https://gitspo.com/mentions/gajus/react-css-modules)](https://gitspo.com/badges/gajus/react-css-modules?style=flat-square) +[![GitSpo Mentions](https://gitspo.com/badges/gajus/react-css-modules?style=flat-square)](https://gitspo.com/mentions/gajus/react-css-modules) [![Travis build status](http://img.shields.io/travis/gajus/react-css-modules/master.svg?style=flat-square)](https://travis-ci.org/gajus/react-css-modules) [![NPM version](http://img.shields.io/npm/v/react-css-modules.svg?style=flat-square)](https://www.npmjs.org/package/react-css-modules) [![js-canonical-style](https://img.shields.io/badge/code%20style-canonical-blue.svg?style=flat-square)](https://github.com/gajus/canonical) From b1a8dcfcea558c3f963ae300a28bf13d23295fbd Mon Sep 17 00:00:00 2001 From: Gajus Kuizinas Date: Sat, 11 May 2019 09:25:53 +0100 Subject: [PATCH 10/11] fix: update GitSpo badge URL --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 4d7f5af..a6b7399 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # React CSS Modules -[![GitSpo Mentions](https://gitspo.com/badges/gajus/react-css-modules?style=flat-square)](https://gitspo.com/mentions/gajus/react-css-modules) +[![GitSpo Mentions](https://gitspo.com/badges/mentions/gajus/react-css-modules?style=flat-square)](https://gitspo.com/mentions/gajus/react-css-modules) [![Travis build status](http://img.shields.io/travis/gajus/react-css-modules/master.svg?style=flat-square)](https://travis-ci.org/gajus/react-css-modules) [![NPM version](http://img.shields.io/npm/v/react-css-modules.svg?style=flat-square)](https://www.npmjs.org/package/react-css-modules) [![js-canonical-style](https://img.shields.io/badge/code%20style-canonical-blue.svg?style=flat-square)](https://github.com/gajus/canonical) From 629e80e25069e1b7597da76534395c21a9d499d4 Mon Sep 17 00:00:00 2001 From: Gajus Kuizinas Date: Wed, 19 Jun 2019 10:12:55 +0200 Subject: [PATCH 11/11] Create FUNDING.yml --- .github/FUNDING.yml | 2 ++ 1 file changed, 2 insertions(+) create mode 100644 .github/FUNDING.yml diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml new file mode 100644 index 0000000..2f093a7 --- /dev/null +++ b/.github/FUNDING.yml @@ -0,0 +1,2 @@ +github: gajus +patreon: gajus