sass-loader 10.2.1 → 11.1.1

package/README.md

@@ -1,5 +1,5 @@
 <div align="center">
-  <img height="100"
+  <img height="170"
     src="https://worldvectorlogo.com/logos/sass-1.svg">
   <a href="https://github.com/webpack/webpack">
     <img width="200" height="200"
@@ -31,9 +31,9 @@ npm install sass-loader sass webpack --save-dev
 
 This allows you to control the versions of all your dependencies, and to choose which Sass implementation to use.
 
-> ℹ️ We recommend using [Dart Sass](https://github.com/sass/dart-sass).
+> ℹ️ We highly recommend using [Dart Sass](https://github.com/sass/dart-sass).
 
-> ⚠ [Node Sass](https://github.com/sass/node-sass) does not work with [Yarn PnP](https://classic.yarnpkg.com/en/docs/pnp/) feature.
+> ⚠ [Node Sass](https://github.com/sass/node-sass) does not work with [Yarn PnP](https://classic.yarnpkg.com/en/docs/pnp/) feature and doesn't support [@use rule](https://sass-lang.com/documentation/at-rules/use).
 
 Chain the `sass-loader` with the [css-loader](https://github.com/webpack-contrib/css-loader) and the [style-loader](https://github.com/webpack-contrib/style-loader) to immediately apply all styles to the DOM or the [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin) to extract it into a separate file.
 
@@ -83,13 +83,23 @@ Finally run `webpack` via your preferred method.
 
 Webpack provides an [advanced mechanism to resolve files](https://webpack.js.org/concepts/module-resolution/).
 
-The `sass-loader` uses Sass's custom importer feature to pass all queries to the Webpack resolving engine. Thus you can import your Sass modules from `node_modules`. Just prepend them with a `~` to tell Webpack that this is not a relative import:
+The `sass-loader` uses Sass's custom importer feature to pass all queries to the Webpack resolving engine.
+Thus you can import your Sass modules from `node_modules`.
+
+```scss
+@import "bootstrap";
+```
+
+Using `~` is deprecated and can be removed from your code (**we recommend it**), but we still support it for historical reasons.
+Why can you remove it? The loader will first try to resolve `@import` as a relative path. If it cannot be resolved, then the loader will try to resolve `@import` inside [`node_modules`](https://webpack.js.org/configuration/resolve/#resolvemodules).
+
+Prepending module paths with a `~` tells webpack to search through [`node_modules`](https://webpack.js.org/configuration/resolve/#resolvemodules).
 
 ```scss
 @import "~bootstrap";
 ```
 
-It's important to only prepend it with `~`, because `~/` resolves to the home directory.
+It's important to prepend it with only `~`, because `~/` resolves to the home directory.
 Webpack needs to distinguish between `bootstrap` and `~bootstrap` because CSS and Sass files have no special syntax for importing relative files.
 Writing `@import "style.scss"` is the same as `@import "./style.scss";`
 
@@ -571,7 +581,7 @@ For production builds it's recommended to extract the CSS from your bundle being
 
 There are two possibilities to extract a style sheet from the bundle:
 
-- [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin) (use this, when using webpack 4 configuration. Works in all use-cases)
+- [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin)
 - [extract-loader](https://github.com/peerigon/extract-loader) (simpler, but specialized on the css-loader's output)
 
 **webpack.config.js**

package/dist/index.js

@@ -7,10 +7,6 @@ exports.default = void 0;
 
 var _path = _interopRequireDefault(require("path"));
 
-var _schemaUtils = require("schema-utils");
-
-var _loaderUtils = require("loader-utils");
-
 var _options = _interopRequireDefault(require("./options.json"));
 
 var _utils = require("./utils");
@@ -26,11 +22,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * @param {string} content
  */
 async function loader(content) {
-  const options = (0, _loaderUtils.getOptions)(this);
-  (0, _schemaUtils.validate)(_options.default, options, {
-    name: "Sass Loader",
-    baseDataPath: "options"
-  });
+  const options = this.getOptions(_options.default);
   const callback = this.async();
   const implementation = (0, _utils.getSassImplementation)(this, options.implementation);
 

package/dist/options.json

@@ -1,4 +1,5 @@
 {
+  "title": "Sass Loader options",
   "type": "object",
   "properties": {
     "implementation": {

package/dist/utils.js

@@ -3,24 +3,20 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getRenderFunctionFromSassImplementation = getRenderFunctionFromSassImplementation;
 exports.getSassImplementation = getSassImplementation;
 exports.getSassOptions = getSassOptions;
-exports.getWebpackImporter = getWebpackImporter;
 exports.getWebpackResolver = getWebpackResolver;
-exports.isSupportedFibers = isSupportedFibers;
+exports.getWebpackImporter = getWebpackImporter;
+exports.getRenderFunctionFromSassImplementation = getRenderFunctionFromSassImplementation;
 exports.normalizeSourceMap = normalizeSourceMap;
+exports.isSupportedFibers = isSupportedFibers;
 
 var _url = _interopRequireDefault(require("url"));
 
 var _path = _interopRequireDefault(require("path"));
 
-var _semver = _interopRequireDefault(require("semver"));
-
 var _full = require("klona/full");
 
-var _loaderUtils = require("loader-utils");
-
 var _neoAsync = _interopRequireDefault(require("neo-async"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -78,32 +74,19 @@ function getSassImplementation(loaderContext, implementation) {
     return;
   }
 
-  const [implementationName, version] = infoParts;
+  const [implementationName] = infoParts;
 
   if (implementationName === "dart-sass") {
-    if (!_semver.default.satisfies(version, "^1.3.0")) {
-      loaderContext.emitError(new Error(`Dart Sass version ${version} is incompatible with ^1.3.0.`));
-    } // eslint-disable-next-line consistent-return
-
-
+    // eslint-disable-next-line consistent-return
     return resolvedImplementation;
   } else if (implementationName === "node-sass") {
-    if (!_semver.default.satisfies(version, "^4.0.0 || ^5.0.0 || ^6.0.0")) {
-      loaderContext.emitError(new Error(`Node Sass version ${version} is incompatible with ^4.0.0 || ^5.0.0 || ^6.0.0.`));
-    } // eslint-disable-next-line consistent-return
-
-
+    // eslint-disable-next-line consistent-return
     return resolvedImplementation;
   }
 
   loaderContext.emitError(new Error(`Unknown Sass implementation "${implementationName}".`));
 }
 
-function isSupportedFibers() {
-  const [nodeVersion] = process.versions.node.split(".");
-  return Number(nodeVersion) < 16;
-}
-
 function isProductionLikeMode(loaderContext) {
   return loaderContext.mode === "production" || !loaderContext.mode;
 }
@@ -114,6 +97,11 @@ function proxyCustomImporters(importers, loaderContext) {
     return importer.apply(this, args);
   });
 }
+
+function isSupportedFibers() {
+  const [nodeVersion] = process.versions.node.split(".");
+  return Number(nodeVersion) < 16;
+}
 /**
  * Derives the sass options from the loader context and normalizes its values with sane defaults.
  *
@@ -193,7 +181,9 @@ async function getSassOptions(loaderContext, loaderOptions, content, implementat
   options.includePaths = [].concat(process.cwd()).concat( // We use `includePaths` in context for resolver, so it should be always absolute
   (options.includePaths || []).map(includePath => _path.default.isAbsolute(includePath) ? includePath : _path.default.join(process.cwd(), includePath))).concat(process.env.SASS_PATH ? process.env.SASS_PATH.split(process.platform === "win32" ? ";" : ":") : []);
   return options;
-} // Examples:
+}
+
+const MODULE_REQUEST_REGEX = /^[^?]*~/; // Examples:
 // - ~package
 // - ~package/
 // - ~@org
@@ -201,8 +191,7 @@ async function getSassOptions(loaderContext, loaderOptions, content, implementat
 // - ~@org/package
 // - ~@org/package/
 
-
-const isModuleImport = /^~([^/]+|[^/]+\/|@[^/]+[/][^/]+|@[^/]+\/?|@[^/]+[/][^/]+\/)$/;
+const IS_MODULE_IMPORT = /^~([^/]+|[^/]+\/|@[^/]+[/][^/]+|@[^/]+\/?|@[^/]+[/][^/]+\/)$/;
 /**
  * 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.
@@ -219,12 +208,18 @@ const isModuleImport = /^~([^/]+|[^/]+\/|@[^/]+[/][^/]+|@[^/]+\/?|@[^/]+[/][^/]+
  */
 
 function getPossibleRequests( // eslint-disable-next-line no-shadow
-url, forWebpackResolver = false, rootContext = false) {
-  const request = (0, _loaderUtils.urlToRequest)(url, // Maybe it is server-relative URLs
-  forWebpackResolver && rootContext); // In case there is module request, send this to webpack resolver
+url, forWebpackResolver = false) {
+  let request = url; // In case there is module request, send this to webpack resolver
+
+  if (forWebpackResolver) {
+    if (MODULE_REQUEST_REGEX.test(url)) {
+      request = request.replace(MODULE_REQUEST_REGEX, "");
+    }
 
-  if (forWebpackResolver && isModuleImport.test(url)) {
-    return [...new Set([request, url])];
+    if (IS_MODULE_IMPORT.test(url)) {
+      request = request[request.length - 1] === "/" ? request : `${request}/`;
+      return [...new Set([request, url])];
+    }
   } // Keep in mind: ext can also be something like '.datepicker' when the true extension is omitted and the filename contains a dot.
   // @see https://github.com/webpack-contrib/sass-loader/issues/167
 
@@ -279,12 +274,11 @@ const IS_NATIVE_WIN32_PATH = /^[a-z]:[/\\]|^\\\\/i;
  * @param {Object} implementation - The imported Sass implementation, both
  *   `sass` (Dart Sass) and `node-sass` are supported.
  * @param {string[]} [includePaths] - The list of include paths passed to Sass.
- * @param {boolean} [rootContext] - The configured Webpack root context.
  *
  * @throws If a compatible Sass implementation cannot be found.
  */
 
-function getWebpackResolver(resolverFactory, implementation, includePaths = [], rootContext = false) {
+function getWebpackResolver(resolverFactory, implementation, includePaths = []) {
   async function startResolving(resolutionMap) {
     if (resolutionMap.length === 0) {
       return Promise.reject();
@@ -330,16 +324,26 @@ function getWebpackResolver(resolverFactory, implementation, includePaths = [],
     mainFields: [],
     mainFiles: ["_index", "index"],
     modules: [],
-    restrictions: [/\.((sa|sc|c)ss)$/i]
+    restrictions: [/\.((sa|sc|c)ss)$/i],
+    preferRelative: true
   }));
   const webpackResolve = promiseResolve(resolverFactory({
+    dependencyType: "sass",
     conditionNames: ["sass", "style"],
     mainFields: ["sass", "style", "main", "..."],
     mainFiles: ["_index", "index", "..."],
     extensions: [".sass", ".scss", ".css"],
-    restrictions: [/\.((sa|sc|c)ss)$/i]
+    restrictions: [/\.((sa|sc|c)ss)$/i],
+    preferRelative: true
   }));
   return (context, request) => {
+    // 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
+    if (!isDartSass && !_path.default.isAbsolute(context)) {
+      return Promise.reject();
+    }
+
     const originalRequest = request;
     const isFileScheme = originalRequest.slice(0, 5).toLowerCase() === "file:";
 
@@ -370,7 +374,7 @@ function getWebpackResolver(resolverFactory, implementation, includePaths = [],
       // 4. Filesystem imports relative to an `includePaths` path.
       // 5. Filesystem imports relative to a `SASS_PATH` path.
       //
-      // Because `sass`/`node-sass` run custom importers before `3`, `4` and `5` points, we need to emulate this behavior to avoid wrong resolution.
+      // `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
 
       if (!isDartSass) {
@@ -391,7 +395,7 @@ function getWebpackResolver(resolverFactory, implementation, includePaths = [],
       }));
     }
 
-    const webpackPossibleRequests = getPossibleRequests(request, true, rootContext);
+    const webpackPossibleRequests = getPossibleRequests(request, true);
     resolutionMap = resolutionMap.concat({
       resolve: webpackResolve,
       context: _path.default.dirname(context),
@@ -404,7 +408,7 @@ function getWebpackResolver(resolverFactory, implementation, includePaths = [],
 const matchCss = /\.css$/i;
 
 function getWebpackImporter(loaderContext, implementation, includePaths) {
-  const resolve = getWebpackResolver(loaderContext.getResolve, implementation, includePaths, loaderContext.rootContext);
+  const resolve = getWebpackResolver(loaderContext.getResolve, implementation, includePaths);
   return (originalUrl, prev, done) => {
     resolve(prev, originalUrl).then(result => {
       // Add the result as dependency.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sass-loader",
-  "version": "10.2.1",
+  "version": "11.1.1",
   "description": "Sass loader for webpack",
   "license": "MIT",
   "repository": "webpack-contrib/sass-loader",
@@ -31,9 +31,8 @@
     "test:coverage": "npm run test:only -- --collectCoverageFrom=\"src/**/*.js\" --coverage",
     "pretest": "npm run lint",
     "test": "npm run test:coverage",
-    "prepare": "npm run build",
-    "release": "standard-version",
-    "defaults": "webpack-defaults"
+    "prepare": "husky install && npm run build",
+    "release": "standard-version"
   },
   "files": [
     "dist"
@@ -42,7 +41,7 @@
     "fibers": ">= 3.1.0",
     "node-sass": "^4.0.0 || ^5.0.0 || ^6.0.0",
     "sass": "^1.3.0",
-    "webpack": "^4.36.0 || ^5.0.0"
+    "webpack": "^5.0.0"
   },
   "peerDependenciesMeta": {
     "node-sass": {
@@ -57,45 +56,43 @@
   },
   "dependencies": {
     "klona": "^2.0.4",
-    "loader-utils": "^2.0.0",
-    "neo-async": "^2.6.2",
-    "schema-utils": "^3.0.0",
-    "semver": "^7.3.2"
+    "neo-async": "^2.6.2"
   },
   "devDependencies": {
-    "@babel/cli": "^7.12.1",
-    "@babel/core": "^7.12.3",
-    "@babel/preset-env": "^7.12.1",
-    "@commitlint/cli": "^11.0.0",
-    "@commitlint/config-conventional": "^11.0.0",
-    "@webpack-contrib/defaults": "^6.3.0",
+    "@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",
     "@webpack-contrib/eslint-config-webpack": "^3.0.0",
     "babel-jest": "^26.6.3",
     "bootstrap": "^4.5.3",
     "bootstrap-sass": "^3.4.1",
-    "cross-env": "^7.0.2",
-    "css-loader": "^5.0.1",
+    "cross-env": "^7.0.3",
+    "css-loader": "^5.2.4",
     "del": "^6.0.0",
     "del-cli": "^3.0.1",
-    "enhanced-resolve": "^5.5.0",
-    "eslint": "^7.13.0",
-    "eslint-config-prettier": "^7.1.0",
+    "enhanced-resolve": "^5.8.0",
+    "eslint": "^7.26.0",
+    "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-import": "^2.22.1",
     "fibers": "^5.0.0",
     "file-loader": "^6.2.0",
     "foundation-sites": "^6.6.3",
-    "husky": "^4.3.0",
+    "husky": "^6.0.0",
     "jest": "^26.6.3",
-    "lint-staged": "^10.5.1",
+    "lint-staged": "^11.0.0",
     "material-components-web": "^8.0.0",
-    "memfs": "^3.2.0",
-    "node-sass": "^6.0.1",
+    "memfs": "^3.2.2",
+    "node-sass": "^6.0.0",
+    "node-sass-glob-importer": "^5.3.2",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.1.2",
-    "sass": "^1.29.0",
-    "standard-version": "^9.0.0",
+    "prettier": "^2.3.0",
+    "sass": "^1.32.12",
+    "semver": "^7.3.5",
+    "standard-version": "^9.3.0",
     "style-loader": "^2.0.0",
-    "webpack": "^5.12.2"
+    "webpack": "^5.36.2"
   },
   "keywords": [
     "sass",