Latest code.

Author: gajus

README.md

@@ -0,0 +1,39 @@
+# react-css-modules
+
+`index.css`:
+
+```css
+.foo {
+    color: #f00;
+}
+```
+
+`Rainbow.js`:
+
+```js
+import React from 'react';
+import styles from './index.css';
+import CSSModules from 'react-css-modules';
+
+class Rainbow extends React.Component {
+    render () {
+        return <div>
+            <span className='foo'>I am rainbow!</span>
+            <span className='bar'>I am rainbow!</span>
+        </div>;
+    }
+}
+
+export default CSSModules(Rainbow, styles);
+```
+
+When used, this component will generate:
+
+```html
+<div data-reactid=".0">
+    <div data-reactid=".0.0">
+        <span class="foo index__foo___1fSgh" data-reactid=".0.0.0">I am rainbow!</span>
+        <span class="bar" data-reactid=".0.0.1">I am rainbow!</span>
+    </div>
+</div>
+```

dist/index.js

@@ -82,6 +82,7 @@ exports['default'] = function (Target, styles) {
 
         if ((0, _lodashLangIsArray2['default'])(element.props.children)) {
             element.props.children = element.props.children.map(function (node) {
+                // React.isValidElement
                 if (node instanceof element.constructor) {
                     return changeClass(node);
                 } else {
@@ -108,19 +109,11 @@ exports['default'] = function (Target, styles) {
         }
 
         _createClass(CSSModules, [{
-            key: 'componentDidMount',
-            value: function componentDidMount() {
-                console.log('OK');
-            }
-        }, {
             key: 'render',
             value: function render() {
-                // <Target />
-                return _react2['default'].createElement(
-                    'div',
-                    { ref: 'test' },
-                    'test'
-                );
+                // At this point I would need to use linkClass, but I cannot find a way to access
+                // children of Target.
+                return _react2['default'].createElement(Target, { ref: 'test' });
             }
         }]);
 

src/index.js

@@ -57,6 +57,7 @@ export default (Target, styles) => {
 
         if (isArray(element.props.children)) {
             element.props.children = element.props.children.map((node) => {
+                // React.isValidElement
                 if (node instanceof element.constructor) {
                     return changeClass(node);
                 } else {
@@ -74,12 +75,10 @@ export default (Target, styles) => {
     };
 
     return class CSSModules extends React.Component {
-        componentDidMount () {
-            console.log('OK');
-        }
         render () {
-            // <Target />
-            return <div ref='test'>test</div>;
+            // At this point I would need to use linkClass, but I cannot find a way to access
+            // children of Target.
+            return <Target ref='test' />;
         }
     }
 };