fix: merge with existing className non-string literal value (fixes #20)

Author: gajus

src/replaceJsxExpressionContainer.js

@@ -1,8 +1,15 @@
 // @flow
 
 import BabelTypes, {
+  binaryExpression,
+  Identifier,
+  isJSXExpressionContainer,
+  isStringLiteral,
+  jSXAttribute,
   JSXAttribute,
-  Identifier
+  jSXExpressionContainer,
+  jSXIdentifier,
+  stringLiteral
 } from 'babel-types';
 
 export default (
@@ -17,12 +24,13 @@ export default (
     .find((attribute) => {
       return typeof attribute.name !== 'undefined' && attribute.name.name === 'className';
     });
-  const classNameAttributeValue = classNameAttribute ? classNameAttribute.value.value : '';
 
   if (classNameAttribute) {
     path.node.openingElement.attributes.splice(path.node.openingElement.attributes.indexOf(classNameAttribute), 1);
   }
 
+  path.node.openingElement.attributes.splice(path.node.openingElement.attributes.indexOf(styleNameAttribute), 1);
+
   const styleNameExpression = t.callExpression(
     importedHelperIndentifier,
     [
@@ -31,13 +39,42 @@ export default (
     ]
   );
 
-  styleNameAttribute.value = t.jSXExpressionContainer(
-    classNameAttribute ?
-      t.binaryExpression(
-        '+',
-        t.stringLiteral(classNameAttributeValue + ' '),
+  if (classNameAttribute) {
+    if (isStringLiteral(classNameAttribute.value)) {
+      path.node.openingElement.attributes.push(jSXAttribute(
+        jSXIdentifier('className'),
+        jSXExpressionContainer(
+          binaryExpression(
+            '+',
+            t.stringLiteral(classNameAttribute.value.value + ' '),
+            styleNameExpression
+          )
+        )
+      ));
+    } else if (isJSXExpressionContainer(classNameAttribute.value)) {
+      path.node.openingElement.attributes.push(jSXAttribute(
+        jSXIdentifier('className'),
+        jSXExpressionContainer(
+          binaryExpression(
+            '+',
+            classNameAttribute.value.expression,
+            binaryExpression(
+              '+',
+              stringLiteral(' '),
+              styleNameExpression
+            )
+          )
+        )
+      ));
+    } else {
+      throw new Error('Unexpected attribute value.');
+    }
+  } else {
+    path.node.openingElement.attributes.push(jSXAttribute(
+      jSXIdentifier('className'),
+      jSXExpressionContainer(
         styleNameExpression
-      ) : styleNameExpression
-  );
-  styleNameAttribute.name.name = 'className';
+      )
+    ));
+  }
 };

src/resolveStringLiteral.js

@@ -1,7 +1,11 @@
 // @flow
 
 import {
-  JSXAttribute
+  binaryExpression,
+  isJSXExpressionContainer,
+  isStringLiteral,
+  JSXAttribute,
+  stringLiteral
 } from 'babel-types';
 import getClassName from './getClassName';
 import type {
@@ -20,7 +24,17 @@ export default (path: Object, styleModuleImportMap: StyleModuleImportMapType, st
   const resolvedStyleName = getClassName(styleNameAttribute.value.value, styleModuleImportMap);
 
   if (classNameAttribute) {
-    classNameAttribute.value.value += ' ' + resolvedStyleName;
+    if (isStringLiteral(classNameAttribute.value)) {
+      classNameAttribute.value.value += ' ' + resolvedStyleName;
+    } else if (isJSXExpressionContainer(classNameAttribute.value)) {
+      classNameAttribute.value.expression = binaryExpression(
+        '+',
+        classNameAttribute.value.expression,
+        stringLiteral(' ' + resolvedStyleName)
+      );
+    } else {
+      throw new Error('Unexpected attribute value.');
+    }
 
     path.node.openingElement.attributes.splice(path.node.openingElement.attributes.indexOf(styleNameAttribute), 1);
   } else {

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

@@ -1,3 +1,9 @@
 import './bar.css';
 
 <div className='apple banana' styleName="a"></div>;
+
+<div className={this.props.className} styleName="a"></div>;
+
+<div className={Math.random() > 0.5 ? 'apple' : 'banana'} styleName="a"></div>;
+
+<div className={this.props.className} styleName={foo}></div>;

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

@@ -1,3 +1,15 @@
+import _getClassName from 'babel-plugin-react-css-modules/dist/browser/getClassName';
 import './bar.css';
 
+const _styleModuleImportMap = {
+  'random-test': {
+    'a': 'bar__a'
+  }
+};
 <div className="apple banana bar__a"></div>;
+
+<div className={this.props.className + ' bar__a'}></div>;
+
+<div className={(Math.random() > 0.5 ? 'apple' : 'banana') + ' bar__a'}></div>;
+
+<div className={this.props.className + (' ' + _getClassName(foo, _styleModuleImportMap))}></div>;