sass-loader 11.1.1 → 12.0.0

package/dist/utils.js

@@ -40,9 +40,7 @@ function getDefaultSassImplementation() {
   return require(sassImplPkg);
 }
 /**
- * @public
- * This function is not Webpack-specific and can be used by tools wishing to
- * mimic `sass-loader`'s behaviour, so its signature should not be changed.
+ * This function is not Webpack-specific and can be used by tools wishing to mimic `sass-loader`'s behaviour, so its signature should not be changed.
  */
 
 
@@ -86,6 +84,11 @@ function getSassImplementation(loaderContext, implementation) {
 
   loaderContext.emitError(new Error(`Unknown Sass implementation "${implementationName}".`));
 }
+/**
+ * @param {any} loaderContext
+ * @returns {boolean}
+ */
+
 
 function isProductionLikeMode(loaderContext) {
   return loaderContext.mode === "production" || !loaderContext.mode;
@@ -93,8 +96,10 @@ function isProductionLikeMode(loaderContext) {
 
 function proxyCustomImporters(importers, loaderContext) {
   return [].concat(importers).map(importer => function proxyImporter(...args) {
-    this.webpackLoaderContext = loaderContext;
-    return importer.apply(this, args);
+    const self = { ...this,
+      webpackLoaderContext: loaderContext
+    };
+    return importer.apply(self, args);
   });
 }
 
@@ -203,12 +208,12 @@ const IS_MODULE_IMPORT = /^~([^/]+|[^/]+\/|@[^/]+[/][^/]+|@[^/]+\/?|@[^/]+[/][^/
  *
  * @param {string} url
  * @param {boolean} forWebpackResolver
- * @param {string} rootContext
+ * @param {boolean} fromImport
  * @returns {Array<string>}
  */
 
 function getPossibleRequests( // eslint-disable-next-line no-shadow
-url, forWebpackResolver = false) {
+url, forWebpackResolver = false, fromImport = false) {
   let request = url; // In case there is module request, send this to webpack resolver
 
   if (forWebpackResolver) {
@@ -224,7 +229,7 @@ url, forWebpackResolver = false) {
   // @see https://github.com/webpack-contrib/sass-loader/issues/167
 
 
-  const ext = _path.default.extname(request).toLowerCase(); // Because @import is also defined in CSS, Sass needs a way of compiling plain CSS @imports without trying to import the files at compile time.
+  const extension = _path.default.extname(request).toLowerCase(); // Because @import is also defined in CSS, Sass needs a way of compiling plain CSS @imports without trying to import the files at compile time.
   // To accomplish this, and to ensure SCSS is as much of a superset of CSS as possible, Sass will compile any @imports with the following characteristics to plain CSS imports:
   //  - imports where the URL ends with .css.
   //  - imports where the URL begins http:// or https://.
@@ -234,15 +239,19 @@ url, forWebpackResolver = false) {
   // The `node-sass` package sends `@import` ending on `.css` to importer, it is bug, so we skip resolve
 
 
-  if (ext === ".css") {
+  if (extension === ".css") {
     return [];
   }
 
   const dirname = _path.default.dirname(request);
 
+  const normalizedDirname = dirname === "." ? "" : `${dirname}/`;
+
   const basename = _path.default.basename(request);
 
-  return [...new Set([`${dirname}/_${basename}`, request].concat(forWebpackResolver ? [`${_path.default.dirname(url)}/_${basename}`, url] : []))];
+  const basenameWithoutExtension = _path.default.basename(request, extension);
+
+  return [...new Set([].concat(fromImport ? [`${normalizedDirname}_${basenameWithoutExtension}.import${extension}`, `${normalizedDirname}${basenameWithoutExtension}.import${extension}`] : []).concat([`${normalizedDirname}_${basename}`, `${normalizedDirname}${basename}`]).concat(forWebpackResolver ? [url] : []))];
 }
 
 function promiseResolve(callbackResolve) {
@@ -313,8 +322,16 @@ function getWebpackResolver(resolverFactory, implementation, includePaths = [])
     }
   }
 
-  const isDartSass = implementation.info.includes("dart-sass");
-  const sassResolve = promiseResolve(resolverFactory({
+  const isDartSass = implementation.info.includes("dart-sass"); // We only have one difference with the built-in sass resolution logic and out resolution logic:
+  // First, we look at the files starting with `_`, then without `_` (i.e. `_name.sass`, `_name.scss`, `_name.css`, `name.sass`, `name.scss`, `name.css`),
+  // although `sass` look together by extensions (i.e. `_name.sass`/`name.sass`/`_name.scss`/`name.scss`/`_name.css`/`name.css`).
+  // It shouldn't be a problem because `sass` throw errors:
+  // - on having `_name.sass` and `name.sass` (extension can be `sass`, `scss` or `css`) in the same directory
+  // - on having `_name.sass` and `_name.scss` in the same directory
+  //
+  // Also `sass` prefer `sass`/`scss` over `css`.
+
+  const sassModuleResolve = promiseResolve(resolverFactory({
     alias: [],
     aliasFields: [],
     conditionNames: [],
@@ -327,7 +344,20 @@ function getWebpackResolver(resolverFactory, implementation, includePaths = [])
     restrictions: [/\.((sa|sc|c)ss)$/i],
     preferRelative: true
   }));
-  const webpackResolve = promiseResolve(resolverFactory({
+  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"],
     mainFields: ["sass", "style", "main", "..."],
@@ -336,7 +366,16 @@ function getWebpackResolver(resolverFactory, implementation, includePaths = [])
     restrictions: [/\.((sa|sc|c)ss)$/i],
     preferRelative: true
   }));
-  return (context, request) => {
+  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, 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
@@ -375,11 +414,11 @@ function getWebpackResolver(resolverFactory, implementation, includePaths = [])
       // 5. Filesystem imports relative to a `SASS_PATH` path.
       //
       // `sass` run custom importers before `3`, `4` and `5` points, we need to emulate this behavior to avoid wrong resolution.
-      const sassPossibleRequests = getPossibleRequests(request); // `node-sass` calls our importer before `1. Filesystem imports relative to the base file.`, so we need emulate this too
+      const sassPossibleRequests = getPossibleRequests(request, false, fromImport); // `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.default.dirname(context),
           possibleRequests: sassPossibleRequests
         });
@@ -388,16 +427,16 @@ function getWebpackResolver(resolverFactory, implementation, includePaths = [])
       resolutionMap = resolutionMap.concat( // eslint-disable-next-line no-shadow
       includePaths.map(context => {
         return {
-          resolve: sassResolve,
+          resolve: fromImport ? sassImportResolve : sassModuleResolve,
           context,
           possibleRequests: sassPossibleRequests
         };
       }));
     }
 
-    const webpackPossibleRequests = getPossibleRequests(request, true);
+    const webpackPossibleRequests = getPossibleRequests(request, true, fromImport);
     resolutionMap = resolutionMap.concat({
-      resolve: webpackResolve,
+      resolve: fromImport ? webpackImportResolve : webpackModuleResolve,
       context: _path.default.dirname(context),
       possibleRequests: webpackPossibleRequests
     });
@@ -405,19 +444,22 @@ function getWebpackResolver(resolverFactory, implementation, includePaths = [])
   };
 }
 
-const matchCss = /\.css$/i;
+const MATCH_CSS = /\.css$/i;
 
 function getWebpackImporter(loaderContext, implementation, includePaths) {
   const resolve = getWebpackResolver(loaderContext.getResolve, implementation, includePaths);
-  return (originalUrl, prev, done) => {
-    resolve(prev, originalUrl).then(result => {
+  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.default.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, "")
+        file: result.replace(MATCH_CSS, "")
       });
     }) // Catch all resolving errors, return the original file and pass responsibility back to other custom importers
     .catch(() => {
@@ -455,6 +497,10 @@ function getRenderFunctionFromSassImplementation(implementation) {
 }
 
 const ABSOLUTE_SCHEME = /^[A-Za-z0-9+\-.]+:/;
+/**
+ * @param {string} source
+ * @returns {"absolute" | "scheme-relative" | "path-absolute" | "path-absolute"}
+ */
 
 function getURLType(source) {
   if (source[0] === "/") {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sass-loader",
-  "version": "11.1.1",
+  "version": "12.0.0",
   "description": "Sass loader for webpack",
   "license": "MIT",
   "repository": "webpack-contrib/sass-loader",
@@ -13,7 +13,7 @@
   },
   "main": "dist/cjs.js",
   "engines": {
-    "node": ">= 10.13.0"
+    "node": ">= 12.13.0"
   },
   "scripts": {
     "start": "npm run build -- -w",
@@ -59,28 +59,29 @@
     "neo-async": "^2.6.2"
   },
   "devDependencies": {
-    "@babel/cli": "^7.13.16",
-    "@babel/core": "^7.14.0",
-    "@babel/preset-env": "^7.14.1",
-    "@commitlint/cli": "^12.1.1",
-    "@commitlint/config-conventional": "^12.1.1",
+    "@babel/cli": "^7.14.3",
+    "@babel/core": "^7.14.3",
+    "@babel/preset-env": "^7.14.2",
+    "@commitlint/cli": "^12.1.4",
+    "@commitlint/config-conventional": "^12.1.4",
     "@webpack-contrib/eslint-config-webpack": "^3.0.0",
-    "babel-jest": "^26.6.3",
-    "bootstrap": "^4.5.3",
+    "babel-jest": "^27.0.1",
     "bootstrap-sass": "^3.4.1",
+    "bootstrap-v4": "npm:bootstrap@^4.5.3",
+    "bootstrap-v5": "npm:bootstrap@^5.0.1",
     "cross-env": "^7.0.3",
-    "css-loader": "^5.2.4",
+    "css-loader": "^5.2.6",
     "del": "^6.0.0",
     "del-cli": "^3.0.1",
-    "enhanced-resolve": "^5.8.0",
-    "eslint": "^7.26.0",
+    "enhanced-resolve": "^5.8.2",
+    "eslint": "^7.27.0",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-import": "^2.23.3",
     "fibers": "^5.0.0",
     "file-loader": "^6.2.0",
     "foundation-sites": "^6.6.3",
     "husky": "^6.0.0",
-    "jest": "^26.6.3",
+    "jest": "^27.0.1",
     "lint-staged": "^11.0.0",
     "material-components-web": "^8.0.0",
     "memfs": "^3.2.2",
@@ -88,11 +89,11 @@
     "node-sass-glob-importer": "^5.3.2",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.3.0",
-    "sass": "^1.32.12",
+    "sass": "^1.34.0",
     "semver": "^7.3.5",
     "standard-version": "^9.3.0",
     "style-loader": "^2.0.0",
-    "webpack": "^5.36.2"
+    "webpack": "^5.37.1"
   },
   "keywords": [
     "sass",