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

Author: PCreations

package.json

@@ -1,8 +1,8 @@
 {
   "author": {
-    "email": "gajus@gajus.com",
-    "name": "Gajus Kuizinas",
-    "url": "http://gajus.com"
+    "email": "pcriulan@gmail.com",
+    "name": "Pierre Criulanscy",
+    "url": "https://github.com/gajus/babel-plugin-react-css-modules"
   },
   "dependencies": {
     "babel-plugin-syntax-jsx": "^6.18.0",
@@ -42,17 +42,17 @@
   ],
   "license": "BSD-3-Clause",
   "main": "dist/index.js",
-  "name": "babel-plugin-react-css-modules",
+  "name": "babel-plugin-react-css-modules-fix-11",
   "repository": {
     "type": "git",
-    "url": "https://github.com/gajus/babel-plugin-react-css-modules"
+    "url": "https://github.com/PCreations/babel-plugin-react-css-modules"
   },
   "scripts": {
     "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",
     "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=test 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 {}