add jsx resolution support

Author: Supriya S

.flowconfig

@@ -1,5 +1,6 @@
 [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

@@ -0,0 +1,15 @@
+import React from 'react';
+import classnames from 'classnames';
+import './table.css';
+
+export default () => {
+  var cname = classnames({'row': true});
+
+  return <div styleName={classnames('table')}>
+    <div styleName={cname}>
+      <div styleName='cell'>A2</div>
+      <div styleName='cell'>B2</div>
+      <div styleName='cell'>C2</div>
+    </div>
+  </div>;
+};

demo/src/index.js

@@ -3,9 +3,11 @@ import ReactDom from 'react-dom';
 import AnonymouseStyleResolution from './components/AnonymouseStyleResolution';
 import NamedStyleResolution from './components/NamedStyleResolution';
 import RuntimeStyleResolution from './components/RuntimeStyleResolution';
+import JSXExpressionStyleResolution from './components/JSXExpressionStyleResolution';
 
 ReactDom.render(<div>
   <AnonymouseStyleResolution />
   <NamedStyleResolution />
+  <JSXExpressionStyleResolution />
   <RuntimeStyleResolution />
 </div>, document.getElementById('main'));

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 && flow",
+    "lint": "eslint ./src --fix && flow",
     "precommit": "npm run test && npm run lint",
     "test": " NODE_ENV=test mocha --require babel-core/register"
   },

src/index.js

@@ -13,7 +13,7 @@ import optionsDefaults from './schemas/optionsDefaults';
 import createObjectExpression from './createObjectExpression';
 import requireCssModule from './requireCssModule';
 import resolveStringLiteral from './resolveStringLiteral';
-import resolveJSXExpression from './resolveJSXExpression';
+import resolveJsxExpression from './resolveJsxExpression';
 import replaceJsxExpressionContainer from './replaceJsxExpressionContainer';
 
 const ajv = new Ajv({
@@ -211,8 +211,8 @@ export default ({
               }
             );
           } else if (t.isJSXExpressionContainer(attribute.value)) {
-            if(t.isCallExpression(attribute.value.expression)) {
-              resolveJSXExpression(
+            if (t.isCallExpression(attribute.value.expression) || t.isIdentifier(attribute.value.expression)) {
+              resolveJsxExpression(
                 path,
                 filenameMap[filename].styleModuleImportMap,
                 attribute,
@@ -221,6 +221,7 @@ export default ({
                   handleMissingStyleName
                 }
               );
+
               return;
             }
             if (!filenameMap[filename].importedHelperIndentifier) {

src/resolveJSXExpression.js

@@ -1,13 +1,13 @@
 // @flow
 
 import {
-  isJSXExpressionContainer,
   isStringLiteral,
+  isIdentifier,
   isObjectExpression,
-  JSXAttribute,
-  stringLiteral
+  isCallExpression,
+  isVariableDeclarator,
+  JSXAttribute
 } from 'babel-types';
-import conditionalClassMerge from './conditionalClassMerge';
 import getClassName from './getClassName';
 import type {
   StyleModuleImportMapType,
@@ -27,28 +27,39 @@ export default (
   sourceAttribute: JSXAttribute,
   destinationName: string,
   options: OptionsType): void => {
-  const callExpressionArguments = sourceAttribute.value.expression.arguments;
-
-  for (let argumentIndex in callExpressionArguments) {
-      let argument = callExpressionArguments[argumentIndex];
-      if(isStringLiteral(argument)) {
-        callExpressionArguments[argumentIndex].value = getClassName(argument.value, styleModuleImportMap, options);
-      } else if(isObjectExpression(argument)) {
-        for (let propertyIndex in argument.properties){
-            let property = argument.properties[propertyIndex];
-            if(isStringLiteral(property.key)) {
-                property.key.value = getClassName(property.key.value, styleModuleImportMap, options);
-            }
+  const jsxExpression = sourceAttribute.value.expression;
+  const replaceCallArguments = function (callExpressionArguments) {
+    for (const argument of callExpressionArguments) {
+      if (isStringLiteral(argument)) {
+        argument.value = getClassName(argument.value, styleModuleImportMap, options);
+      } else if (isObjectExpression(argument)) {
+        for (const property of argument.properties) {
+          if (isStringLiteral(property.key)) {
+            property.key.value = getClassName(property.key.value, styleModuleImportMap, options);
+          }
         }
       }
+    }
+  };
+
+  if (isCallExpression(jsxExpression)) {
+    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);
+      }
+    }
   }
-  
 
   const destinationAttribute = path.node.openingElement.attributes
     .find((attribute) => {
       return typeof attribute.name !== 'undefined' && attribute.name.name === destinationName;
     });
 
+  // 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');
   } else {