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

Author: PCreations

src/index.js

@@ -16,24 +16,22 @@ export default ({
 }: {
   types: BabelTypes
 }) => {
-  let styleModuleImportMap;
-  let importedHelperIndentifier;
-  let styleModuleImportMapIdentifier;
+  const filenameMap = {};
 
-  const setupFileForRuntimeResolution = (path) => {
+  const setupFileForRuntimeResolution = (path, filename) => {
     const programPath = path.findParent((parentPath) => {
       return parentPath.isProgram();
     });
 
-    importedHelperIndentifier = programPath.scope.generateUidIdentifier('getClassName');
-    styleModuleImportMapIdentifier = programPath.scope.generateUidIdentifier('styleModuleImportMap');
+    filenameMap[filename].importedHelperIndentifier = programPath.scope.generateUidIdentifier('getClassName');
+    filenameMap[filename].styleModuleImportMapIdentifier = programPath.scope.generateUidIdentifier('styleModuleImportMap');
 
     programPath.unshiftContainer(
       'body',
       t.importDeclaration(
         [
           t.importDefaultSpecifier(
-            importedHelperIndentifier
+            filenameMap[filename].importedHelperIndentifier
           )
         ],
         t.stringLiteral('babel-plugin-react-css-modules/dist/browser/getClassName')
@@ -49,12 +47,14 @@ export default ({
         'const',
         [
           t.variableDeclarator(
-            styleModuleImportMapIdentifier,
-            createObjectExpression(t, styleModuleImportMap)
+            filenameMap[filename].styleModuleImportMapIdentifier,
+            createObjectExpression(t, filenameMap[filename].styleModuleImportMap)
           )
         ]
       )
     );
+    // eslint-disable-next-line
+    // console.log('setting up', filename, util.inspect(filenameMap,{depth: 5}))
   };
 
   return {
@@ -65,6 +65,7 @@ export default ({
           return;
         }
 
+        const filename = stats.file.opts.filename;
         const targetFileDirectoryPath = dirname(stats.file.opts.filename);
         const targetResourcePath = resolve(targetFileDirectoryPath, path.node.source.value);
 
@@ -82,11 +83,12 @@ export default ({
           throw new Error('Unexpected use case.');
         }
 
-        styleModuleImportMap[styleImportName] = requireCssModule(targetResourcePath, {
+        filenameMap[filename].styleModuleImportMap[styleImportName] = requireCssModule(targetResourcePath, {
           generateScopedName: stats.opts.generateScopedName
         });
       },
-      JSXElement (path: Object): void {
+      JSXElement (path: Object, stats: Object): void {
+        const filename = stats.file.opts.filename;
         const styleNameAttribute = path.node.openingElement.attributes
           .find((attribute) => {
             return typeof attribute.name !== 'undefined' && attribute.name.name === 'styleName';
@@ -97,21 +99,33 @@ export default ({
         }
 
         if (t.isStringLiteral(styleNameAttribute.value)) {
-          resolveStringLiteral(path, styleModuleImportMap, styleNameAttribute);
+          resolveStringLiteral(
+            path,
+            filenameMap[filename].styleModuleImportMap,
+            styleNameAttribute
+          );
 
           return;
         }
 
         if (t.isJSXExpressionContainer(styleNameAttribute.value)) {
-          if (!importedHelperIndentifier) {
-            setupFileForRuntimeResolution(path);
+          if (!filenameMap[filename].importedHelperIndentifier) {
+            setupFileForRuntimeResolution(path, filename);
           }
-
-          replaceJsxExpressionContainer(t, styleNameAttribute, importedHelperIndentifier, styleModuleImportMapIdentifier);
+          replaceJsxExpressionContainer(
+            t,
+            styleNameAttribute,
+            filenameMap[filename].importedHelperIndentifier,
+            filenameMap[filename].styleModuleImportMapIdentifier
+          );
         }
       },
-      Program () {
-        styleModuleImportMap = {};
+      Program (path: Object, stats: Object): void {
+        const filename = stats.file.opts.filename;
+
+        filenameMap[filename] = {
+          styleModuleImportMap: {}
+        };
       }
     }
   };