fix: resolving _index.import.scss/index.import.scss in packages (#…

…906)

src/utils.js

@@ -358,7 +358,7 @@ function getWebpackResolver(
   }
 
   const isDartSass = implementation.info.includes("dart-sass");
-  const sassResolve = promiseResolve(
+  const sassModuleResolve = promiseResolve(
     resolverFactory({
       alias: [],
       aliasFields: [],
@@ -373,7 +373,22 @@ function getWebpackResolver(
       preferRelative: true,
     })
   );
-  const webpackResolve = promiseResolve(
+  const sassImportResolve = promiseResolve(
+    resolverFactory({
+      alias: [],
+      aliasFields: [],
+      conditionNames: [],
+      descriptionFiles: [],
+      extensions: [".sass", ".scss", ".css"],
+      exportsFields: [],
+      mainFields: [],
+      mainFiles: ["_index.import", "_index", "index.import", "index"],
+      modules: [],
+      restrictions: [/\.((sa|sc|c)ss)$/i],
+      preferRelative: true,
+    })
+  );
+  const webpackModuleResolve = promiseResolve(
     resolverFactory({
       dependencyType: "sass",
       conditionNames: ["sass", "style"],
@@ -384,8 +399,19 @@ function getWebpackResolver(
       preferRelative: true,
     })
   );
+  const webpackImportResolve = promiseResolve(
+    resolverFactory({
+      dependencyType: "sass",
+      conditionNames: ["sass", "style"],
+      mainFields: ["sass", "style", "main", "..."],
+      mainFiles: ["_index.import", "_index", "index.import", "index", "..."],
+      extensions: [".sass", ".scss", ".css"],
+      restrictions: [/\.((sa|sc|c)ss)$/i],
+      preferRelative: true,
+    })
+  );
 
-  return (context, request) => {
+  return (context, request, fromImport) => {
     // See https://github.com/webpack/webpack/issues/12340
     // Because `node-sass` calls our importer before `1. Filesystem imports relative to the base file.`
     // custom importer may not return `{ file: '/path/to/name.ext' }` and therefore our `context` will be relative
@@ -434,7 +460,7 @@ function getWebpackResolver(
       // `node-sass` calls our importer before `1. Filesystem imports relative to the base file.`, so we need emulate this too
       if (!isDartSass) {
         resolutionMap = resolutionMap.concat({
-          resolve: sassResolve,
+          resolve: fromImport ? sassImportResolve : sassModuleResolve,
           context: path.dirname(context),
           possibleRequests: sassPossibleRequests,
         });
@@ -444,7 +470,7 @@ function getWebpackResolver(
         // eslint-disable-next-line no-shadow
         includePaths.map((context) => {
           return {
-            resolve: sassResolve,
+            resolve: fromImport ? sassImportResolve : sassModuleResolve,
             context,
             possibleRequests: sassPossibleRequests,
           };
@@ -455,7 +481,7 @@ function getWebpackResolver(
     const webpackPossibleRequests = getPossibleRequests(request, true);
 
     resolutionMap = resolutionMap.concat({
-      resolve: webpackResolve,
+      resolve: fromImport ? webpackImportResolve : webpackModuleResolve,
       context: path.dirname(context),
       possibleRequests: webpackPossibleRequests,
     });
@@ -464,7 +490,7 @@ function getWebpackResolver(
   };
 }
 
-const matchCss = /\.css$/i;
+const MATCH_CSS = /\.css$/i;
 
 function getWebpackImporter(loaderContext, implementation, includePaths) {
   const resolve = getWebpackResolver(
@@ -473,16 +499,18 @@ function getWebpackImporter(loaderContext, implementation, includePaths) {
     includePaths
   );
 
-  return (originalUrl, prev, done) => {
-    resolve(prev, originalUrl)
+  return function importer(originalUrl, prev, done) {
+    const { fromImport } = this;
+
+    resolve(prev, originalUrl, fromImport)
       .then((result) => {
         // Add the result as dependency.
         // Although we're also using stats.includedFiles, this might come in handy when an error occurs.
         // In this case, we don't get stats.includedFiles from node-sass/sass.
         loaderContext.addDependency(path.normalize(result));
 
         // By removing the CSS file extension, we trigger node-sass to include the CSS file instead of just linking it.
-        done({ file: result.replace(matchCss, "") });
+        done({ file: result.replace(MATCH_CSS, "") });
       })
       // Catch all resolving errors, return the original file and pass responsibility back to other custom importers
       .catch(() => {

test/__snapshots__/loader.test.js.snap

@@ -1,5 +1,45 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`loader should import .import.sass files (dart-sass) (sass): css 1`] = `
+"a {
+  display: block;
+}"
+`;
+
+exports[`loader should import .import.sass files (dart-sass) (sass): errors 1`] = `Array []`;
+
+exports[`loader should import .import.sass files (dart-sass) (sass): warnings 1`] = `Array []`;
+
+exports[`loader should import .import.sass files from a package (dart-sass) (sass): css 1`] = `
+"a {
+  display: block;
+}"
+`;
+
+exports[`loader should import .import.sass files from a package (dart-sass) (sass): errors 1`] = `Array []`;
+
+exports[`loader should import .import.sass files from a package (dart-sass) (sass): warnings 1`] = `Array []`;
+
+exports[`loader should import .import.scss files (dart-sass) (scss): css 1`] = `
+"a {
+  display: block;
+}"
+`;
+
+exports[`loader should import .import.scss files (dart-sass) (scss): errors 1`] = `Array []`;
+
+exports[`loader should import .import.scss files (dart-sass) (scss): warnings 1`] = `Array []`;
+
+exports[`loader should import .import.scss files from a package (dart-sass) (scss): css 1`] = `
+"a {
+  display: block;
+}"
+`;
+
+exports[`loader should import .import.scss files from a package (dart-sass) (scss): errors 1`] = `Array []`;
+
+exports[`loader should import .import.scss files from a package (dart-sass) (scss): warnings 1`] = `Array []`;
+
 exports[`loader should load files with underscore in the name (dart-sass) (sass): css 1`] = `
 "a {
   color: red;
@@ -80,6 +120,24 @@ exports[`loader should load only sass/scss files for the "mainFiles" (node-sass)
 
 exports[`loader should load only sass/scss files for the "mainFiles" (node-sass) (scss): warnings 1`] = `Array []`;
 
+exports[`loader should not use .import.sass files (dart-sass) (sass): errors 1`] = `
+Array [
+  "ModuleBuildError: Module build failed (from ../src/cjs.js):
+SassError: Can't find stylesheet to import.",
+]
+`;
+
+exports[`loader should not use .import.sass files (dart-sass) (sass): warnings 1`] = `Array []`;
+
+exports[`loader should not use .import.scss files (dart-sass) (scss): errors 1`] = `
+Array [
+  "ModuleBuildError: Module build failed (from ../src/cjs.js):
+SassError: Can't find stylesheet to import.",
+]
+`;
+
+exports[`loader should not use .import.scss files (dart-sass) (scss): warnings 1`] = `Array []`;
+
 exports[`loader should output an understandable error (dart-sass) (sass): errors 1`] = `
 Array [
   "ModuleBuildError: Module build failed (from ../src/cjs.js):

test/loader.test.js

@@ -1599,6 +1599,50 @@ describe("loader", () => {
           expect(getErrors(stats)).toMatchSnapshot("errors");
         });
 
+        it(`should import .import.${syntax} files (${implementationName}) (${syntax})`, async () => {
+          const testId = getTestId("import-index-import", 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");
+        });
+
+        it(`should import .import.${syntax} files from a package (${implementationName}) (${syntax})`, async () => {
+          const testId = getTestId("import-index-import-from-package", 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");
+        });
+
+        it(`should not use .import.${syntax} files (${implementationName}) (${syntax})`, async () => {
+          const testId = getTestId("use-index-import", syntax);
+          const options = {
+            implementation: getImplementationByName(implementationName),
+          };
+          const compiler = getCompiler(testId, { loader: { options } });
+          const stats = await compile(compiler);
+
+          expect(getWarnings(stats)).toMatchSnapshot("warnings");
+          expect(getErrors(stats)).toMatchSnapshot("errors");
+        });
+
         it(`should work and output deprecation message (${implementationName})`, async () => {
           const testId = getTestId("deprecation", syntax);
           const options = {

test/sass/import-index-import-from-package.sass

@@ -0,0 +1 @@
+@import '~index-import-package'

test/sass/import-index-import.sass

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

test/sass/index-import/_index.import.sass

@@ -0,0 +1,2 @@
+a
+  display: block

test/sass/use-index-import.sass

@@ -0,0 +1 @@
+@use 'index-import'

test/scss/import-index-import-from-package.scss

@@ -0,0 +1 @@
+@import '~index-import-package';

test/scss/import-index-import.scss

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

test/scss/index-import/_index.import.scss

@@ -0,0 +1,3 @@
+a {
+  display: block;
+}

test/scss/use-index-import.scss

@@ -0,0 +1 @@
+@use 'index-import';