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

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

@@ -71,7 +71,8 @@ export default ({
         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 {

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 {}