fix: Resolving of scoped npm packages (#447)

webpack-contrib · May 9, 2017 · 8d37244 · 8d37244
1 parent 1e6cd4d
commit 8d37244
Show file tree

Hide file tree

Showing 7 changed files with 23 additions and 1 deletion.
diff --git a/lib/importsToResolve.js b/lib/importsToResolve.js
@@ -29,8 +29,9 @@ function importsToResolve(request) {
     const dirname = path.dirname(request);
     const startsWithUnderscore = basename.charAt(0) === "_";
     // a module import is an identifier like 'bootstrap-sass'
+    // Firstly check whether we importing scoped npm package (i.e. "@org/pkg")
     // We also need to check for dirname since it might also be a deep import like 'bootstrap-sass/something'
-    const isModuleImport = request.charAt(0) !== "." && dirname === ".";
+    const isModuleImport = dirname.charAt(0) === "@" && dirname.length > 1 ? true : request.charAt(0) !== "." && dirname === ".";
     const hasCssExt = ext === ".css";
     const hasSassExt = ext === ".scss" || ext === ".sass";
 

diff --git a/test/index.test.js b/test/index.test.js
@@ -77,6 +77,7 @@ syntaxStyles.forEach(ext => {
             }));
             it("should not resolve CSS imports", () => execTest("import-css"));
             it("should compile bootstrap-sass without errors", () => execTest("bootstrap-sass"));
+            it("should correctly import scoped npm packages", () => execTest("import-from-npm-org-pkg"));
         });
         describe("custom importers", () => {
             it("should use custom importer", () => execTest("custom-importer", {

diff --git a/test/node_modules/@org/pkg/index.scss b/test/node_modules/@org/pkg/index.scss
diff --git a/test/node_modules/@org/pkg/package.json b/test/node_modules/@org/pkg/package.json
diff --git a/test/sass/import-from-npm-org-pkg.sass b/test/sass/import-from-npm-org-pkg.sass
@@ -0,0 +1,5 @@
+/* @import "~@org/pkg"; */
+@import "~@org/pkg";
+
+.foo
+    background: #000;
diff --git a/test/scss/import-from-npm-org-pkg.scss b/test/scss/import-from-npm-org-pkg.scss
@@ -0,0 +1,6 @@
+/* @import "~@org/pkg"; */
+@import "~@org/pkg";
+
+.foo {
+    background: #000;
+}
diff --git a/test/tools/createSpec.js b/test/tools/createSpec.js
@@ -14,6 +14,7 @@ function createSpec(ext) {
     const basePath = path.join(testFolder, ext);
     const testNodeModules = path.relative(basePath, path.join(testFolder, "node_modules")) + path.sep;
     const pathToBootstrap = path.relative(basePath, path.resolve(testFolder, "..", "node_modules", "bootstrap-sass"));
+    const pathToScopedNpmPkg = path.relative(basePath, path.resolve(testFolder, "node_modules", "@org", "pkg", "./index.scss"));
 
     fs.readdirSync(path.join(testFolder, ext))
         .filter((file) => {
@@ -30,6 +31,7 @@ function createSpec(ext) {
                     if (/\.css$/.test(url) === false) { // Do not transform css imports
                         url = url
                             .replace(/^~bootstrap-sass/, pathToBootstrap)
+                            .replace(/^~@org\/pkg/, pathToScopedNpmPkg)
                             .replace(/^~/, testNodeModules);
                     }
                     return {