Skip to content

Commit

Permalink
fix: resolution logic (#831)
Browse files Browse the repository at this point in the history
  • Loading branch information
evilebottnawi committed Apr 16, 2020
1 parent fe3b33b commit 1655baf
Show file tree
Hide file tree
Showing 7 changed files with 74 additions and 27 deletions.
38 changes: 11 additions & 27 deletions src/getPossibleRequests.js
Expand Up @@ -22,15 +22,16 @@ const matchModuleImport = /^~([^/]+|[^/]+\/|@[^/]+[/][^/]+|@[^/]+\/?|@[^/]+[/][^
*/
export default function getPossibleRequests(url) {
const request = utils.urlToRequest(url);
// Keep in mind: ext can also be something like '.datepicker' when the true extension is omitted and the filename contains a dot.
// @see https://github.com/webpack-contrib/sass-loader/issues/167
const ext = path.extname(request).toLowerCase();

// In case there is module request, send this to webpack resolver
if (matchModuleImport.test(url)) {
return [request, url];
}

// Keep in mind: ext can also be something like '.datepicker' when the true extension is omitted and the filename contains a dot.
// @see https://github.com/webpack-contrib/sass-loader/issues/167
const ext = path.extname(request).toLowerCase();

// Because @import is also defined in CSS, Sass needs a way of compiling plain CSS @imports without trying to import the files at compile time.
// To accomplish this, and to ensure SCSS is as much of a superset of CSS as possible, Sass will compile any @imports with the following characteristics to plain CSS imports:
// - imports where the URL ends with .css.
Expand All @@ -55,34 +56,17 @@ export default function getPossibleRequests(url) {
return [`${dirname}/_${basename}`, `${dirname}/${basename}`, url];
}

// In case there is no file extension and filename starts with `_`:
//
// 1. Try to resolve files with `scss`, `sass` and `css` extensions.
// 2. Try to resolve directory with `_index` or `index` filename.
// 3. Send the original url to webpack resolver, maybe it's alias.
if (basename.startsWith('_')) {
return [
`${request}.scss`,
`${request}.sass`,
`${request}.css`,
request,
url,
];
}

// In case there is no file extension and filename doesn't start with `_`:
// In case there is no file extension
//
// 1. Try to resolve file starts with `_` and with extensions
// 2. Try to resolve file with extensions
// 3. Try to resolve directory with `_index` or `index` filename.
// 4. Send a original url to webpack resolver, maybe it is alias.
// 1. Try to resolve files starts with `_` and normal with order `sass`, `scss` and `css`
// 2. Send a original url to webpack resolver, maybe it is alias.
return [
`${dirname}/_${basename}.scss`,
`${dirname}/_${basename}.sass`,
`${dirname}/${basename}.sass`,
`${dirname}/_${basename}.scss`,
`${dirname}/${basename}.scss`,
`${dirname}/_${basename}.css`,
`${request}.scss`,
`${request}.sass`,
`${request}.css`,
`${dirname}/${basename}.css`,
request,
url,
];
Expand Down
40 changes: 40 additions & 0 deletions test/__snapshots__/loader.test.js.snap
@@ -1,5 +1,45 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`loader should load files with underscore in the name (dart-sass) (sass): css 1`] = `
"a {
color: red;
}"
`;

exports[`loader should load files with underscore in the name (dart-sass) (sass): errors 1`] = `Array []`;

exports[`loader should load files with underscore in the name (dart-sass) (sass): warnings 1`] = `Array []`;

exports[`loader should load files with underscore in the name (dart-sass) (scss): css 1`] = `
"a {
color: red;
}"
`;

exports[`loader should load files with underscore in the name (dart-sass) (scss): errors 1`] = `Array []`;

exports[`loader should load files with underscore in the name (dart-sass) (scss): warnings 1`] = `Array []`;

exports[`loader should load files with underscore in the name (node-sass) (sass): css 1`] = `
"a {
color: red; }
"
`;

exports[`loader should load files with underscore in the name (node-sass) (sass): errors 1`] = `Array []`;

exports[`loader should load files with underscore in the name (node-sass) (sass): warnings 1`] = `Array []`;

exports[`loader should load files with underscore in the name (node-sass) (scss): css 1`] = `
"a {
color: red; }
"
`;

exports[`loader should load files with underscore in the name (node-sass) (scss): errors 1`] = `Array []`;

exports[`loader should load files with underscore in the name (node-sass) (scss): warnings 1`] = `Array []`;

exports[`loader should load only sass/scss files for the "mainFiles" (dart-sass) (sass): css 1`] = `
"a {
color: red;
Expand Down
16 changes: 16 additions & 0 deletions test/loader.test.js
Expand Up @@ -639,6 +639,22 @@ describe('loader', () => {
expect(getErrors(stats)).toMatchSnapshot('errors');
});

it(`should load files with underscore in the name (${implementationName}) (${syntax})`, async () => {
const testId = getTestId('import-underscore-file', syntax);
const options = {
implementation: getImplementationByName(implementationName),
};
const compiler = getCompiler(testId, { loader: { options } });
const stats = await compile(compiler);
const codeFromBundle = getCodeFromBundle(stats, compiler);
const codeFromSass = getCodeFromSass(testId, options);

expect(codeFromBundle.css).toBe(codeFromSass.css);
expect(codeFromBundle.css).toMatchSnapshot('css');
expect(getWarnings(stats)).toMatchSnapshot('warnings');
expect(getErrors(stats)).toMatchSnapshot('errors');
});

if (implementation === dartSass) {
it(`should output an understandable error with a problem in "@use" (${implementationName}) (${syntax})`, async () => {
const testId = getTestId('error-use', syntax);
Expand Down
2 changes: 2 additions & 0 deletions test/sass/__file.sass
@@ -0,0 +1,2 @@
a
color: red
1 change: 1 addition & 0 deletions test/sass/import-underscore-file.sass
@@ -0,0 +1 @@
@import '_file'
3 changes: 3 additions & 0 deletions test/scss/__file.scss
@@ -0,0 +1,3 @@
a {
color: red;
}
1 change: 1 addition & 0 deletions test/scss/import-underscore-file.scss
@@ -0,0 +1 @@
@import '_file';

0 comments on commit 1655baf

Please sign in to comment.