From f4eeff1dbcf37c9c0ce4bcb5d8d083bee4ecde8f Mon Sep 17 00:00:00 2001 From: Johannes Ewald Date: Fri, 13 Apr 2018 16:06:19 +0200 Subject: [PATCH] fix: Wrong import precedence (#557) - Fixes problem with foundation - Fixes https://github.com/webpack-contrib/sass-loader/issues/556 --- lib/importsToResolve.js | 14 +++++++------- test/index.test.js | 4 ++-- test/sass/{ => another}/alias.sass | 0 test/sass/imports.sass | 7 +++++++ test/sass/util.sass | 3 +++ test/scss/{ => another}/alias.scss | 2 +- test/scss/imports.scss | 3 +++ test/scss/util.scss | 5 +++++ test/tools/createSpec.js | 2 +- 9 files changed, 29 insertions(+), 11 deletions(-) rename test/sass/{ => another}/alias.sass (100%) create mode 100644 test/sass/util.sass rename test/scss/{ => another}/alias.scss (66%) create mode 100644 test/scss/util.scss diff --git a/lib/importsToResolve.js b/lib/importsToResolve.js index 5bd85cd1..7cf79627 100644 --- a/lib/importsToResolve.js +++ b/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 ]; } diff --git a/test/index.test.js b/test/index.test.js index 2c610281..4c568db8 100644 --- a/test/index.test.js +++ b/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)) ); diff --git a/test/sass/alias.sass b/test/sass/another/alias.sass similarity index 100% rename from test/sass/alias.sass rename to test/sass/another/alias.sass diff --git a/test/sass/imports.sass b/test/sass/imports.sass index d929d2fb..cfc6b6bc 100644 --- a/test/sass/imports.sass +++ b/test/sass/imports.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 diff --git a/test/sass/util.sass b/test/sass/util.sass new file mode 100644 index 00000000..b75f193e --- /dev/null +++ b/test/sass/util.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 diff --git a/test/scss/alias.scss b/test/scss/another/alias.scss similarity index 66% rename from test/scss/alias.scss rename to test/scss/another/alias.scss index ec712921..bed00c50 100644 --- a/test/scss/alias.scss +++ b/test/scss/another/alias.scss @@ -1,3 +1,3 @@ -a { +.alias { color: red; } diff --git a/test/scss/imports.scss b/test/scss/imports.scss index aa7e9f5f..cb2acee3 100644 --- a/test/scss/imports.scss +++ b/test/scss/imports.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"; diff --git a/test/scss/util.scss b/test/scss/util.scss new file mode 100644 index 00000000..61a5747f --- /dev/null +++ b/test/scss/util.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; +} diff --git a/test/tools/createSpec.js b/test/tools/createSpec.js index d30a1f29..84a95a53 100644 --- a/test/tools/createSpec.js +++ b/test/tools/createSpec.js @@ -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) => {