fix: prevent a classname of undefined (#62)

Author: CurtisHumphrey

src/conditionalClassMerge.js

@@ -0,0 +1,26 @@
+// @flow
+
+import {
+  binaryExpression,
+  conditionalExpression,
+  stringLiteral
+} from 'babel-types';
+
+export default (
+  classNameExpression: any,
+  styleNameExpression: any,
+): any => {
+  return binaryExpression(
+    '+',
+    conditionalExpression(
+      classNameExpression,
+      binaryExpression(
+        '+',
+        classNameExpression,
+        stringLiteral(' ')
+      ),
+      stringLiteral('')
+    ),
+    styleNameExpression
+  );
+};

src/replaceJsxExpressionContainer.js

@@ -1,5 +1,4 @@
 // @flow
-
 import BabelTypes, {
   binaryExpression,
   Identifier,
@@ -8,9 +7,9 @@ import BabelTypes, {
   jSXAttribute,
   JSXAttribute,
   jSXExpressionContainer,
-  jSXIdentifier,
-  stringLiteral
+  jSXIdentifier
 } from 'babel-types';
+import conditionalClassMerge from './conditionalClassMerge';
 
 export default (
   t: BabelTypes,
@@ -55,14 +54,9 @@ export default (
       path.node.openingElement.attributes.push(jSXAttribute(
         jSXIdentifier('className'),
         jSXExpressionContainer(
-          binaryExpression(
-            '+',
+          conditionalClassMerge(
             classNameAttribute.value.expression,
-            binaryExpression(
-              '+',
-              stringLiteral(' '),
-              styleNameExpression
-            )
+            styleNameExpression
           )
         )
       ));

src/resolveStringLiteral.js

@@ -1,12 +1,12 @@
 // @flow
 
 import {
-  binaryExpression,
   isJSXExpressionContainer,
   isStringLiteral,
   JSXAttribute,
   stringLiteral
 } from 'babel-types';
+import conditionalClassMerge from './conditionalClassMerge';
 import getClassName from './getClassName';
 import type {
   StyleModuleImportMapType
@@ -27,10 +27,9 @@ export default (path: Object, styleModuleImportMap: StyleModuleImportMapType, st
     if (isStringLiteral(classNameAttribute.value)) {
       classNameAttribute.value.value += ' ' + resolvedStyleName;
     } else if (isJSXExpressionContainer(classNameAttribute.value)) {
-      classNameAttribute.value.expression = binaryExpression(
-        '+',
+      classNameAttribute.value.expression = conditionalClassMerge(
         classNameAttribute.value.expression,
-        stringLiteral(' ' + resolvedStyleName)
+        stringLiteral(resolvedStyleName)
       );
     } else {
       throw new Error('Unexpected attribute value.');

test/fixtures/react-css-modules/merges the resolved styleName with the existing className values/expected.js

@@ -8,8 +8,8 @@ const _styleModuleImportMap = {
 };
 <div className="apple banana bar__a"></div>;
 
-<div className={this.props.className + ' bar__a'}></div>;
+<div className={(this.props.className ? this.props.className + ' ' : '') + 'bar__a'}></div>;
 
-<div className={(Math.random() > 0.5 ? 'apple' : 'banana') + ' bar__a'}></div>;
+<div className={((Math.random() > 0.5 ? 'apple' : 'banana') ? (Math.random() > 0.5 ? 'apple' : 'banana') + ' ' : '') + 'bar__a'}></div>;
 
-<div className={this.props.className + (' ' + _getClassName(foo, _styleModuleImportMap))}></div>;
+<div className={(this.props.className ? this.props.className + ' ' : '') + _getClassName(foo, _styleModuleImportMap)}></div>;