fix: handle multiple file import with dynamic resolution (fixes gajus#7 gajus#11 gajus#13 gajus#14 gajus#17) (gajus#12)

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

* fix: object expression generated on dynamic resolution now use quote to escape properties' name (gajus#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

Author: PCreations

package.json

@@ -52,7 +52,7 @@
     "build": "rm -fr ./dist && NODE_ENV=production babel ./src --out-dir ./dist --source-maps && npm run build-helper",
     "lint": "eslint ./src",
     "precommit": "npm run test",
-    "test": "NODE_ENV=development npm run lint && npm run build && mocha --compilers js:babel-register && flow"
+    "test": "NODE_ENV=development npm run lint && npm run build && NODE_ENV=test mocha --compilers js:babel-register && flow"
   },
   "version": "1.0.0"
 }

src/createObjectExpression.js

@@ -25,7 +25,7 @@ const createObjectExpression = (t: BabelTypes, object: Object): ObjectExpression
 
     properties.push(
       t.objectProperty(
-        t.identifier(name),
+        t.identifier('\'' + name + '\''),
         newValue
       )
     );

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,13 +65,15 @@ export default ({
           return;
         }
 
+        const filename = stats.file.opts.filename;
         const targetFileDirectoryPath = dirname(stats.file.opts.filename);
         const targetResourcePath = resolve(targetFileDirectoryPath, path.node.source.value);
 
         let styleImportName: string;
 
         if (path.node.specifiers.length === 0) {
-          styleImportName = 'random-' + Math.random();
+          // eslint-disable-next-line no-process-env
+          styleImportName = process.env.NODE_ENV === 'test' ? 'random-test' : 'random-' + Math.random();
         } else if (path.node.specifiers.length === 1) {
           styleImportName = path.node.specifiers[0].local.name;
         } else {
@@ -81,36 +83,49 @@ 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 attribute.name.name === 'styleName';
+            return typeof attribute.name !== 'undefined' && attribute.name.name === 'styleName';
           });
 
         if (!styleNameAttribute) {
           return;
         }
 
         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: {}
+        };
       }
     }
   };

src/resolveStringLiteral.js

@@ -11,7 +11,7 @@ import type {
 export default (path: Object, styleModuleImportMap: StyleModuleImportMapType, styleNameAttribute: JSXAttribute): void => {
   const classNameAttribute = path.node.openingElement.attributes
     .find((attribute) => {
-      return attribute.name.name === 'className';
+      return typeof attribute.name !== 'undefined' && attribute.name.name === 'className';
     });
 
   const resolvedStyleName = getClassName(styleNameAttribute.value.value, styleModuleImportMap);

test/fixtures/react-css-modules/does not throw error if attribute has no name property/actual.js

@@ -0,0 +1,7 @@
+import './bar.css';
+
+const props = {
+  foo: 'bar'
+};
+
+<div styleName="a" {...props}></div>;

test/fixtures/react-css-modules/does not throw error if attribute has no name property/bar.css

@@ -0,0 +1 @@
+.a {}

test/fixtures/react-css-modules/does not throw error if attribute has no name property/expected.js

@@ -0,0 +1,7 @@
+import './bar.css';
+
+const props = {
+  foo: 'bar'
+};
+
+<div className="bar__a" {...props}></div>;

test/fixtures/react-css-modules/does not throw error if attribute has no name property/options.json

@@ -0,0 +1,10 @@
+{
+  "plugins": [
+    [
+      "../../../../src",
+      {
+        "generateScopedName": "[name]__[local]"
+      }
+    ]
+  ]
+}

test/fixtures/react-css-modules/uses getClassName to resolve non-literal styleName bis/actual.js

@@ -0,0 +1,8 @@
+import bar from './bar.css';
+import './foo.css';
+
+const styleNameBar = 'bar.a-b';
+const styleNameFoo = 'a-b';
+
+<div styleName={styleNameBar}></div>;
+<div styleName={styleNameFoo}></div>;

test/fixtures/react-css-modules/uses getClassName to resolve non-literal styleName bis/bar.css

@@ -0,0 +1 @@
+.a-b {}

test/fixtures/react-css-modules/uses getClassName to resolve non-literal styleName bis/expected.js

@@ -0,0 +1,17 @@
+import _getClassName from 'babel-plugin-react-css-modules/dist/browser/getClassName';
+import bar from './bar.css';
+import './foo.css';
+
+const _styleModuleImportMap = {
+  'bar': {
+    'a-b': 'bar__a-b'
+  },
+  'random-test': {
+    'a-b': 'foo__a-b'
+  }
+};
+const styleNameBar = 'bar.a-b';
+const styleNameFoo = 'a-b';
+
+<div styleName={_getClassName(styleNameBar, _styleModuleImportMap)}></div>;
+<div styleName={_getClassName(styleNameFoo, _styleModuleImportMap)}></div>;

test/fixtures/react-css-modules/uses getClassName to resolve non-literal styleName bis/foo.css

@@ -0,0 +1 @@
+.a-b {}

test/fixtures/react-css-modules/uses getClassName to resolve non-literal styleName bis/options.json

@@ -0,0 +1,10 @@
+{
+  "plugins": [
+    [
+      "../../../../src",
+      {
+        "generateScopedName": "[name]__[local]"
+      }
+    ]
+  ]
+}

test/fixtures/react-css-modules/uses getClassName to resolve non-literal styleName/actual.js

@@ -1,5 +1,8 @@
-import foo from './bar.css';
+import bar from './bar.css';
+import './foo.css';
 
-const styleNameValue = 'a';
+const styleNameBar = 'bar.a-b';
+const styleNameFoo = 'a-b';
 
-<div styleName={styleNameValue}></div>;
+<div styleName={styleNameBar}></div>;
+<div styleName={styleNameFoo}></div>;

test/fixtures/react-css-modules/uses getClassName to resolve non-literal styleName/bar.css

@@ -1 +1 @@
-.a {}
+.a-b {}

test/fixtures/react-css-modules/uses getClassName to resolve non-literal styleName/expected.js

@@ -1,11 +1,17 @@
 import _getClassName from 'babel-plugin-react-css-modules/dist/browser/getClassName';
-import foo from './bar.css';
+import bar from './bar.css';
+import './foo.css';
 
 const _styleModuleImportMap = {
-  foo: {
-    a: 'bar__a'
+  'bar': {
+    'a-b': 'bar__a-b'
+  },
+  'random-test': {
+    'a-b': 'foo__a-b'
   }
 };
-const styleNameValue = 'a';
+const styleNameBar = 'bar.a-b';
+const styleNameFoo = 'a-b';
 
-<div styleName={_getClassName(styleNameValue, _styleModuleImportMap)}></div>;
+<div styleName={_getClassName(styleNameBar, _styleModuleImportMap)}></div>;
+<div styleName={_getClassName(styleNameFoo, _styleModuleImportMap)}></div>;

test/fixtures/react-css-modules/uses getClassName to resolve non-literal styleName/foo.css

@@ -0,0 +1 @@
+.a-b {}