Improved separation of functions.

Author: gajus

src/linkClass.js

@@ -3,7 +3,46 @@ import makeConfiguration from './makeConfiguration';
 import isIterable from './isIterable';
 import _ from 'lodash';
 
-let linkClass;
+let generateAppendClassName,
+    linkClass,
+    parseStyleName;
+
+parseStyleName = (styleNamePropertyValue: string, allowMultiple: boolean): Array<string> => {
+    let styleNames;
+
+    styleNames = styleNamePropertyValue.split(' ');
+    styleNames = _.filter(styleNames);
+
+    if (allowMultiple === false && styleNames.length > 1) {
+        throw new Error('ReactElement styleName property defines multiple module names ("' + styleNamePropertyValue + '").');
+    }
+
+    return styleNames;
+};
+
+generateAppendClassName = (styles, styleNames: Array<string>, errorWhenNotFound: boolean): string => {
+    let appendClassName;
+
+    appendClassName = '';
+
+    appendClassName = _.map(styleNames, (styleName) => {
+        if (styles[styleName]) {
+            return styles[styleName];
+        } else {
+            if (errorWhenNotFound === true) {
+                throw new Error('"' + styleName + '" CSS module is undefined.');
+            }
+
+            return '';
+        }
+    });
+
+    appendClassName = _.filter(appendClassName, 'length');
+
+    appendClassName = appendClassName.join(' ');
+
+    return appendClassName;
+};
 
 /**
  * @param {ReactElement} element
@@ -27,31 +66,10 @@ linkClass = (element, styles = {}, userConfiguration) => {
 
     configuration = makeConfiguration(userConfiguration);
 
-    styleNames = element.props.styleName;
-
-    if (styleNames) {
-        styleNames = styleNames.split(' ');
-        styleNames = _.filter(styleNames);
-
-        if (configuration.allowMultiple === false && styleNames.length > 1) {
-            throw new Error('ReactElement styleName property defines multiple module names ("' + element.props.styleName + '").');
-        }
-
-        appendClassName = _.map(styleNames, (styleName) => {
-            if (styles[styleName]) {
-                return styles[styleName];
-            } else {
-                if (configuration.errorWhenNotFound === true) {
-                    throw new Error('"' + styleName + '" CSS module is undefined.');
-                }
-
-                return '';
-            }
-        });
-
-        appendClassName = _.filter(appendClassName, 'length');
+    styleNames = parseStyleName(element.props.styleName || '', configuration.allowMultiple);
 
-        appendClassName = appendClassName.join(' ');
+    if (styleNames.length) {
+        appendClassName = generateAppendClassName(styles, styleNames, configuration.errorWhenNotFound);
     }
 
     // element.props.children can be one of the following:
@@ -87,8 +105,8 @@ linkClass = (element, styles = {}, userConfiguration) => {
         }
 
         newProps = {
-            styleName: null,
-            className: appendClassName
+            className: appendClassName,
+            styleName: null
         };
     }
 

tests/extendReactClass.js

@@ -5,7 +5,6 @@ import {
 } from 'chai';
 
 import React from 'react';
-import ReactDOM from 'react-dom';
 import TestUtils from 'react-addons-test-utils';
 import jsdom from 'jsdom';
 import extendReactClass from './../src/extendReactClass';

tests/linkClass.js

@@ -291,8 +291,8 @@ describe('linkClass', () => {
         </div>;
 
         subject = linkClass(subject, {
-            foo: 'foo-1',
-            bar: 'bar-1'
+            bar: 'bar-1',
+            foo: 'foo-1'
         });
 
         expect(subject.props.children[0].props.className).to.deep.equal('bar-1');

tests/reactCssModules.js

@@ -146,8 +146,8 @@ describe('reactCssModules', () => {
         context('parent component is using react-css-modules and interpolates props.children', () => {
             // @see https://github.com/gajus/react-css-modules/issues/76
             it('unsets the styleName property', () => {
-                let Foo,
-                    Bar,
+                let Bar,
+                    Foo,
                     subject;
 
                 Foo = class extends React.Component {