diff --git a/lib/importsToResolve.js b/lib/importsToResolve.js index e4f5ffc0..0a259f47 100644 --- 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 index a350c695..d1338107 100644 --- 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 new file mode 100644 index 00000000..c82c7a56 --- /dev/null +++ b/test/node_modules/@org/pkg/index.scss @@ -0,0 +1,3 @@ +.org-pkg { + background: white; +} diff --git a/test/node_modules/@org/pkg/package.json b/test/node_modules/@org/pkg/package.json new file mode 100644 index 00000000..4b90f280 --- /dev/null +++ b/test/node_modules/@org/pkg/package.json @@ -0,0 +1,4 @@ +{ + "name": "@org/pkg", + "main": "./index.scss" +} diff --git a/test/sass/import-from-npm-org-pkg.sass b/test/sass/import-from-npm-org-pkg.sass new file mode 100644 index 00000000..e22f2aef --- /dev/null +++ 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 new file mode 100644 index 00000000..29086be4 --- /dev/null +++ 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 index 11769689..52f910ff 100644 --- 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 {