fix: generate className when using runtime resolution (#18) (#19)

* fix: added escape hatch when testing attribute that do not have a name property (#11)

* fix: object expression generated on dynamic resolution now use quote to escape properties' name (#14)

* fix: getClassName now works as expected when multiple file use runtime resolution

* fix: getClassName now works as expected when multiple file use runtime resolution

* fix: className attribute is now correctly generated when using runtime resolution (#18)

Author: PCreations

src/index.js

@@ -114,6 +114,7 @@ export default ({
           }
           replaceJsxExpressionContainer(
             t,
+            path,
             styleNameAttribute,
             filenameMap[filename].importedHelperIndentifier,
             filenameMap[filename].styleModuleImportMapIdentifier

src/replaceJsxExpressionContainer.js

@@ -5,16 +5,33 @@ import BabelTypes, {
   Identifier
 } from 'babel-types';
 
-export default (t: BabelTypes, styleNameAttribute: JSXAttribute, importedHelperIndentifier: Identifier, styleModuleImportMapIdentifier: Identifier): void => {
+export default (t: BabelTypes, path: Object, styleNameAttribute: JSXAttribute, importedHelperIndentifier: Identifier, styleModuleImportMapIdentifier: Identifier): void => {
   const expressionContainerValue = styleNameAttribute.value;
+  const classNameAttribute = path.node.openingElement.attributes
+    .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);
+  }
+
+  const styleNameExpression = t.callExpression(
+    importedHelperIndentifier,
+    [
+      expressionContainerValue.expression,
+      styleModuleImportMapIdentifier
+    ]
+  );
 
   styleNameAttribute.value = t.jSXExpressionContainer(
-    t.callExpression(
-      importedHelperIndentifier,
-      [
-        expressionContainerValue.expression,
-        styleModuleImportMapIdentifier
-      ]
-    )
+    classNameAttribute ?
+      t.binaryExpression(
+        '+',
+        t.stringLiteral(classNameAttributeValue + ' '),
+        styleNameExpression
+      ) : styleNameExpression
   );
+  styleNameAttribute.name.name = 'className';
 };

test/fixtures/react-css-modules/uses getClassName to resolve non-literal styleName bis/actual.js renamed to test/fixtures/react-css-modules/uses getClassName to resolve non-literal styleName (with already existing className)/actual.js

@@ -5,4 +5,4 @@ const styleNameBar = 'bar.a-b';
 const styleNameFoo = 'a-b';
 
 <div styleName={styleNameBar}></div>;
-<div styleName={styleNameFoo}></div>;
+<div className='global' styleName={styleNameFoo}></div>;

test/fixtures/react-css-modules/uses getClassName to resolve non-literal styleName bis/bar.css renamed to test/fixtures/react-css-modules/uses getClassName to resolve non-literal styleName (with already existing className)/bar.css

@@ -13,5 +13,5 @@ const _styleModuleImportMap = {
 const styleNameBar = 'bar.a-b';
 const styleNameFoo = 'a-b';
 
-<div styleName={_getClassName(styleNameBar, _styleModuleImportMap)}></div>;
-<div styleName={_getClassName(styleNameFoo, _styleModuleImportMap)}></div>;
+<div className={_getClassName(styleNameBar, _styleModuleImportMap)}></div>;
+<div className={'global ' + _getClassName(styleNameFoo, _styleModuleImportMap)}></div>;

test/fixtures/react-css-modules/uses getClassName to resolve non-literal styleName bis/expected.js renamed to test/fixtures/react-css-modules/uses getClassName to resolve non-literal styleName (with already existing className)/expected.js

@@ -13,5 +13,5 @@ const _styleModuleImportMap = {
 const styleNameBar = 'bar.a-b';
 const styleNameFoo = 'a-b';
 
-<div styleName={_getClassName(styleNameBar, _styleModuleImportMap)}></div>;
-<div styleName={_getClassName(styleNameFoo, _styleModuleImportMap)}></div>;
+<div className={_getClassName(styleNameBar, _styleModuleImportMap)}></div>;
+<div className={_getClassName(styleNameFoo, _styleModuleImportMap)}></div>;