.github/ISSUE_TEMPLATE/BUG.md

@@ -8,10 +8,9 @@ about: Something went awry and you'd like to tell us about it.
 
 ### Bug report
 
-<!-- Please ask questions on discussions, StackOverflow or the webpack Gitter. -->
+<!-- Please ask questions on discussions or StackOverflow. -->
 <!-- https://github.com/webpack/webpack/discussions -->
 <!-- https://stackoverflow.com/questions/ask?tags=webpack -->
-<!-- https://gitter.im/webpack/webpack -->
 <!-- Issues which contain questions or support requests will be closed. -->
 
 ### Actual Behavior

.github/ISSUE_TEMPLATE/DOCS.md

@@ -20,7 +20,6 @@ Documentation Is:
 <!-- Please don't delete this template otherwise your issue will be closed immediately -->
 <!-- https://github.com/webpack/webpack/discussions -->
 <!-- https://stackoverflow.com/questions/ask?tags=webpack -->
-<!-- https://gitter.im/webpack/webpack -->
 <!-- Issues which contain questions or support requests will be closed. -->
 
 ### Your Proposal for Changes

.github/ISSUE_TEMPLATE/FEATURE.md

@@ -8,10 +8,9 @@ about: Suggest an idea for this project
 
 ### Feature Proposal
 
-<!-- Please ask questions on discussions, StackOverflow or the webpack Gitter. -->
+<!-- Please ask questions on discussions or StackOverflow. -->
 <!-- https://github.com/webpack/webpack/discussions -->
 <!-- https://stackoverflow.com/questions/ask?tags=webpack -->
-<!-- https://gitter.im/webpack/webpack -->
 <!-- Issues which contain questions or support requests will be closed. -->
 
 ### Feature Use Case

.github/ISSUE_TEMPLATE/MODIFICATION.md

@@ -8,10 +8,9 @@ about: Would you like something work differently? Have an alternative approach?
 
 ### Modification Proposal
 
-<!-- Please ask questions on discussions, StackOverflow or the webpack Gitter. -->
+<!-- Please ask questions on discussions or StackOverflow. -->
 <!-- https://github.com/webpack/webpack/discussions -->
 <!-- https://stackoverflow.com/questions/ask?tags=webpack -->
-<!-- https://gitter.im/webpack/webpack -->
 <!-- Issues which contain questions or support requests will be closed. -->
 
 ### Expected Behavior / Situation

.github/ISSUE_TEMPLATE/SUPPORT.md

@@ -4,5 +4,4 @@ about: 👉🏽 Need support, help, or advice? Don't open an issue! Head to http
 ---
 
 Hey there! If you need support, help, or advice then this is not the place to ask.
