fix: do not crash on a custom scheme in @import/@use for the modern API

Author: alexander-akait

.cspell.json

@@ -15,7 +15,8 @@
     "klona",
     "sharename",
     "wekbit",
-    "commitlint"
+    "commitlint",
+    "bgcolor"
   ],
 
   "ignorePaths": [

lint-staged.config.js

@@ -1,4 +1,4 @@
 module.exports = {
-  "*": ["prettier --write --ignore-unknown", "cspell"],
+  "*": ["prettier --write --ignore-unknown", "cspell --no-must-find-files"],
   "*.js": ["eslint --cache --fix"],
 };

src/index.js

@@ -97,14 +97,16 @@ async function loader(content) {
 
   // Modern API
   if (typeof result.loadedUrls !== "undefined") {
-    result.loadedUrls.forEach((includedFile) => {
-      const normalizedIncludedFile = url.fileURLToPath(includedFile);
-
-      // Custom `importer` can return only `contents` so includedFile will be relative
-      if (path.isAbsolute(normalizedIncludedFile)) {
-        this.addDependency(normalizedIncludedFile);
-      }
-    });
+    result.loadedUrls
+      .filter((url) => url.protocol === "file")
+      .forEach((includedFile) => {
+        const normalizedIncludedFile = url.fileURLToPath(includedFile);
+
+        // Custom `importer` can return only `contents` so includedFile will be relative
+        if (path.isAbsolute(normalizedIncludedFile)) {
+          this.addDependency(normalizedIncludedFile);
+        }
+      });
   }
   // Legacy API
   else if (

test/__snapshots__/sassOptions-option.test.js.snap

@@ -4158,6 +4158,22 @@ exports[`sassOptions option should work when the option like "Object" ('sass-emb
 
 exports[`sassOptions option should work when the option like "Object" ('sass-embedded', 'modern' API, 'scss' syntax): warnings 1`] = `[]`;
 
+exports[`sassOptions option should work with custom scheme import ('dart-sass', 'modern' API, 'sass' syntax): errors 1`] = `[]`;
+
+exports[`sassOptions option should work with custom scheme import ('dart-sass', 'modern' API, 'sass' syntax): warnings 1`] = `[]`;
+
+exports[`sassOptions option should work with custom scheme import ('dart-sass', 'modern' API, 'scss' syntax): errors 1`] = `[]`;
+
+exports[`sassOptions option should work with custom scheme import ('dart-sass', 'modern' API, 'scss' syntax): warnings 1`] = `[]`;
+
+exports[`sassOptions option should work with custom scheme import ('sass-embedded', 'modern' API, 'sass' syntax): errors 1`] = `[]`;
+
+exports[`sassOptions option should work with custom scheme import ('sass-embedded', 'modern' API, 'sass' syntax): warnings 1`] = `[]`;
+
+exports[`sassOptions option should work with custom scheme import ('sass-embedded', 'modern' API, 'scss' syntax): errors 1`] = `[]`;
+
+exports[`sassOptions option should work with custom scheme import ('sass-embedded', 'modern' API, 'scss' syntax): warnings 1`] = `[]`;
+
 exports[`sassOptions option should work with the "fiber" option ('dart-sass', 'legacy' API, 'sass' syntax): css 1`] = `
 "@charset "UTF-8";
 @import "./file.css";

test/sass/modern-vars.sass

@@ -0,0 +1 @@
+$color-fg: #000

test/sass/modern.sass

@@ -0,0 +1,6 @@
+@import 'modern-vars'
+// this is import by custom importer
+@import 'bgcolor:cornflowerblue'
+
+a
+  --color-fg: $color-fg

test/sassOptions-option.test.js

@@ -149,6 +149,39 @@ describe("sassOptions option", () => {
           expect(getWarnings(stats)).toMatchSnapshot("warnings");
           expect(getErrors(stats)).toMatchSnapshot("errors");
         });
+
+        it(`should work with custom scheme import ('${implementationName}', '${api}' API, '${syntax}' syntax)`, async () => {
+          const testId = getTestId("modern", syntax);
+          const options = {
+            implementation,
+            api,
+            sassOptions: {
+              // https://sass-lang.com/documentation/js-api/interfaces/Importer
+              importers: [
+                {
+                  canonicalize(url) {
+                    if (!url.startsWith("bgcolor:")) {
+                      return null;
+                    }
+
+                    return new URL(url);
+                  },
+                  load(canonicalUrl) {
+                    return {
+                      contents: `body {background-color: ${canonicalUrl.pathname}}`,
+                      syntax: "scss",
+                    };
+                  },
+                },
+              ],
+            },
+          };
+          const compiler = getCompiler(testId, { loader: { options } });
+          const stats = await compile(compiler);
+
+          expect(getWarnings(stats)).toMatchSnapshot("warnings");
+          expect(getErrors(stats)).toMatchSnapshot("errors");
+        });
       } else {
         it(`should ignore the "file" option ('${implementationName}', '${api}' API, '${syntax}' syntax)`, async () => {
           const testId = getTestId("language", syntax);

test/scss/modern-vars.scss

@@ -0,0 +1 @@
+$color-fg: #000;

test/scss/modern.scss

@@ -0,0 +1,7 @@
+@import 'modern-vars';
+// this is import by custom importer
+@import 'bgcolor:cornflowerblue';
+
+a {
+  --color-fg: $color-fg;
+}