fix: handle pkg: scheme (#1191)

Author: alexander-akait

src/utils.js

@@ -303,6 +303,8 @@ const MODULE_REQUEST_REGEX = /^[^?]*~/;
 const IS_MODULE_IMPORT =
   /^~([^/]+|[^/]+\/|@[^/]+[/][^/]+|@[^/]+\/?|@[^/]+[/][^/]+\/)$/;
 
+const IS_PKG_SCHEME = /^pkg:/i;
+
 /**
  * When `sass`/`node-sass` 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.
@@ -331,7 +333,13 @@ function getPossibleRequests(
       request = request.replace(MODULE_REQUEST_REGEX, "");
     }
 
-    if (IS_MODULE_IMPORT.test(url)) {
+    if (IS_PKG_SCHEME.test(url)) {
+      request = `${request.slice(4)}`;
+
+      return [...new Set([request, url])];
+    }
+
+    if (IS_MODULE_IMPORT.test(url) || IS_PKG_SCHEME.test(url)) {
       request = request[request.length - 1] === "/" ? request : `${request}/`;
 
       return [...new Set([request, url])];
@@ -538,6 +546,8 @@ function getWebpackResolver(
     const needEmulateSassResolver =
       // `sass` doesn't support module import
       !IS_SPECIAL_MODULE_IMPORT.test(request) &&
+      // don't handle `pkg:` scheme
+      !IS_PKG_SCHEME.test(request) &&
       // We need improve absolute paths handling.
       // Absolute paths should be resolved:
       // - Server-relative URLs - `<context>/path/to/file.ext` (where `<context>` is root context)

test/__snapshots__/loader.test.js.snap

@@ -359192,6 +359192,46 @@ exports[`loader should work with "bootstrap" package v5, import as a package ('s
 
 exports[`loader should work with "bootstrap" package v5, import as a package ('sass-embedded', 'legacy' API, 'scss' syntax): warnings 1`] = `[]`;
 
+exports[`loader should work with "pkg" prefix in "@use" ('dart-sass', 'legacy' API, 'sass' syntax) with "@charset "UTF-8";": css 1`] = `
+".foo {
+  color: red;
+}"
+`;
+
+exports[`loader should work with "pkg" prefix in "@use" ('dart-sass', 'legacy' API, 'sass' syntax) with "@charset "UTF-8";": errors 1`] = `[]`;
+
+exports[`loader should work with "pkg" prefix in "@use" ('dart-sass', 'legacy' API, 'sass' syntax) with "@charset "UTF-8";": warnings 1`] = `[]`;
+
+exports[`loader should work with "pkg" prefix in "@use" ('dart-sass', 'legacy' API, 'scss' syntax) with "@charset "UTF-8";": css 1`] = `
+".foo {
+  color: red;
+}"
+`;
+
+exports[`loader should work with "pkg" prefix in "@use" ('dart-sass', 'legacy' API, 'scss' syntax) with "@charset "UTF-8";": errors 1`] = `[]`;
+
+exports[`loader should work with "pkg" prefix in "@use" ('dart-sass', 'legacy' API, 'scss' syntax) with "@charset "UTF-8";": warnings 1`] = `[]`;
+
+exports[`loader should work with "pkg" prefix in "@use" ('sass-embedded', 'legacy' API, 'sass' syntax) with "@charset "UTF-8";": css 1`] = `
+".foo {
+  color: red;
+}"
+`;
+
+exports[`loader should work with "pkg" prefix in "@use" ('sass-embedded', 'legacy' API, 'sass' syntax) with "@charset "UTF-8";": errors 1`] = `[]`;
+
+exports[`loader should work with "pkg" prefix in "@use" ('sass-embedded', 'legacy' API, 'sass' syntax) with "@charset "UTF-8";": warnings 1`] = `[]`;
+
+exports[`loader should work with "pkg" prefix in "@use" ('sass-embedded', 'legacy' API, 'scss' syntax) with "@charset "UTF-8";": css 1`] = `
+".foo {
+  color: red;
+}"
+`;
+
+exports[`loader should work with "pkg" prefix in "@use" ('sass-embedded', 'legacy' API, 'scss' syntax) with "@charset "UTF-8";": errors 1`] = `[]`;
+
+exports[`loader should work with "pkg" prefix in "@use" ('sass-embedded', 'legacy' API, 'scss' syntax) with "@charset "UTF-8";": warnings 1`] = `[]`;
+
 exports[`loader should work with a package with "sass" and "exports" fields ('dart-sass', 'legacy' API, 'sass' syntax): css 1`] = `
 ".load-me {
   color: red;

test/loader.test.js

@@ -2142,6 +2142,23 @@ describe("loader", () => {
             expect(getErrors(stats)).toMatchSnapshot("errors");
           });
         }
+
+        if (!isModernAPI) {
+          it(`should work with "pkg" prefix in "@use" ('${implementationName}', '${api}' API, '${syntax}' syntax) with "@charset "UTF-8";"`, async () => {
+            const testId = getTestId("use-pkg", syntax);
+            const options = {
+              implementation,
+              api,
+            };
+            const compiler = getCompiler(testId, { loader: { options } });
+            const stats = await compile(compiler);
+            const codeFromBundle = getCodeFromBundle(stats, compiler);
+
+            expect(codeFromBundle.css).toMatchSnapshot("css");
+            expect(getWarnings(stats)).toMatchSnapshot("warnings");
+            expect(getErrors(stats)).toMatchSnapshot("errors");
+          });
+        }
       }
     });
   });

test/node_modules/pkg/package.json

@@ -0,0 +1 @@
+@use 'pkg:pkg'

test/node_modules/pkg/styles/index.scss

@@ -0,0 +1 @@
+@use 'pkg:pkg';