From bb68c68fc009d87fdba27216e95c4193c9fa2bdc Mon Sep 17 00:00:00 2001 From: "alexander.akait" Date: Sat, 10 Jun 2023 02:08:45 +0300 Subject: [PATCH 1/2] fix(perf): avoid using `klona` for postcss options --- package.json | 1 - src/index.js | 10 +++++----- src/utils.js | 22 +++++++++++----------- 3 files changed, 16 insertions(+), 17 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..dd35fce0 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( @@ -347,9 +344,9 @@ async function getPostcssOptions( } // No need them for processOptions - delete processOptionsFromConfig.plugins; + const { plugins: __plugins, ...optionsFromConfig } = processOptionsFromConfig; - const processOptionsFromOptions = klona(normalizedPostcssOptions); + const processOptionsFromOptions = { ...normalizedPostcssOptions }; if (processOptionsFromOptions.from) { processOptionsFromOptions.from = path.resolve( @@ -366,15 +363,18 @@ async function getPostcssOptions( } // No need them for processOptions - delete processOptionsFromOptions.config; - delete processOptionsFromOptions.plugins; + const { + config: _config, + plugins: _plugins, + ...optionsFromOptions + } = processOptionsFromOptions; const processOptions = { from: file, to: file, map: false, - ...processOptionsFromConfig, - ...processOptionsFromOptions, + ...optionsFromConfig, + ...optionsFromOptions, }; if (typeof processOptions.parser === "string") { From 71ec9bea4885696d8417bb25f2134278aaa85dfd Mon Sep 17 00:00:00 2001 From: "alexander.akait" Date: Sat, 10 Jun 2023 02:30:43 +0300 Subject: [PATCH 2/2] test: added --- src/utils.js | 6 +-- .../__snapshots__/postcssOptions.test.js.snap | 14 +++++++ test/postcssOptions.test.js | 39 +++++++++++++++++++ 3 files changed, 55 insertions(+), 4 deletions(-) diff --git a/src/utils.js b/src/utils.js index dd35fce0..db3dfdc5 100644 --- a/src/utils.js +++ b/src/utils.js @@ -343,9 +343,6 @@ async function getPostcssOptions( ); } - // No need them for processOptions - const { plugins: __plugins, ...optionsFromConfig } = processOptionsFromConfig; - const processOptionsFromOptions = { ...normalizedPostcssOptions }; if (processOptionsFromOptions.from) { @@ -362,7 +359,8 @@ async function getPostcssOptions( ); } - // No need them for processOptions + // No need `plugins` and `config` for processOptions + const { plugins: __plugins, ...optionsFromConfig } = processOptionsFromConfig; const { config: _config, plugins: _plugins, 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");