Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Wrong import precedence #557

Merged
merged 1 commit into from
Apr 13, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
14 changes: 7 additions & 7 deletions lib/importsToResolve.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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:
Expand All @@ -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...
Expand All @@ -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
];
}

Expand Down
4 changes: 2 additions & 2 deletions test/index.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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)
}
}
}));
Expand Down Expand Up @@ -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))
);
Expand Down
File renamed without changes.
7 changes: 7 additions & 0 deletions test/sass/imports.sass
Original file line number Diff line number Diff line change
Expand Up @@ -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
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

imporr typo?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Yiin just class name

@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
3 changes: 3 additions & 0 deletions test/sass/util.sass
Original file line number Diff line number Diff line change
@@ -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
2 changes: 1 addition & 1 deletion test/scss/alias.scss → test/scss/another/alias.scss
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
a {
.alias {
color: red;
}
3 changes: 3 additions & 0 deletions test/scss/imports.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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";
5 changes: 5 additions & 0 deletions test/scss/util.scss
Original file line number Diff line number Diff line change
@@ -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;
}
2 changes: 1 addition & 1 deletion test/tools/createSpec.js
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand Down