fix: Wrong import precedence (#557)

- Fixes problem with foundation
- Fixes #556

Author: jhnns

lib/importsToResolve.js

@@ -8,7 +8,7 @@ const matchModuleImport = /^~([^\/]+|@[^\/]+[\/][^\/]+)$/g;
 /**
  * When libsass tries to resolve an import, it uses a special algorithm.
  * Since the sass-loader uses webpack to resolve the modules, we need to simulate that algorithm. This function
- * returns an array of import paths to try. The first entry in the array is always the original url
+ * returns an array of import paths to try. The last entry in the array is always the original url
  * to enable straight-forward webpack.config aliases.
  *
  * @param {string} url
@@ -21,7 +21,7 @@ function importsToResolve(url) {
     const ext = path.extname(request);
 
     if (matchModuleImport.test(url)) {
-        return [url, request];
+        return [request, url];
     }
 
     // libsass' import algorithm works like this:
@@ -33,7 +33,7 @@ function importsToResolve(url) {
         return [];
     }
     if (ext === ".scss" || ext === ".sass") {
-        return [url, request];
+        return [request, url];
     }
 
     // In case there is no file extension...
@@ -43,17 +43,17 @@ function importsToResolve(url) {
 
     if (basename.charAt(0) === "_") {
         return [
-            url,
-            `${ request }.scss`, `${ request }.sass`, `${ request }.css`
+            `${ request }.scss`, `${ request }.sass`, `${ request }.css`,
+            url
         ];
     }
 
     const dirname = path.dirname(request);
 
     return [
-        url,
         `${ dirname }/_${ basename }.scss`, `${ dirname }/_${ basename }.sass`, `${ dirname }/_${ basename }.css`,
-        `${ request }.scss`, `${ request }.sass`, `${ request }.css`
+        `${ request }.scss`, `${ request }.sass`, `${ request }.css`,
+        url
     ];
 }
 

test/index.test.js

@@ -82,7 +82,7 @@ syntaxStyles.forEach(ext => {
             it("should resolve aliases", () => execTest("import-alias", {}, {
                 resolve: {
                     alias: {
-                        "path-to-alias": path.join(__dirname, ext, "alias." + ext)
+                        "path-to-alias": path.join(__dirname, ext, "another", "alias." + ext)
                     }
                 }
             }));
@@ -205,7 +205,7 @@ describe("sass-loader", () => {
                     sourceMap.should.not.have.property("file");
                     sourceMap.should.have.property("sourceRoot", fakeCwd);
                     // This number needs to be updated if imports.scss or any dependency of that changes
-                    sourceMap.sources.should.have.length(9);
+                    sourceMap.sources.should.have.length(10);
                     sourceMap.sources.forEach(sourcePath =>
                         fs.existsSync(path.resolve(sourceMap.sourceRoot, sourcePath))
                     );

test/sass/alias.sass renamed to test/sass/another/alias.sass

@@ -15,3 +15,10 @@
 @import ~animate.css/animate
 /* @import url(http://example.com/something/from/the/interwebs); */
 @import url(http://example.com/something/from/the/interwebs);
+/* scoped import @import language */
+.scoped-imporr
+  @import language
+// The local util file should take precedence over Node's util module
+// See https://github.com/webpack-contrib/sass-loader/issues/556
+/* @import util */
+@import util

test/sass/imports.sass

@@ -0,0 +1,3 @@
+// This file has been named "util" on purpose because in a wrong import setup it would conflict with Node's util
+.util
+  color: hotpink

test/sass/util.sass

@@ -1,3 +1,3 @@
-a {
+.alias {
     color: red;
 }

test/scss/alias.scss renamed to test/scss/another/alias.scss

@@ -19,3 +19,6 @@
 .scoped-import {
     @import "language";
 }
+// The local util file should take precedence over Node's util module
+// See https://github.com/webpack-contrib/sass-loader/issues/556
+@import "util";

test/scss/imports.scss

@@ -0,0 +1,5 @@
+// This file has been named "util" on purpose because in a wrong import setup it would conflict with Node's util
+// See https://github.com/webpack-contrib/sass-loader/issues/556
+.util {
+    color: hotpink;
+}

test/scss/util.scss

@@ -15,7 +15,7 @@ function createSpec(ext) {
     const testNodeModules = path.relative(basePath, path.join(testFolder, "node_modules")) + path.sep;
     const pathToBootstrap = path.relative(basePath, path.resolve(testFolder, "..", "node_modules", "bootstrap-sass"));
     const pathToScopedNpmPkg = path.relative(basePath, path.resolve(testFolder, "node_modules", "@org", "pkg", "./index.scss"));
-    const pathToFooAlias = path.relative(basePath, path.resolve(testFolder, ext, "./alias." + ext));
+    const pathToFooAlias = path.relative(basePath, path.resolve(testFolder, ext, "another", "alias." + ext));
 
     fs.readdirSync(path.join(testFolder, ext))
         .filter((file) => {