-Please visit [Discussions](https://github.com/webpack/webpack/discussions), [StackOverflow](https://stackoverflow.com/questions/tagged/webpack)
-or [the Webpack Gitter](https://gitter.im/webpack/webpack) instead.
+Please visit [GitHub Discussions](https://github.com/webpack/webpack/discussions) or [StackOverflow](https://stackoverflow.com/questions/tagged/webpack) instead.

CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [13.3.2](https://github.com/webpack-contrib/sass-loader/compare/v13.3.1...v13.3.2) (2023-06-09)
+
+
+### Bug Fixes
+
+* **perf:** avoid using `klona` for `sass` options ([#1145](https://github.com/webpack-contrib/sass-loader/issues/1145)) ([9e87b6b](https://github.com/webpack-contrib/sass-loader/commit/9e87b6b103c4f8a32f89235f97f006c3a1115355))
+
 ### [13.3.1](https://github.com/webpack-contrib/sass-loader/compare/v13.3.0...v13.3.1) (2023-05-28)
 
 

README.md

@@ -98,6 +98,10 @@ module.exports = {
 
 Finally run `webpack` via your preferred method.
 
+### The `outputStyle` (old API) and `style` (new API) options in `production` mode
+
+For `production` mode, the `outputStyle` (old API) and `style` (new API) options default to `compressed` unless otherwise specified in `sassOptions`.
+
 ### Resolving `import` at-rules
 
 Webpack provides an [advanced mechanism to resolve files](https://webpack.js.org/concepts/module-resolution/).

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sass-loader",
-  "version": "13.3.1",
+  "version": "13.3.2",
   "description": "Sass loader for webpack",
   "license": "MIT",
   "repository": "webpack-contrib/sass-loader",
@@ -63,7 +63,6 @@
     }
   },
   "dependencies": {
-    "klona": "^2.0.6",
     "neo-async": "^2.6.2"
   },
   "devDependencies": {

src/utils.js

@@ -1,9 +1,6 @@
 import url from "url";
 import path from "path";
 
-import { klona } from "klona/full";
-import async from "neo-async";
-
 function getDefaultSassImplementation() {
   let sassImplPkg = "sass";
 
@@ -112,32 +109,29 @@ async function getSassOptions(
   implementation,
   useSourceMap
 ) {
-  const options = klona(
-    loaderOptions.sassOptions
-      ? typeof loaderOptions.sassOptions === "function"
-        ? loaderOptions.sassOptions(loaderContext) || {}
-        : loaderOptions.sassOptions
-      : {}
-  );
-
-  const isDartSass = implementation.info.includes("dart-sass");
-  const isModernAPI = loaderOptions.api === "modern";
-
-  options.data = loaderOptions.additionalData
-    ? typeof loaderOptions.additionalData === "function"
-      ? await loaderOptions.additionalData(content, loaderContext)
-      : `${loaderOptions.additionalData}\n${content}`
-    : content;
+  const options = loaderOptions.sassOptions
+    ? typeof loaderOptions.sassOptions === "function"
+      ? loaderOptions.sassOptions(loaderContext) || {}
+      : loaderOptions.sassOptions
+    : {};
+  const sassOptions = {
+    ...options,
+    data: loaderOptions.additionalData
+      ? typeof loaderOptions.additionalData === "function"
+        ? await loaderOptions.additionalData(content, loaderContext)
+        : `${loaderOptions.additionalData}\n${content}`
+      : content,
+  };
 
-  if (!options.logger) {
+  if (!sassOptions.logger) {
     const needEmitWarning = loaderOptions.warnRuleAsWarning !== false;
     const logger = loaderContext.getLogger("sass-loader");
     const formatSpan = (span) =>
       `${span.url || "-"}:${span.start.line}:${span.start.column}: `;
     const formatDebugSpan = (span) =>
       `[debug:${span.start.line}:${span.start.column}] `;
 
-    options.logger = {
+    sassOptions.logger = {
       debug(message, loggerOptions) {
         let builtMessage = "";
 
@@ -180,44 +174,47 @@ async function getSassOptions(
     };
   }
 
+  const isModernAPI = loaderOptions.api === "modern";
   const { resourcePath } = loaderContext;
 
   if (isModernAPI) {
-    options.url = url.pathToFileURL(resourcePath);
+    sassOptions.url = url.pathToFileURL(resourcePath);
 
     // opt.outputStyle
-    if (!options.style && isProductionLikeMode(loaderContext)) {
-      options.style = "compressed";
+    if (!sassOptions.style && isProductionLikeMode(loaderContext)) {
+      sassOptions.style = "compressed";
     }
 
     if (useSourceMap) {
-      options.sourceMap = true;
+      sassOptions.sourceMap = true;
     }
 
     // If we are compiling sass and indentedSyntax isn't set, automatically set it.
-    if (typeof options.syntax === "undefined") {
+    if (typeof sassOptions.syntax === "undefined") {
       const ext = path.extname(resourcePath);
 
       if (ext && ext.toLowerCase() === ".scss") {
-        options.syntax = "scss";
+        sassOptions.syntax = "scss";
       } else if (ext && ext.toLowerCase() === ".sass") {
-        options.syntax = "indented";
+        sassOptions.syntax = "indented";
       } else if (ext && ext.toLowerCase() === ".css") {
-        options.syntax = "css";
+        sassOptions.syntax = "css";
       }
     }
 
-    options.importers = options.importers
-      ? Array.isArray(options.importers)
-        ? options.importers
-        : [options.importers]
+    sassOptions.importers = sassOptions.importers
+      ? Array.isArray(sassOptions.importers)
+        ? sassOptions.importers.slice()
+        : [sassOptions.importers]
       : [];
   } else {
-    options.file = resourcePath;
+    sassOptions.file = resourcePath;
+
+    const isDartSass = implementation.info.includes("dart-sass");
 
     if (isDartSass && isSupportedFibers()) {
       const shouldTryToResolveFibers =
-        !options.fiber && options.fiber !== false;
+        !sassOptions.fiber && sassOptions.fiber !== false;
 
       if (shouldTryToResolveFibers) {
         let fibers;
@@ -230,20 +227,20 @@ async function getSassOptions(
 
         if (fibers) {
           // eslint-disable-next-line global-require, import/no-dynamic-require
-          options.fiber = require(fibers);
+          sassOptions.fiber = require(fibers);
         }
-      } else if (options.fiber === false) {
+      } else if (sassOptions.fiber === false) {
         // Don't pass the `fiber` option for `sass` (`Dart Sass`)
-        delete options.fiber;
+        delete sassOptions.fiber;
       }
     } else {
       // Don't pass the `fiber` option for `node-sass`
-      delete options.fiber;
+      delete sassOptions.fiber;
     }
 
     // opt.outputStyle
-    if (!options.outputStyle && isProductionLikeMode(loaderContext)) {
-      options.outputStyle = "compressed";
+    if (!sassOptions.outputStyle && isProductionLikeMode(loaderContext)) {
+      sassOptions.outputStyle = "compressed";
     }
 
     if (useSourceMap) {
@@ -253,11 +250,14 @@ async function getSassOptions(
       // But since we're using the data option, the source map will not actually be written, but
       // all paths in sourceMap.sources will be relative to that path.
       // Pretty complicated... :(
-      options.sourceMap = true;
-      options.outFile = path.join(loaderContext.rootContext, "style.css.map");
-      options.sourceMapContents = true;
-      options.omitSourceMapUrl = true;
-      options.sourceMapEmbed = false;
+      sassOptions.sourceMap = true;
+      sassOptions.outFile = path.join(
+        loaderContext.rootContext,
+        "style.css.map"
+      );
+      sassOptions.sourceMapContents = true;
+      sassOptions.omitSourceMapUrl = true;
+      sassOptions.sourceMapEmbed = false;
     }
 
     const ext = path.extname(resourcePath);
@@ -266,31 +266,32 @@ async function getSassOptions(
     if (
       ext &&
       ext.toLowerCase() === ".sass" &&
-      typeof options.indentedSyntax === "undefined"
+      typeof sassOptions.indentedSyntax === "undefined"
     ) {
-      options.indentedSyntax = true;
+      sassOptions.indentedSyntax = true;
     } else {
-      options.indentedSyntax = Boolean(options.indentedSyntax);
+      sassOptions.indentedSyntax = Boolean(sassOptions.indentedSyntax);
     }
 
     // Allow passing custom importers to `sass`/`node-sass`. Accepts `Function` or an array of `Function`s.
-    options.importer = options.importer
+    sassOptions.importer = sassOptions.importer
       ? proxyCustomImporters(
-          Array.isArray(options.importer)
-            ? options.importer
-            : [options.importer],
+          Array.isArray(sassOptions.importer)
+            ? sassOptions.importer.slice()
+            : [sassOptions.importer],
           loaderContext
         )
       : [];
 
-    options.includePaths = []
+    sassOptions.includePaths = []
       .concat(process.cwd())
       .concat(
         // We use `includePaths` in context for resolver, so it should be always absolute
-        (options.includePaths || []).map((includePath) =>
-          path.isAbsolute(includePath)
-            ? includePath
-            : path.join(process.cwd(), includePath)
+        (sassOptions.includePaths ? sassOptions.includePaths.slice() : []).map(
+          (includePath) =>
+            path.isAbsolute(includePath)
+              ? includePath
+              : path.join(process.cwd(), includePath)
         )
       )
       .concat(
@@ -301,12 +302,12 @@ async function getSassOptions(
           : []
       );
 
-    if (typeof options.charset === "undefined") {
-      options.charset = true;
+    if (typeof sassOptions.charset === "undefined") {
+      sassOptions.charset = true;
     }
   }
 
-  return options;
+  return sassOptions;
 }
 
 const MODULE_REQUEST_REGEX = /^[^?]*~/;
@@ -703,6 +704,9 @@ function getCompileFn(implementation, options) {
   // We need to use a job queue to make sure that one thread is always available to the UV lib
   if (nodeSassJobQueue === null) {
     const threadPoolSize = Number(process.env.UV_THREADPOOL_SIZE || 4);
+    // Only used for `node-sass`, so let's load it lazily
+    // eslint-disable-next-line global-require
+    const async = require("neo-async");
 
     nodeSassJobQueue = async.queue(
       implementation.render.bind(implementation),