sass-loader 14.1.0 → 14.2.0

package/README.md

@@ -657,16 +657,16 @@ module.exports = {
 Type:
 
 ```ts
-type api = "legacy" | "modern";
+type api = "legacy" | "modern" | "modern-compiler";
 ```
 
 Default: `"legacy"`
 
-Allows you to switch between `legacy` and `modern` API. You can find more information [here](https://sass-lang.com/documentation/js-api).
+Allows you to switch between `legacy` and `modern` API. You can find more information [here](https://sass-lang.com/documentation/js-api). The `modern-compiler` option enables the modern API with support for [Shared Resources](https://github.com/sass/sass/blob/main/accepted/shared-resources.d.ts.md).
 
-> **Warning**
+> **Note**
 >
-> "modern" API is experimental, so some features may not work (known: built-in `importer` is not working and files with errors is not watching on initial run), you can follow this [here](https://github.com/webpack-contrib/sass-loader/issues/774).
+> Using `modern-compiler` and `sass-embedded` together significantly improve performance and decrease built time. We strongly recommend their use. We will enable them by default in a future major release.
 
 > **Warning**
 >

package/dist/index.js

@@ -29,26 +29,28 @@ async function loader(content) {
   const sassOptions = await (0, _utils.getSassOptions)(this, options, content, implementation, useSourceMap);
   const shouldUseWebpackImporter = typeof options.webpackImporter === "boolean" ? options.webpackImporter : true;
   if (shouldUseWebpackImporter) {
-    const isModernAPI = options.api === "modern";
+    const isModernAPI = options.api === "modern" || options.api === "modern-compiler";
     if (!isModernAPI) {
       const {
         includePaths
       } = sassOptions;
       sassOptions.importer.push((0, _utils.getWebpackImporter)(this, implementation, includePaths));
     } else {
-      sassOptions.importers.push((0, _utils.getModernWebpackImporter)(this, implementation));
+      sassOptions.importers.push(
+      // No need to pass `loadPaths`, because modern API handle them itself
+      (0, _utils.getModernWebpackImporter)(this, implementation, []));
     }
   }
   let compile;
   try {
-    compile = (0, _utils.getCompileFn)(implementation, options);
+    compile = (0, _utils.getCompileFn)(this, implementation, options);
   } catch (error) {
     callback(error);
     return;
   }
   let result;
   try {
-    result = await compile(sassOptions, options);
+    result = await compile(sassOptions);
   } catch (error) {
     // There are situations when the `file`/`span.url` property do not exist
     // Modern API

package/dist/options.json

@@ -17,7 +17,7 @@
     "api": {
       "description": "Switch between old and modern API for `sass` (`Dart Sass`) and `Sass Embedded` implementations.",
       "link": "https://github.com/webpack-contrib/sass-loader#sassoptions",
-      "enum": ["legacy", "modern"]
+      "enum": ["legacy", "modern", "modern-compiler"]
     },
     "sassOptions": {
       "description": "Options for `node-sass` or `sass` (`Dart Sass`) implementation.",

package/dist/utils.js

@@ -145,7 +145,7 @@ async function getSassOptions(loaderContext, loaderOptions, content, implementat
       }
     };
   }
-  const isModernAPI = loaderOptions.api === "modern";
+  const isModernAPI = loaderOptions.api === "modern" || loaderOptions.api === "modern-compiler";
   const {
     resourcePath
   } = loaderContext;
@@ -171,6 +171,9 @@ async function getSassOptions(loaderContext, loaderOptions, content, implementat
         sassOptions.syntax = "css";
       }
     }
+    sassOptions.loadPaths = [].concat(
+    // We use `loadPaths` in context for resolver, so it should be always absolute
+    (sassOptions.loadPaths ? sassOptions.loadPaths.slice() : []).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" ? ";" : ":") : []);
     sassOptions.importers = sassOptions.importers ? Array.isArray(sassOptions.importers) ? sassOptions.importers.slice() : [sassOptions.importers] : [];
   } else {
     sassOptions.file = resourcePath;
@@ -228,6 +231,7 @@ const MODULE_REQUEST_REGEX = /^[^?]*~/;
 // - ~@org/package
 // - ~@org/package/
 const IS_MODULE_IMPORT = /^~([^/]+|[^/]+\/|@[^/]+[/][^/]+|@[^/]+\/?|@[^/]+[/][^/]+\/)$/;
+const IS_PKG_SCHEME = /^pkg:/i;
 
 /**
  * When `sass`/`node-sass` tries to resolve an import, it uses a special algorithm.
@@ -253,7 +257,11 @@ url, forWebpackResolver = false, fromImport = false) {
     if (MODULE_REQUEST_REGEX.test(url)) {
       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])];
     }
@@ -341,7 +349,7 @@ const IS_NATIVE_WIN32_PATH = /^[a-z]:[/\\]|^\\\\/i;
  * @throws If a compatible Sass implementation cannot be found.
  */
 function getWebpackResolver(resolverFactory, implementation, includePaths = []) {
-  const isDartSass = implementation && implementation.info.includes("dart-sass");
+  const isModernSass = implementation && (implementation.info.includes("dart-sass") || implementation.info.includes("sass-embedded"));
   // 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`).
@@ -398,7 +406,7 @@ function getWebpackResolver(resolverFactory, implementation, includePaths = [])
     // 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)) {
+    if (!isModernSass && !_path.default.isAbsolute(context)) {
       return Promise.reject();
     }
     const originalRequest = request;
@@ -416,6 +424,8 @@ function getWebpackResolver(resolverFactory, implementation, includePaths = [])
     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)
@@ -434,7 +444,7 @@ function getWebpackResolver(resolverFactory, implementation, includePaths = [])
       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) {
+      if (!isModernSass) {
         resolutionMap = resolutionMap.concat({
           resolve: fromImport ? sassImportResolve : sassModuleResolve,
           context: _path.default.dirname(context),
@@ -461,13 +471,57 @@ function getWebpackResolver(resolverFactory, implementation, includePaths = [])
   };
 }
 const MATCH_CSS = /\.css$/i;
-function getModernWebpackImporter() {
+function getModernWebpackImporter(loaderContext, implementation, loadPaths) {
+  const resolve = getWebpackResolver(loaderContext.getResolve, implementation, loadPaths);
   return {
-    async canonicalize() {
-      return null;
+    async canonicalize(originalUrl, context) {
+      const {
+        fromImport
+      } = context;
+      const prev = context.containingUrl ? _url.default.fileURLToPath(context.containingUrl.toString()) : loaderContext.resourcePath;
+      let result;
+      try {
+        result = await resolve(prev, originalUrl, fromImport);
+      } catch (err) {
+        // If no stylesheets are found, the importer should return null.
+        return null;
+      }
+      loaderContext.addDependency(_path.default.normalize(result));
+      return _url.default.pathToFileURL(result);
     },
-    load() {
-      // TODO implement
+    async load(canonicalUrl) {
+      const ext = _path.default.extname(canonicalUrl.pathname);
+      let syntax;
+      if (ext && ext.toLowerCase() === ".scss") {
+        syntax = "scss";
+      } else if (ext && ext.toLowerCase() === ".sass") {
+        syntax = "indented";
+      } else if (ext && ext.toLowerCase() === ".css") {
+        syntax = "css";
+      } else {
+        // Fallback to default value
+        syntax = "scss";
+      }
+      try {
+        const contents = await new Promise((resolve, reject) => {
+          // Old version of `enhanced-resolve` supports only path as a string
+          // TODO simplify in the next major release and pass URL
+          const canonicalPath = _url.default.fileURLToPath(canonicalUrl);
+          loaderContext.fs.readFile(canonicalPath, "utf8", (err, content) => {
+            if (err) {
+              reject(err);
+              return;
+            }
+            resolve(content);
+          });
+        });
+        return {
+          contents,
+          syntax
+        };
+      } catch (err) {
+        return null;
+      }
     }
   };
 }
@@ -497,15 +551,17 @@ function getWebpackImporter(loaderContext, implementation, includePaths) {
   };
 }
 let nodeSassJobQueue = null;
+const sassModernCompilers = new WeakMap();
 
 /**
  * Verifies that the implementation and version of Sass is supported by this loader.
  *
+ * @param {Object} loaderContext
  * @param {Object} implementation
  * @param {Object} options
  * @returns {Function}
  */
-function getCompileFn(implementation, options) {
+function getCompileFn(loaderContext, implementation, options) {
   const isNewSass = implementation.info.includes("dart-sass") || implementation.info.includes("sass-embedded");
   if (isNewSass) {
     if (options.api === "modern") {
@@ -517,6 +573,37 @@ function getCompileFn(implementation, options) {
         return implementation.compileStringAsync(data, rest);
       };
     }
+    if (options.api === "modern-compiler") {
+      return async sassOptions => {
+        // eslint-disable-next-line no-underscore-dangle
+        const webpackCompiler = loaderContext._compiler;
+        const {
+          data,
+          ...rest
+        } = sassOptions;
+
+        // Some people can run the loader in a multi-threading way;
+        // there is no webpack compiler object in such case.
+        if (webpackCompiler) {
+          if (!sassModernCompilers.has(implementation)) {
+            // Create a long-running compiler process that can be reused
+            // for compiling individual files.
+            const compiler = await implementation.initAsyncCompiler();
+
+            // Check again because awaiting the initialization function
+            // introduces a race condition.
+            if (!sassModernCompilers.has(webpackCompiler)) {
+              sassModernCompilers.set(webpackCompiler, compiler);
+              webpackCompiler.hooks.shutdown.tap("sass-loader", () => {
+                compiler.dispose();
+              });
+            }
+          }
+          return sassModernCompilers.get(webpackCompiler).compileStringAsync(data, rest);
+        }
+        return implementation.compileStringAsync(data, rest);
+      };
+    }
     return sassOptions => new Promise((resolve, reject) => {
       implementation.render(sassOptions, (error, result) => {
         if (error) {
@@ -527,7 +614,7 @@ function getCompileFn(implementation, options) {
       });
     });
   }
-  if (options.api === "modern") {
+  if (options.api === "modern" || options.api === "modern-compiler") {
     throw new Error("Modern API is not supported for 'node-sass'");
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sass-loader",
-  "version": "14.1.0",
+  "version": "14.2.0",
   "description": "Sass loader for webpack",
   "license": "MIT",
   "repository": "webpack-contrib/sass-loader",
@@ -35,7 +35,7 @@
     "test:coverage": "npm run test:only -- --collectCoverageFrom=\"src/**/*.js\" --coverage",
     "pretest": "npm run lint",
     "test": "npm run test:coverage",
-    "prepare": "husky install && npm run build",
+    "prepare": "husky && npm run build",
     "release": "standard-version"
   },
   "files": [
@@ -70,8 +70,8 @@
   },
   "devDependencies": {
     "@babel/cli": "^7.23.4",
-    "@babel/core": "^7.23.7",
-    "@babel/preset-env": "^7.23.8",
+    "@babel/core": "^7.24.0",
+    "@babel/preset-env": "^7.24.0",
     "@commitlint/cli": "^18.4.4",
     "@commitlint/config-conventional": "^18.4.4",
     "@webpack-contrib/eslint-config-webpack": "^3.0.0",
@@ -80,32 +80,34 @@
     "bootstrap-v4": "npm:bootstrap@^4.5.3",
     "bootstrap-v5": "npm:bootstrap@^5.0.1",
     "cross-env": "^7.0.3",
-    "cspell": "^8.3.2",
+    "cspell": "^8.6.0",
     "css-loader": "^6.9.0",
     "del": "^6.1.1",
     "del-cli": "^5.1.0",
-    "enhanced-resolve": "^5.15.0",
-    "eslint": "^8.46.0",
+    "enhanced-resolve": "^5.15.1",
+    "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.28.0",
     "file-loader": "^6.2.0",
     "foundation-sites": "^6.7.5",
-    "husky": "^8.0.3",
+    "husky": "^9.0.11",
     "jest": "^29.6.2",
     "jest-environment-node-single-context": "^29.1.0",
     "lint-staged": "^15.2.0",
     "material-components-web": "^9.0.0",
-    "memfs": "^4.6.0",
+    "memfs": "^4.7.7",
     "node-sass": "^9.0.0",
     "node-sass-glob-importer": "^5.3.2",
     "npm-run-all": "^4.1.5",
     "prettier": "^3.2.2",
-    "sass": "^1.69.7",
-    "sass-embedded": "^1.69.7",
+    "sass": "^1.71.1",
+    "sass-embedded": "^1.71.1",
     "semver": "^7.5.4",
     "standard-version": "^9.3.1",
     "style-loader": "^3.3.4",
-    "webpack": "^5.88.2"
+    "webpack": "^5.88.2",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^5.0.4"
   },
   "keywords": [
     "sass",