Merge commit '7a87ee39cac01b100596a3dbefbb8f6624337f34'

Author: Nes-si

.babelrc

@@ -1,14 +1,19 @@
 {
-    "presets": [
-        "es2015",
-        "stage-0",
-        "react"
+  "plugins": [
+    "add-module-exports",
+    "lodash",
+    "transform-class-properties",
+    [
+      "transform-es2015-classes",
+      {
+        "loose": true
+      }
     ],
-    "plugins": [
-        "add-module-exports",
-        "lodash",
-	"transform-class-properties",
-	["transform-es2015-classes", { "loose": true }],
-	"transform-proto-to-assign"
-    ]
+    "transform-proto-to-assign"
+  ],
+  "presets": [
+    "es2015",
+    "stage-0",
+    "react"
+  ]
 }

.travis.yml

@@ -1,8 +1,7 @@
 language: node_js
 node_js:
-  - 7
-  - 6
-  - 5
+  - node
+  - 8
 before_install:
   - npm config set depth 0
 notifications:

README.md

@@ -8,18 +8,15 @@
 
 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`.
 >
 > `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)

package.json

@@ -20,7 +20,7 @@
   },
   "license": "BSD-3-Clause",
   "dependencies": {
-    "hoist-non-react-statics": "^1.2.0",
+    "hoist-non-react-statics": "^2.5.5",
     "lodash": "^4.16.6",
     "object-unfreeze": "^1.1.0"
   },

src/extendReactClass.js

@@ -22,11 +22,11 @@ export default (Component: Object, defaultStyles: Object, options: Object) => {
       if (this.props.styles || hasDefaultstyles) {
         const props = Object.assign({}, this.props);
 
-        if (this.props.styles) {
-          styles = this.props.styles;
+        if (props.styles) {
+          styles = props.styles;
         } else if (hasDefaultstyles) {
           styles = defaultStyles;
-          delete this.props.styles;
+          delete props.styles;
         }
 
         Object.defineProperty(props, 'styles', {

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 = React.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) => {

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 = <div>
+          {[
+            [
+              <p key='1' styleName='foo' />,
+              <p key='2' styleName='bar' />
+            ],
+            [
+              <p key='1' styleName='foo' />,
+              <p key='2' styleName='bar' />
+            ]
+          ]}
+        </div>;
+
+        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;
 
@@ -141,6 +168,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 = <div>
+          <p key='1' styleName='foo' />
+          <p key='2' styleName='bar' />
+        </div>;
+
+        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', () => {