fix(perf): avoid using klona for postcss options (#658)

webpack-contrib · Jun 9, 2023 · e754c3f · e754c3f
1 parent 69446c3
commit e754c3f
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 20 deletions.
diff --git a/package.json b/package.json
@@ -47,7 +47,6 @@
   "dependencies": {
     "cosmiconfig": "^8.1.3",
     "jiti": "^1.18.2",
-    "klona": "^2.0.6",
     "semver": "^7.3.8"
   },
   "devDependencies": {

diff --git a/src/index.js b/src/index.js
@@ -75,17 +75,17 @@ export default async function loader(content, sourceMap, meta) {
     }
   }
 
-  const useSourceMap =
-    typeof options.sourceMap !== "undefined"
-      ? options.sourceMap
-      : this.sourceMap;
-
   const { plugins, processOptions } = await getPostcssOptions(
     this,
     loadedConfig,
     options.postcssOptions
   );
 
+  const useSourceMap =
+    typeof options.sourceMap !== "undefined"
+      ? options.sourceMap
+      : this.sourceMap;
+
   if (useSourceMap) {
     processOptions.map = {
       inline: false,

diff --git a/src/utils.js b/src/utils.js
@@ -2,7 +2,6 @@ import path from "path";
 import url from "url";
 import Module from "module";
 
-import { klona } from "klona/full";
 import { cosmiconfig, defaultLoaders } from "cosmiconfig";
 
 const parentModule = module;
@@ -185,11 +184,9 @@ async function loadConfig(loaderContext, config, postcssOptions) {
       options: postcssOptions || {},
     };
 
-    result.config = result.config(api);
+    return { ...result, config: result.config(api) };
   }
 
-  result = klona(result);
-
   return result;
 }
 
@@ -330,7 +327,7 @@ async function getPostcssOptions(
     loaderContext.emitError(error);
   }
 
-  const processOptionsFromConfig = loadedConfig.config || {};
+  const processOptionsFromConfig = { ...loadedConfig.config } || {};
 
   if (processOptionsFromConfig.from) {
     processOptionsFromConfig.from = path.resolve(
@@ -346,10 +343,7 @@ async function getPostcssOptions(
     );
   }
 
-  // No need them for processOptions
-  delete processOptionsFromConfig.plugins;
-
-  const processOptionsFromOptions = klona(normalizedPostcssOptions);
+  const processOptionsFromOptions = { ...normalizedPostcssOptions };
 
   if (processOptionsFromOptions.from) {
     processOptionsFromOptions.from = path.resolve(
@@ -365,16 +359,20 @@ async function getPostcssOptions(
     );
   }
 
-  // No need them for processOptions
-  delete processOptionsFromOptions.config;
-  delete processOptionsFromOptions.plugins;
+  // No need `plugins` and `config` for processOptions
+  const { plugins: __plugins, ...optionsFromConfig } = processOptionsFromConfig;
+  const {
+    config: _config,
+    plugins: _plugins,
+    ...optionsFromOptions
+  } = processOptionsFromOptions;
 
   const processOptions = {
     from: file,
     to: file,
     map: false,
-    ...processOptionsFromConfig,
-    ...processOptionsFromOptions,
+    ...optionsFromConfig,
+    ...optionsFromOptions,
   };
 
   if (typeof processOptions.parser === "string") {

diff --git a/test/__snapshots__/postcssOptions.test.js.snap b/test/__snapshots__/postcssOptions.test.js.snap
@@ -213,6 +213,20 @@ exports[`"postcssOptions" option should work "Function" value: errors 1`] = `[]`
 
 exports[`"postcssOptions" option should work "Function" value: warnings 1`] = `[]`;
 
+exports[`"postcssOptions" option should work and don't modify postcss options: css 1`] = `
+"a { color: black }
+
+.foo {
+  float: right;
+}
+
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImZyb20uY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLElBQUksYUFBYTs7QUFFakI7RUFDRSxZQUFZO0FBQ2QiLCJmaWxlIjoidG8uY3NzIiwic291cmNlc0NvbnRlbnQiOlsiYSB7IGNvbG9yOiBibGFjayB9XG5cbi5mb28ge1xuICBmbG9hdDogcmlnaHQ7XG59XG4iXX0= */"
+`;
+
+exports[`"postcssOptions" option should work and don't modify postcss options: errors 1`] = `[]`;
+
+exports[`"postcssOptions" option should work and don't modify postcss options: warnings 1`] = `[]`;
+
 exports[`"postcssOptions" option should work and provide API for the configuration: css 1`] = `
 "a {
   color: black;

diff --git a/test/postcssOptions.test.js b/test/postcssOptions.test.js
@@ -841,9 +841,48 @@ describe('"postcssOptions" option', () => {
       },
     });
     const stats = await compile(compiler);
+    const codeFromBundle = getCodeFromBundle("style.css", stats);
+
+    expect(codeFromBundle.css).toMatchSnapshot("css");
+    expect(getWarnings(stats)).toMatchSnapshot("warnings");
+    expect(getErrors(stats)).toMatchSnapshot("errors");
+  });
 
+  it("should work and don't modify postcss options", async () => {
+    const postcssOptions = {
+      config: path.resolve(__dirname, "./fixtures/css/plugins.config.js"),
+      from: "from.css",
+      map: {
+        inline: true,
+      },
+      parser: "postcss/lib/parse",
+      stringifier: "postcss/lib/stringify",
+      to: "to.css",
+      plugins: [require.resolve("./fixtures/plugin/new-api.plugin")],
+    };
+    const compiler = getCompiler(
+      "./config-scope/css/index.js",
+      {
+        postcssOptions,
+      },
+      {
+        devtool: "source-map",
+      }
+    );
+    const stats = await compile(compiler);
     const codeFromBundle = getCodeFromBundle("style.css", stats);
 
+    expect(postcssOptions).toEqual({
+      config: path.resolve(__dirname, "./fixtures/css/plugins.config.js"),
+      from: "from.css",
+      map: {
+        inline: true,
+      },
+      parser: "postcss/lib/parse",
+      stringifier: "postcss/lib/stringify",
+      to: "to.css",
+      plugins: [require.resolve("./fixtures/plugin/new-api.plugin")],
+    });
     expect(codeFromBundle.css).toMatchSnapshot("css");
     expect(getWarnings(stats)).toMatchSnapshot("warnings");
     expect(getErrors(stats)).toMatchSnapshot("errors");