From e754c3f8451a09ea633674af90fb3b6b1c073460 Mon Sep 17 00:00:00 2001 From: Alexander Akait <4567934+alexander-akait@users.noreply.github.com> Date: Sat, 10 Jun 2023 02:35:23 +0300 Subject: [PATCH] fix(perf): avoid using `klona` for postcss options (#658) --- package.json | 1 - src/index.js | 10 ++--- src/utils.js | 26 ++++++------- .../__snapshots__/postcssOptions.test.js.snap | 14 +++++++ test/postcssOptions.test.js | 39 +++++++++++++++++++ 5 files changed, 70 insertions(+), 20 deletions(-) diff --git a/package.json b/package.json index 8f5ddb58..a1ca956c 100644 --- 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 index 71ed8b1f..a0771805 100644 --- 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 index 01b53339..db3dfdc5 100644 --- 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 index 6a1d3cf6..dd6878b9 100644 --- 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 index 67d0af13..a64e03b2 100644 --- 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");