Handle single text node.

Author: gajus

README.md

@@ -2,3 +2,11 @@
 
 [![Travis build status](http://img.shields.io/travis/gajus/react-css-modules/master.svg?style=flat)](https://travis-ci.org/gajus/react-css-modules)
 [![NPM version](http://img.shields.io/npm/v/react-css-modules.svg?style=flat)](https://www.npmjs.org/package/react-css-modules)
+
+## Usage
+
+First you need to setup [webpack](http://webpack.github.io/docs/) to load your css files using "css" loader and enable CSS modules. You will also need to use `extract-text-webpack-plugin` to construct the CSS file. Refer to [webpack-demo](https://github.com/css-modules/webpack-demo).
+
+```js
+
+```

dist/index.js

@@ -20,7 +20,7 @@ var _linkClass2 = _interopRequireDefault(_linkClass);
 
 /**
  * @param {ReactClass} Target
- * @param {Object} styles
+ * @param {Object} styles {localClassName: 'generatedClassName'}
  * @return {ReactClass}
  */
 

dist/linkClass.js

@@ -10,14 +10,6 @@ var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
-var _lodashLangIsArray = require('lodash/lang/isArray');
-
-var _lodashLangIsArray2 = _interopRequireDefault(_lodashLangIsArray);
-
-var _lodashLangToarray = require('lodash/lang/toarray');
-
-var _lodashLangToarray2 = _interopRequireDefault(_lodashLangToarray);
-
 var linkClass = undefined;
 
 /**
@@ -43,25 +35,37 @@ linkClass = function (element) {
         }).join(' ');
     }
 
-    childrenCount = _react2['default'].Children.count(element.props.children);
-
-    if (childrenCount > 1) {
-        newChildren = [];
-
-        _react2['default'].Children.forEach(element.props.children, function (node) {
-            if (_react2['default'].isValidElement(node)) {
-                newChildren.push(linkClass(node, styles));
-            } else {
-                newChildren.push(node);
+    // A child can be either an array, a sole object or a string.
+    // <div>test</div>
+    if (typeof element.props.children !== 'string') {
+        childrenCount = _react2['default'].Children.count(element.props.children);
+
+        if (childrenCount > 1) {
+            newChildren = [];
+
+            _react2['default'].Children.forEach(element.props.children, function (node) {
+                if (_react2['default'].isValidElement(node)) {
+                    newChildren.push(linkClass(node, styles));
+                } else {
+                    newChildren.push(node);
+                }
+            });
+
+            // Do not use React.Children.map.
+            // For whatever reason React render multiple children as an array, while
+            // React.Children.map generates an object.
+
+            /* newChildren = React.Children.map((node) => {
+                if (React.isValidElement(node)) {
+                    return linkClass(node, styles);
+                } else {
+                    return node;
+                }
+            }); */
+        } else if (childrenCount === 1) {
+                newChildren = linkClass(_react2['default'].Children.only(element.props.children), styles);
             }
-        });
-
-        // Do not use React.Children.map.
-        // For whatever reason React render multiple children as an array, while
-        // React.Children.map generates an object.
-    } else if (childrenCount === 1) {
-            newChildren = linkClass(_react2['default'].Children.only(element.props.children), styles);
-        } else {}
+    }
 
     if (newClassName) {
         newProps = {

package.json

@@ -25,6 +25,7 @@
     "lodash": "^3.10.1"
   },
   "devDependencies": {
+    "babel": "^5.8.21",
     "chai": "^3.2.0",
     "jsdom": "^6.2.0",
     "mocha": "^2.2.5",

src/index.js

@@ -2,7 +2,7 @@ import linkClass from './linkClass';
 
 /**
  * @param {ReactClass} Target
- * @param {Object} styles
+ * @param {Object} styles {localClassName: 'generatedClassName'}
  * @return {ReactClass}
  */
 export default (Target, styles) => {

src/linkClass.js

@@ -1,6 +1,4 @@
 import React from 'react';
-import isArray from 'lodash/lang/isArray';
-import toArray from 'lodash/lang/toarray';
 
 let linkClass;
 
@@ -25,29 +23,39 @@ linkClass = (element, styles = {}) => {
         }).join(' ');
     }
 
-    childrenCount = React.Children.count(element.props.children);
+    // A child can be either an array, a sole object or a string.
+    // <div>test</div>
+    if (typeof element.props.children !== 'string') {
+        childrenCount = React.Children.count(element.props.children);
 
-    if (childrenCount > 1) {
-        newChildren = [];
+        if (childrenCount > 1) {
+            newChildren = [];
 
-        React.Children.forEach(element.props.children, (node) => {
-            if (React.isValidElement(node)) {
-                newChildren.push(linkClass(node, styles));
-            } else {
-                newChildren.push(node);
-            }
-        });
+            React.Children.forEach(element.props.children, (node) => {
+                if (React.isValidElement(node)) {
+                    newChildren.push(linkClass(node, styles));
+                } else {
+                    newChildren.push(node);
+                }
+            });
 
-        // Do not use React.Children.map.
-        // For whatever reason React render multiple children as an array, while
-        // React.Children.map generates an object.
-
-    } else if (childrenCount === 1) {
-        newChildren = linkClass(React.Children.only(element.props.children), styles);
-    } else {
+            // Do not use React.Children.map.
+            // For whatever reason React render multiple children as an array, while
+            // React.Children.map generates an object.
 
+            /* newChildren = React.Children.map((node) => {
+                if (React.isValidElement(node)) {
+                    return linkClass(node, styles);
+                } else {
+                    return node;
+                }
+            }); */
+        } else if (childrenCount === 1) {
+            newChildren = linkClass(React.Children.only(element.props.children), styles);
+        }
     }
 
+
     if (newClassName) {
         newProps = {
             className: newClassName

test/linkClass.js

@@ -13,10 +13,14 @@ describe('linkClass', () => {
             expect(linkClass(<div></div>)).to.deep.equal(<div></div>);
         });
 
-        it('does not affect element with a single child', () => {
+        it('does not affect element with a single element child', () => {
             expect(linkClass(<div><p></p></div>)).to.deep.equal(<div><p></p></div>);
         });
 
+        it('does not affect element with a single text child', () => {
+            expect(linkClass(<div>test</div>)).to.deep.equal(<div>test</div>);
+        });
+
         it('does not affect element with multiple children', () => {
             expect(linkClass(<div><p></p><p></p></div>)).to.deep.equal(<div><p></p><p></p></div>);
         });