fix(perf): avoud using clona for stylus options (#394)

package.json

@@ -46,7 +46,6 @@
   },
   "dependencies": {
     "fast-glob": "^3.2.12",
-    "klona": "^2.0.6",
     "normalize-path": "^3.0.0"
   },
   "devDependencies": {

src/index.js

@@ -66,7 +66,7 @@ export default async function stylusLoader(source) {
   const useSourceMap =
     typeof options.sourceMap === "boolean" ? options.sourceMap : this.sourceMap;
 
-  if (stylusOptions.sourcemap || useSourceMap) {
+  if (useSourceMap || stylusOptions.sourcemap) {
     styl.set(
       "sourcemap",
       useSourceMap

src/utils.js

@@ -3,7 +3,6 @@ import path from "path";
 
 import { Parser, Compiler, Evaluator, nodes, utils } from "stylus";
 import DepsResolver from "stylus/lib/visitor/deps-resolver";
-import { klona } from "klona/full";
 import fastGlob from "fast-glob";
 import normalizePath from "normalize-path";
 
@@ -23,25 +22,26 @@ function isProductionLikeMode(loaderContext) {
 }
 
 function getStylusOptions(loaderContext, loaderOptions) {
-  const stylusOptions = klona(
+  const options =
     typeof loaderOptions.stylusOptions === "function"
       ? loaderOptions.stylusOptions(loaderContext) || {}
-      : loaderOptions.stylusOptions || {}
-  );
-
-  stylusOptions.filename = loaderContext.resourcePath;
-  stylusOptions.dest = path.dirname(loaderContext.resourcePath);
-
-  // Keep track of imported files (used by Stylus CLI watch mode)
-  // eslint-disable-next-line no-underscore-dangle
-  stylusOptions._imports = [];
+      : loaderOptions.stylusOptions || {};
+  const stylusOptions = {
+    filename: loaderContext.resourcePath,
+    dest: path.dirname(loaderContext.resourcePath),
+    ...options,
+    // Keep track of imported files (used by Stylus CLI watch mode)
+    // eslint-disable-next-line no-underscore-dangle
+    // Don't allow to override, because it is internally
+    _imports: [],
+  };
 
   // https://github.com/stylus/stylus/issues/2119
   stylusOptions.resolveURL =
     typeof stylusOptions.resolveURL === "boolean" && !stylusOptions.resolveURL
       ? false
       : typeof stylusOptions.resolveURL === "object"
-      ? stylusOptions.resolveURL
+      ? { ...stylusOptions.resolveURL }
       : { nocheck: true };
 
   if (
@@ -182,7 +182,7 @@ async function getDependencies(
   seen.add(filename);
 
   // See https://github.com/stylus/stylus/issues/2108
-  const newOptions = klona({ ...options, filename, cache: false });
+  const newOptions = { ...options, filename, cache: false };
   const parser = new Parser(code, newOptions);
 
   let ast;

test/__snapshots__/loader.test.js.snap

@@ -954,6 +954,22 @@ exports[`loader should work "use" option: errors 1`] = `[]`;
 
 exports[`loader should work "use" option: warnings 1`] = `[]`;
 
+exports[`loader should work and don't override loader options: css 1`] = `
+"body {
+  font: 12px Helvetica, Arial, sans-serif;
+}
+a.button {
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  border-radius: 5px;
+}
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImJhc2ljLnN0eWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBS0E7RUFDRSxNQUFtQixrQ0FBbkI7O0FBRUY7RUFQRSx1QkFBc0IsSUFBdEI7RUFDQSxvQkFBbUIsSUFBbkI7RUFDQSxlQUFjLElBQWQiLCJmaWxlIjoiYmFzaWMuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiYm9yZGVyLXJhZGl1cygpXG4gIC13ZWJraXQtYm9yZGVyLXJhZGl1cyBhcmd1bWVudHNcbiAgLW1vei1ib3JkZXItcmFkaXVzIGFyZ3VtZW50c1xuICBib3JkZXItcmFkaXVzIGFyZ3VtZW50c1xuXG5ib2R5XG4gIGZvbnQgMTJweCBIZWx2ZXRpY2EsIEFyaWFsLCBzYW5zLXNlcmlmXG5cbmEuYnV0dG9uXG4gIGJvcmRlci1yYWRpdXMgNXB4Il19 */"
+`;
+
+exports[`loader should work and don't override loader options: errors 1`] = `[]`;
+
+exports[`loader should work and don't override loader options: warnings 1`] = `[]`;
+
 exports[`loader should work and respect the "compress" option with the "false" value: css 1`] = `
 "body {
   font: 12px Helvetica, Arial, sans-serif;

test/__snapshots__/sourceMap-options.test.js.snap

@@ -289,3 +289,19 @@ a.button {
 exports[`"sourceMap" options should not generate source maps when value is "false": errors 1`] = `[]`;
 
 exports[`"sourceMap" options should not generate source maps when value is "false": warnings 1`] = `[]`;
+
+exports[`"sourceMap" options should work and allow to override source maps options: css 1`] = `
+"body {
+  font: 12px Helvetica, Arial, sans-serif;
+}
+a.button {
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  border-radius: 5px;
+}
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImJhc2ljLnN0eWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBS0E7RUFDRSxNQUFtQixrQ0FBbkI7O0FBRUY7RUFQRSx1QkFBc0IsSUFBdEI7RUFDQSxvQkFBbUIsSUFBbkI7RUFDQSxlQUFjLElBQWQiLCJmaWxlIjoiYmFzaWMuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiYm9yZGVyLXJhZGl1cygpXG4gIC13ZWJraXQtYm9yZGVyLXJhZGl1cyBhcmd1bWVudHNcbiAgLW1vei1ib3JkZXItcmFkaXVzIGFyZ3VtZW50c1xuICBib3JkZXItcmFkaXVzIGFyZ3VtZW50c1xuXG5ib2R5XG4gIGZvbnQgMTJweCBIZWx2ZXRpY2EsIEFyaWFsLCBzYW5zLXNlcmlmXG5cbmEuYnV0dG9uXG4gIGJvcmRlci1yYWRpdXMgNXB4Il19 */"
+`;
+
+exports[`"sourceMap" options should work and allow to override source maps options: errors 1`] = `[]`;
+
+exports[`"sourceMap" options should work and allow to override source maps options: warnings 1`] = `[]`;

test/loader.test.js

@@ -249,15 +249,15 @@ describe("loader", () => {
     const testId = "./shallow-deep-literal.styl";
     const compiler = getCompiler(testId, {
       stylusOptions: {
-        dest: "deep/deep-literal.css",
+        dest: path.resolve(__dirname, "fixtures/"),
       },
     });
     const stats = await compile(compiler);
     const codeFromBundle = getCodeFromBundle(stats, compiler);
     const codeFromStylus = await getCodeFromStylus(testId, {
       stylusOptions: {
         resolveURL: { nocheck: true },
-        dest: "deep/deep-literal.css",
+        dest: path.resolve(__dirname, "fixtures/"),
       },
     });
 
@@ -1792,4 +1792,41 @@ describe("loader", () => {
     expect(getWarnings(stats)).toMatchSnapshot("warnings");
     expect(getErrors(stats)).toMatchSnapshot("errors");
   });
+
+  it("should work and don't override loader options", async () => {
+    const testId = "./basic.styl";
+    const stylusOptions = {
+      compress: false,
+      resolveURL: {
+        nocheck: false,
+      },
+      sourcemap: {
+        comment: true,
+        inline: true,
+      },
+    };
+    const compiler = getCompiler(
+      testId,
+      { stylusOptions },
+      { mode: "production" }
+    );
+    const stats = await compile(compiler);
+    const codeFromBundle = getCodeFromBundle(stats, compiler);
+    const codeFromStylus = await getCodeFromStylus(testId, { stylusOptions });
+
+    expect(stylusOptions).toEqual({
+      compress: false,
+      resolveURL: {
+        nocheck: false,
+      },
+      sourcemap: {
+        comment: true,
+        inline: true,
+      },
+    });
+    expect(codeFromBundle.css).toBe(codeFromStylus.css);
+    expect(codeFromBundle.css).toMatchSnapshot("css");
+    expect(getWarnings(stats)).toMatchSnapshot("warnings");
+    expect(getErrors(stats)).toMatchSnapshot("errors");
+  });
 });

test/sourceMap-options.test.js

@@ -249,4 +249,23 @@ describe('"sourceMap" options', () => {
     expect(getWarnings(stats)).toMatchSnapshot("warnings");
     expect(getErrors(stats)).toMatchSnapshot("errors");
   });
+
+  it("should work and allow to override source maps options", async () => {
+    const testId = "./basic.styl";
+    const stylusOptions = {
+      sourcemap: {
+        comment: true,
+        inline: true,
+      },
+    };
+    const compiler = getCompiler(testId, { stylusOptions });
+    const stats = await compile(compiler);
+    const codeFromBundle = getCodeFromBundle(stats, compiler);
+    const codeFromStylus = await getCodeFromStylus(testId, { stylusOptions });
+
+    expect(codeFromBundle.css).toBe(codeFromStylus.css);
+    expect(codeFromBundle.css).toMatchSnapshot("css");
+    expect(getWarnings(stats)).toMatchSnapshot("warnings");
+    expect(getErrors(stats)).toMatchSnapshot("errors");
+  });
 });