All decorated components inherit styles property that describes the CSS module and CSS class relation.

gajus · gajus · commit 59f148c4be24 · 2015-10-02T14:11:25.000+01:00
diff --git a/README.md b/README.md
@@ -17,6 +17,7 @@ React CSS Modules implement automatic mapping of CSS modules. Every CSS class is
         - [webpack](#webpack)
         - [Browserify](#browserify)
     - [Extending Component Styles](#extending-component-styles)
+    - [Inheriting the Styles Object Through Properties](#inheriting-the-styles-object-through-properties)
     - [Decorator](#decorator)
     - [Options](#options)
         - [`allowMultiple`](#allowmultiple)
@@ -218,6 +219,42 @@ In this example, `table-custom-styles.css` selectively extends `table.css` (the
 
 Refer to the [`UsingStylesProperty` example](https://github.com/gajus/react-css-modules-examples/tree/master/src/UsingStylesProperty) for an example of a working implementation.
 
+### Inheriting the Styles Object Through Properties
+
+`styleNames` cannot be used within a component to define styles of a `ReactElement` that will be generated by another component, e.g.
+
+```js
+class extends React.Component {
+    render () {
+        let itemTemplate;
+
+        itemTemplate = (name) => {
+            return <li styleName='foo'>{name}</li>;
+        };
+
+        return <List itemTemplate={name} />;
+    }
+}
+```
+
+The original [issue](https://github.com/gajus/react-css-modules/issues/11) describing the use case.
+
+For that purpose, the decorated class inherits `styles` property that you can use just as a regular CSS Modules object. The earlier example can be therefore rewritten to:
+
+```js
+class extends React.Component {
+    render () {
+        let itemTemplate;
+
+        itemTemplate = (name) => {
+            return <li styleName={this.props.styles.foo}>{name}</li>;
+        };
+
+        return <List itemTemplate={name} />;
+    }
+}
+```
+
 ### Decorator
 
 ```js
diff --git a/dist/extendReactClass.js b/dist/extendReactClass.js
@@ -4,6 +4,10 @@ var _lodashLangIsObject2 = require('lodash/lang/isObject');
 
 var _lodashLangIsObject3 = _interopRequireDefault(_lodashLangIsObject2);
 
+var _lodashObjectAssign2 = require('lodash/object/assign');
+
+var _lodashObjectAssign3 = _interopRequireDefault(_lodashObjectAssign2);
+
 Object.defineProperty(exports, '__esModule', {
     value: true
 });
@@ -28,6 +32,12 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'd
 
 var extendReactClass = undefined;
 
+/**
+ * @param {ReactClass} Component
+ * @param {Object} defaultStyles
+ * @param {Object} options
+ * @returns {ReactClass}
+ */
 extendReactClass = function (Component, defaultStyles, options) {
     return (function (_Component) {
         _inherits(_class, _Component);
@@ -47,6 +57,10 @@ extendReactClass = function (Component, defaultStyles, options) {
                 if (this.props.styles) {
                     styles = this.props.styles;
                 } else if ((0, _lodashLangIsObject3['default'])(defaultStyles)) {
+                    this.props = (0, _lodashObjectAssign3['default'])({}, this.props, {
+                        styles: defaultStyles
+                    });
+
                     styles = defaultStyles;
                 } else {
                     styles = {};
diff --git a/dist/linkClass.js b/dist/linkClass.js
@@ -40,6 +40,7 @@ linkClass = function (element, styles, userConfiguration) {
         newProps = undefined,
         styleNames = undefined;
 
+    // @see https://github.com/gajus/react-css-modules/pull/30
     if (!element) {
         return element;
     }
diff --git a/dist/wrapStatelessFunction.js b/dist/wrapStatelessFunction.js
@@ -4,6 +4,10 @@ var _lodashLangIsObject2 = require('lodash/lang/isObject');
 
 var _lodashLangIsObject3 = _interopRequireDefault(_lodashLangIsObject2);
 
+var _lodashObjectAssign2 = require('lodash/object/assign');
+
+var _lodashObjectAssign3 = _interopRequireDefault(_lodashObjectAssign2);
+
 Object.defineProperty(exports, '__esModule', {
     value: true
 });
@@ -20,24 +24,40 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'd
 
 var wrapStatelessFunction = undefined;
 
+/**
+ * @see https://facebook.github.io/react/blog/2015/09/10/react-v0.14-rc1.html#stateless-function-components
+ * @param {function} Component
+ * @param {Object} defaultStyles
+ * @param {Object} options
+ * @returns {function}
+ */
 wrapStatelessFunction = function (Component, defaultStyles, options) {
-    return function (props) {
+    return function () {
         for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
             args[_key - 1] = arguments[_key];
         }
 
+        var props = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
+
         var renderResult = undefined,
-            styles = undefined;
+            styles = undefined,
+            useProps = undefined;
 
         if (props.styles) {
+            useProps = props;
             styles = props.styles;
         } else if ((0, _lodashLangIsObject3['default'])(defaultStyles)) {
+            useProps = (0, _lodashObjectAssign3['default'])({}, props, {
+                styles: defaultStyles
+            });
+
             styles = defaultStyles;
         } else {
+            useProps = props;
             styles = {};
         }
 
-        renderResult = Component.apply(undefined, [props].concat(args));
+        renderResult = Component.apply(undefined, [useProps].concat(args));
 
         if (renderResult) {
             return (0, _linkClass2['default'])(renderResult, styles, options);
diff --git a/src/extendReactClass.js b/src/extendReactClass.js
@@ -4,6 +4,12 @@ import _ from 'lodash';
 
 let extendReactClass;
 
+/**
+ * @param {ReactClass} Component
+ * @param {Object} defaultStyles
+ * @param {Object} options
+ * @returns {ReactClass}
+ */
 extendReactClass = (Component, defaultStyles, options) => {
     return class extends Component {
         render () {
@@ -13,6 +19,10 @@ extendReactClass = (Component, defaultStyles, options) => {
             if (this.props.styles) {
                 styles = this.props.styles;
             } else if (_.isObject(defaultStyles)) {
+                this.props = _.assign({}, this.props, {
+                    styles: defaultStyles
+                });
+
                 styles = defaultStyles;
             } else {
                 styles = {};
diff --git a/src/wrapStatelessFunction.js b/src/wrapStatelessFunction.js
@@ -4,20 +4,34 @@ import _ from 'lodash';
 
 let wrapStatelessFunction;
 
+/**
+ * @see https://facebook.github.io/react/blog/2015/09/10/react-v0.14-rc1.html#stateless-function-components
+ * @param {function} Component
+ * @param {Object} defaultStyles
+ * @param {Object} options
+ * @returns {function}
+ */
 wrapStatelessFunction = (Component, defaultStyles, options) => {
-    return (props, ...args) => {
+    return (props = {}, ...args) => {
         let renderResult,
-            styles;
+            styles,
+            useProps;
 
         if (props.styles) {
+            useProps = props;
             styles = props.styles;
         } else if (_.isObject(defaultStyles)) {
+            useProps = _.assign({}, props, {
+                styles: defaultStyles
+            });
+
             styles = defaultStyles;
         } else {
+            useProps = props;
             styles = {};
         }
 
-        renderResult = Component(props, ...args);
+        renderResult = Component(useProps, ...args);
 
         if (renderResult) {
             return linkClass(renderResult, styles, options);
diff --git a/test/extendReactClass.js b/test/extendReactClass.js
@@ -0,0 +1,89 @@
+/* eslint-disable max-nested-callbacks */
+
+import {
+    expect
+} from 'chai';
+
+import React from 'react';
+import TestUtils from 'react-addons-test-utils';
+import jsdom from 'jsdom';
+import extendReactClass from './../src/extendReactClass';
+
+describe('extendReactClass', () => {
+    beforeEach(() => {
+        global.document = jsdom.jsdom(`
+            <!DOCTYPE html>
+            <html>
+            <head>
+            </head>
+            <body>
+            </body>
+            </html>
+        `);
+
+        global.window = document.defaultView;
+    });
+
+    context('using default styles', () => {
+        it('exposes styles through styles property', (done) => {
+            let Component,
+                styles;
+
+            Component = class extends React.Component {
+                render () {
+                    expect(this.props.styles).to.equal(styles);
+                    done();
+                }
+            };
+
+            styles = {
+                foo: 'foo-1'
+            };
+
+            Component = extendReactClass(Component, styles);
+
+            TestUtils.renderIntoDocument(<Component />);
+        });
+        it('does not affect the other instance properties', (done) => {
+            let Component,
+                styles;
+
+            Component = class extends React.Component {
+                render () {
+                    expect(this.props.bar).to.equal('baz');
+                    done();
+                }
+            };
+
+            styles = {
+                foo: 'foo-1'
+            };
+
+            Component = extendReactClass(Component, styles);
+
+            TestUtils.renderIntoDocument(<Component bar='baz' />);
+        });
+    });
+
+    context('using explicit styles', () => {
+        it('exposes styles through styles property', (done) => {
+            let Component,
+                styles;
+
+            Component = class extends React.Component {
+                render () {
+                    expect(this.props.styles).to.equal(styles);
+                    done();
+                }
+            };
+
+            styles = {
+                foo: 'foo-1'
+            };
+
+            Component = extendReactClass(Component);
+
+            TestUtils.renderIntoDocument(<Component styles={styles} />);
+        });
+    });
+});
diff --git a/test/wrapStatelessFunction.js b/test/wrapStatelessFunction.js
@@ -0,0 +1,54 @@
+/* eslint-disable max-nested-callbacks */
+
+import {
+    expect
+} from 'chai';
+
+import wrapStatelessFunction from './../src/wrapStatelessFunction';
+
+describe('wrapStatelessFunction', () => {
+    context('using default styles', () => {
+        it('exposes styles through styles property', (done) => {
+            let styles;
+
+            styles = {
+                foo: 'foo-1'
+            };
+
+            wrapStatelessFunction((props) => {
+                expect(props.styles).to.equal(styles);
+                done();
+            }, styles)();
+        });
+        it('does not affect the other instance properties', (done) => {
+            let styles;
+
+            styles = {
+                foo: 'foo-1'
+            };
+
+            wrapStatelessFunction((props) => {
+                expect(props.bar).to.equal('baz');
+                done();
+            }, styles)({
+                bar: 'baz'
+            });
+        });
+    });
+    context('using explicit styles', () => {
+        it('exposes styles through styles property', (done) => {
+            let styles;
+
+            styles = {
+                foo: 'foo-1'
+            };
+
+            wrapStatelessFunction((props) => {
+                expect(props.styles).to.equal(styles);
+                done();
+            })({
+                styles
+            });
+        });
+    });
+});

Original file line number	Diff line number	Diff line change
`@@ -40,6 +40,7 @@ linkClass = function (element, styles, userConfiguration) {`
`40`	`40`	`newProps = undefined,`
`41`	`41`	`styleNames = undefined;`
`42`	`42`
	`43`	`+ // @see https://github.com/gajus/react-css-modules/pull/30`
`43`	`44`	`if (!element) {`
`44`	`45`	`return element;`
`45`	`46`	`}`