fix: Fix root mapping with custom extensions (#72)

Author: tleunen

README.md

@@ -14,11 +14,7 @@ import MyUtilFn from '../../../../utils/MyUtilFn';
 // Use that:
 import MyUtilFn from 'utils/MyUtilFn';
 ```
-
-_Note:_ It also work for `require()`.
-
-_Note 2:_ You can use the `npm:` prefix in your plugin configuration to map a node module.
-
+_Note:_ It also works with `require()`, and you can alias a NPM module.
 
 ## Usage
 
@@ -28,7 +24,6 @@ Install the plugin
 $ npm install --save-dev babel-plugin-module-resolver
 ```
 
-
 Specify the plugin in your `.babelrc` with the custom root or alias. Here's an example:
 ```json
 {
@@ -43,6 +38,7 @@ Specify the plugin in your `.babelrc` with the custom root or alias. Here's an e
     ]
 }
 ```
+_Note:_ If you're using a custom extension (other than .js, .jsx, .es and .es6), you can add the `extensions` array in the config.
 
 ## ESLint plugin
 

package.json

@@ -26,6 +26,9 @@
     "require",
     "import"
   ],
+  "dependencies": {
+    "resolve": "^1.1.7"
+  },
   "devDependencies": {
     "babel-cli": "^6.10.1",
     "babel-core": "^6.10.4",

src/index.js

@@ -1,4 +1,5 @@
 import path from 'path';
+import resolve from 'resolve';
 import mapToRelative from './mapToRelative';
 
 function createAliasFileMap(pluginOpts) {
@@ -10,6 +11,13 @@ function createAliasFileMap(pluginOpts) {
     ), {});
 }
 
+function replaceExt(p, ext) {
+    const filename = path.basename(p, path.extname(p)) + ext;
+    return path.join(path.dirname(p), filename);
+}
+
+const defaultBabelExtensions = ['.js', '.jsx', '.es', '.es6'];
+
 export function mapModule(source, file, pluginOpts) {
     // Do not map source starting with a dot
     if (source[0] === '.') {
@@ -21,9 +29,10 @@ export function mapModule(source, file, pluginOpts) {
     for (let i = 0; i < rootDirs.length; i++) {
         try {
             // check if the file exists (will throw if not)
-            const p = path.resolve(rootDirs[i], source);
-            require.resolve(p);
-            return mapToRelative(file, p);
+            const extensions = pluginOpts.extensions || defaultBabelExtensions;
+            const fileAbsPath = resolve.sync(`./${source}`, { basedir: path.resolve(rootDirs[i]), extensions });
+            // map the source and keep its extension if the import/require had one
+            return mapToRelative(file, replaceExt(fileAbsPath, path.extname(source)));
         } catch (e) {
             // empty...
         }

test/examples/components/sub/sub1.css

@@ -19,7 +19,7 @@ function testRequireImport(source, output, transformerOpts) {
     });
 }
 
-describe('modulesDirectories', () => {
+describe('root', () => {
     const transformerOpts = {
         plugins: [
             [plugin, {
@@ -44,6 +44,14 @@ describe('modulesDirectories', () => {
         );
     });
 
+    describe('should rewrite the file while keeping the extension', () => {
+        testRequireImport(
+            'sub/sub1.css',
+            './test/examples/components/sub/sub1.css',
+            transformerOpts
+        );
+    });
+
     describe('should not rewrite a path outisde of the root directory', () => {
         testRequireImport(
             'example-file',
@@ -104,6 +112,14 @@ describe('alias', () => {
         });
     });
 
+    describe('should alias the path with its extension', () => {
+        testRequireImport(
+            'awesome/components/my-comp.css',
+            './src/components/my-comp.css',
+            transformerOpts
+        );
+    });
+
     describe('should not alias a unknown path', () => {
         describe('when requiring a node module', () => {
             testRequireImport(