From bd2c82200e196e0757efe5f60b85d014e26c5750 Mon Sep 17 00:00:00 2001
From: "Curtis M. Humphrey, Ph.D" <curtis@createdwithflair.com>
Date: Wed, 8 Mar 2017 10:42:51 -0600
Subject: [PATCH] className no longer merges if it is falsely (e.g. prevents a
 classname of undefined)

---
 src/conditionalClassMerge.js                  | 26 +++++++++++++++++++
 src/replaceJsxExpressionContainer.js          | 14 +++-------
 src/resolveStringLiteral.js                   |  7 +++--
 .../expected.js                               |  6 ++---
 4 files changed, 36 insertions(+), 17 deletions(-)
 create mode 100644 src/conditionalClassMerge.js

diff --git a/src/conditionalClassMerge.js b/src/conditionalClassMerge.js
new file mode 100644
index 0000000..b3db834
--- /dev/null
+++ b/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
+  );
+};
diff --git a/src/replaceJsxExpressionContainer.js b/src/replaceJsxExpressionContainer.js
index cea6645..9b3a64e 100644
--- a/src/replaceJsxExpressionContainer.js
+++ b/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
           )
         )
       ));
diff --git a/src/resolveStringLiteral.js b/src/resolveStringLiteral.js
index eebfa64..99e483d 100644
--- a/src/resolveStringLiteral.js
+++ b/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.');
diff --git a/test/fixtures/react-css-modules/merges the resolved styleName with the existing className values/expected.js b/test/fixtures/react-css-modules/merges the resolved styleName with the existing className values/expected.js
index 16b0ae0..e9bbd3d 100644
--- a/test/fixtures/react-css-modules/merges the resolved styleName with the existing className values/expected.js	
+++ b/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>;