jsx resolution when using var strings

Author: Supriya S

.flowconfig

@@ -1,6 +1,5 @@
 [ignore]
 <PROJECT_ROOT>/node_modules/config-chain/test/broken.json
-<PROJECT_ROOT>/npm/node_modules/config-chain/test/broken.json
 <PROJECT_ROOT>/node_modules/conventional-changelog-core/test/fixtures/_malformation.json
 <PROJECT_ROOT>/node_modules/npmconf/test/fixtures/package.json
 

demo/src/components/JSXExpressionStyleResolution.js

@@ -3,9 +3,10 @@ import classnames from 'classnames';
 import './table.css';
 
 export default () => {
-  var cname = classnames({'row': true});
+  var cname;
+  cname = classnames({'row': true});
 
-  return <div styleName={classnames('table')}>
+  return <div className="kjdhf" styleName={classnames('table')}>
     <div styleName={cname}>
       <div styleName='cell'>A2</div>
       <div styleName='cell'>B2</div>

package.json

@@ -54,7 +54,7 @@
   "scripts": {
     "build": "rm -fr ./dist && NODE_ENV=production babel ./src --out-dir ./dist --source-maps --copy-files && npm run build-helper",
     "build-helper": "mkdir -p ./dist/browser && NODE_ENV=production babel ./src/getClassName.js --out-file ./dist/browser/getClassName.js --source-maps --no-babelrc --plugins transform-es2015-modules-commonjs,transform-flow-strip-types --presets es2015",
-    "lint": "eslint ./src --fix && flow",
+    "lint": "eslint ./src && flow",
     "precommit": "npm run test && npm run lint",
     "test": " NODE_ENV=test mocha --require babel-core/register"
   },

src/index.js

@@ -214,6 +214,7 @@ export default ({
             if (t.isCallExpression(attribute.value.expression) || t.isIdentifier(attribute.value.expression)) {
               resolveJsxExpression(
                 path,
+                stats,
                 filenameMap[filename].styleModuleImportMap,
                 attribute,
                 destinationName,

src/resolveJSXExpression.js

@@ -23,10 +23,12 @@ type OptionsType = {|
  */
 export default (
   path: *,
+  stats: *,
   styleModuleImportMap: StyleModuleImportMapType,
   sourceAttribute: JSXAttribute,
   destinationName: string,
   options: OptionsType): void => {
+
   const jsxExpression = sourceAttribute.value.expression;
   const replaceCallArguments = function (callExpressionArguments) {
     for (const argument of callExpressionArguments) {
@@ -46,10 +48,14 @@ export default (
     replaceCallArguments(sourceAttribute.value.expression.arguments);
   } else if (isIdentifier(jsxExpression)) {
     const variableDeclaration = path.scope.getBinding(jsxExpression.name).path.node;
-
+    
     if (isVariableDeclarator(variableDeclaration)) {
       if (isCallExpression(variableDeclaration.init)) {
         replaceCallArguments(variableDeclaration.init.arguments);
+      } else if(isStringLiteral(variableDeclaration.init)) {
+        variableDeclaration.init.value = getClassName(variableDeclaration.init.value, styleModuleImportMap, options);
+      } else {
+        throw new Error(`When using variable references for attribute values, make sure that these are declared and initialized with either a string or a function call. Variable assignments for such identifiers are not supported as of now!!Check line ${variableDeclaration.loc.start.line} in ${stats.file.opts.filename}`);
       }
     }
   }
@@ -61,7 +67,7 @@ export default (
 
   // the desination attribute cannot be already present on the Jsx
   if (destinationAttribute) {
-    throw new Error('Destination Attribute cannot be present on JSX Element when using JSX Expressions');
+    throw new Error(`${destinationName} cannot be already present on a JSX Element when using JSX Expressions. Check line ${destinationAttribute.loc.start.line} in ${stats.file.opts.filename}`);
   } else {
     sourceAttribute.name.name = destinationName;
   }