fix: resolution logic (#831)

Author: evilebottnawi

src/getPossibleRequests.js

@@ -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.
@@ -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,
   ];

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;

test/loader.test.js

@@ -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);

test/sass/__file.sass

@@ -0,0 +1,2 @@
+a
+  color: red

test/sass/import-underscore-file.sass

@@ -0,0 +1 @@
+@import '_file'

test/scss/__file.scss

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

test/scss/import-underscore-file.scss

@@ -0,0 +1 @@
+@import '_file';