Single ReactElement not an array.

Author: gajus

dist/linkClass.js

@@ -67,9 +67,7 @@ linkClass = function (element, styles, userConfiguration) {
         appendClassName = appendClassName.join(' ');
     }
 
-    // A child can be either an array, a sole object or a string.
-    // <div>test</div>
-    if (_utils2['default'].isArray(element.props.children)) {
+    if (_utils2['default'].isArray(element.props.children) || _react2['default'].isValidElement(element.props.children)) {
         childrenCount = _react2['default'].Children.count(element.props.children);
 
         // console.log('childrenCount', childrenCount, 'element.props.children', element.props.children);

src/linkClass.js

@@ -49,9 +49,7 @@ linkClass = (element, styles = {}, userConfiguration) => {
         appendClassName = appendClassName.join(' ');
     }
 
-    // A child can be either an array, a sole object or a string.
-    // <div>test</div>
-    if (_.isArray(element.props.children)) {
+    if (_.isArray(element.props.children) || React.isValidElement(element.props.children)) {
         childrenCount = React.Children.count(element.props.children);
 
         // console.log('childrenCount', childrenCount, 'element.props.children', element.props.children);

test/linkClass.js

@@ -63,6 +63,39 @@ describe('linkClass', () => {
     });
 
     context('when styleName matches an existing CSS module', () => {
+        context('when a descendant element has styleName', () => {
+            it('assigns a generated className', () => {
+                let subject;
+
+                subject = <div>
+                    <p styleName='foo'></p>
+                </div>;
+
+                subject = linkClass(subject, {
+                    foo: 'foo-1'
+                });
+
+                expect(subject.props.children.props.className).to.equal('foo-1');
+            });
+        });
+        context('when multiple descendant elements have styleName', () => {
+            it('assigns a generated className', () => {
+                let subject;
+
+                subject = <div>
+                    <p styleName='foo'></p>
+                    <p styleName='bar'></p>
+                </div>;
+
+                subject = linkClass(subject, {
+                    foo: 'foo-1',
+                    bar: 'bar-1'
+                });
+
+                expect(subject.props.children['.0'].props.className).to.equal('foo-1');
+                expect(subject.props.children['.1'].props.className).to.equal('bar-1');
+            });
+        });
         context('when ReactElement does not have an existing className', () => {
             it('uses the generated class name to set the className property', () => {
                 let subject;