Strange issue relating to option escaping & undefined input

[RDIL]

css-minimizer-webpack-plugin/src/minify.js

Line 68 in 53cba69

)(exports, require, module, __filename, __dirname);

⬆️ That code causes a strange error within a project I am currently working on:

✖ Client
  Compiled with some errors in 1.28m

● Server █████████████████████████ building (64%) 1/1 entries 2744/2744 dependencies 932/932 modules 0 active 

{
  errors: [
    {
      message: 'assets/css/styles.31e70bd7.css from Css Minimizer\n' +
        'ReferenceError: initializer is not defined\n' +
        '    at creator (eval at transform (/workspace/docusaurus/node_modules/css-minimizer-webpack-plugin/dist/minify.js:62:13), <anonymous>:5:23)\n' +
        '    at initializePlugin (/workspace/docusaurus/node_modules/cssnano/dist/index.js:31:36)\n' +
        '    at processTicksAndRejections (internal/process/task_queues.js:93:5)'
    }
  ],
}
Client bundle compiled with errors therefore further build is impossible.

Interestingly enough, applying the following patch to this plugin fixes this error, but causes others.

diff --git a/node_modules/css-minimizer-webpack-plugin/dist/minify.js b/node_modules/css-minimizer-webpack-plugin/dist/minify.js
index 69ce92f..c189b98 100644
--- a/node_modules/css-minimizer-webpack-plugin/dist/minify.js
+++ b/node_modules/css-minimizer-webpack-plugin/dist/minify.js
@@ -59,7 +59,7 @@ async function transform(options) {
   // 'use strict' => this === undefined (Clean Scope)
   // Safer for possible security issues, albeit not critical at all here
   // eslint-disable-next-line no-new-func, no-param-reassign
-  options = new Function('exports', 'require', 'module', '__filename', '__dirname', `'use strict'\nreturn ${options}`)(exports, require, module, __filename, __dirname);
+  // options = new Function('exports', 'require', 'module', '__filename', '__dirname', `'use strict'\nreturn ${options}`)(exports, require, module, __filename, __dirname);
   const result = await minify(options);
 
   if (result.error) {

New errors:

{
  errors: [
    {
      message: 'assets/css/styles.d52d4cdd.css from Css Minimizer\n' +
        'Error: PostCSS received undefined instead of CSS string\n' +
        '    at new Input (/workspace/docusaurus/node_modules/postcss/lib/input.js:38:13)\n' +
        '    at parse (/workspace/docusaurus/node_modules/postcss/lib/parse.js:13:15)\n' +
        '    at new LazyResult (/workspace/docusaurus/node_modules/postcss/lib/lazy-result.js:64:16)\n' +
        '    at Processor.<anonymous> (/workspace/docusaurus/node_modules/postcss/lib/processor.js:142:12)\n' +
        '    at Processor.process (/workspace/docusaurus/node_modules/postcss/lib/processor.js:121:23)\n' +
        '    at Function.creator.process (/workspace/docusaurus/node_modules/postcss/lib/postcss.js:148:43)\n' +
        '    at minify (/workspace/docusaurus/node_modules/css-minimizer-webpack-plugin/dist/minify.js:50:32)\n' +
        '    at Object.transform (/workspace/docusaurus/node_modules/css-minimizer-webpack-plugin/dist/minify.js:63:24)\n' +
        '    at execFunction (/workspace/docusaurus/node_modules/css-minimizer-webpack-plugin/node_modules/jest-worker/build/workers/processChild.js:145:17)\n' +
        '    at execHelper (/workspace/docusaurus/node_modules/css-minimizer-webpack-plugin/node_modules/jest-worker/build/workers/processChild.js:124:5)'
    },
    {
      message: 'assets/css/styles.d52d4cdd.css from Css Minimizer\n' +
        'Error: PostCSS received undefined instead of CSS string\n' +
        '    at new Input (/workspace/docusaurus/node_modules/postcss/lib/input.js:38:13)\n' +
        '    at parse (/workspace/docusaurus/node_modules/postcss/lib/parse.js:13:15)\n' +
        '    at new LazyResult (/workspace/docusaurus/node_modules/postcss/lib/lazy-result.js:64:16)\n' +
        '    at Processor.<anonymous> (/workspace/docusaurus/node_modules/postcss/lib/processor.js:142:12)\n' +
        '    at Processor.process (/workspace/docusaurus/node_modules/postcss/lib/processor.js:121:23)\n' +
        '    at Function.creator.process (/workspace/docusaurus/node_modules/postcss/lib/postcss.js:148:43)\n' +
        '    at minify (/workspace/docusaurus/node_modules/css-minimizer-webpack-plugin/dist/minify.js:50:32)\n' +
        '    at Object.transform (/workspace/docusaurus/node_modules/css-minimizer-webpack-plugin/dist/minify.js:63:24)\n' +
        '    at execFunction (/workspace/docusaurus/node_modules/css-minimizer-webpack-plugin/node_modules/jest-worker/build/workers/processChild.js:145:17)\n' +
        '    at execHelper (/workspace/docusaurus/node_modules/css-minimizer-webpack-plugin/node_modules/jest-worker/build/workers/processChild.js:124:5)'
    },
    {
      message: 'assets/css/styles.06531b13.css from Css Minimizer\n' +
        'Error: PostCSS received undefined instead of CSS string\n' +
        '    at new Input (/workspace/docusaurus/node_modules/postcss/lib/input.js:38:13)\n' +
        '    at parse (/workspace/docusaurus/node_modules/postcss/lib/parse.js:13:15)\n' +
        '    at new LazyResult (/workspace/docusaurus/node_modules/postcss/lib/lazy-result.js:64:16)\n' +
        '    at Processor.<anonymous> (/workspace/docusaurus/node_modules/postcss/lib/processor.js:142:12)\n' +
        '    at Processor.process (/workspace/docusaurus/node_modules/postcss/lib/processor.js:121:23)\n' +
        '    at Function.creator.process (/workspace/docusaurus/node_modules/postcss/lib/postcss.js:148:43)\n' +
        '    at minify (/workspace/docusaurus/node_modules/css-minimizer-webpack-plugin/dist/minify.js:50:32)\n' +
        '    at Object.transform (/workspace/docusaurus/node_modules/css-minimizer-webpack-plugin/dist/minify.js:63:24)\n' +
        '    at execFunction (/workspace/docusaurus/node_modules/css-minimizer-webpack-plugin/node_modules/jest-worker/build/workers/processChild.js:145:17)\n' +
        '    at execHelper (/workspace/docusaurus/node_modules/css-minimizer-webpack-plugin/node_modules/jest-worker/build/workers/processChild.js:124:5)'
    },
    {
      message: 'assets/css/styles.06531b13.css from Css Minimizer\n' +
        'Error: PostCSS received undefined instead of CSS string\n' +
        '    at new Input (/workspace/docusaurus/node_modules/postcss/lib/input.js:38:13)\n' +
        '    at parse (/workspace/docusaurus/node_modules/postcss/lib/parse.js:13:15)\n' +
        '    at new LazyResult (/workspace/docusaurus/node_modules/postcss/lib/lazy-result.js:64:16)\n' +
        '    at Processor.<anonymous> (/workspace/docusaurus/node_modules/postcss/lib/processor.js:142:12)\n' +
        '    at Processor.process (/workspace/docusaurus/node_modules/postcss/lib/processor.js:121:23)\n' +
        '    at Function.creator.process (/workspace/docusaurus/node_modules/postcss/lib/postcss.js:148:43)\n' +
        '    at minify (/workspace/docusaurus/node_modules/css-minimizer-webpack-plugin/dist/minify.js:50:32)\n' +
        '    at Object.transform (/workspace/docusaurus/node_modules/css-minimizer-webpack-plugin/dist/minify.js:63:24)\n' +
        '    at execFunction (/workspace/docusaurus/node_modules/css-minimizer-webpack-plugin/node_modules/jest-worker/build/workers/processChild.js:145:17)\n' +
        '    at execHelper (/workspace/docusaurus/node_modules/css-minimizer-webpack-plugin/node_modules/jest-worker/build/workers/processChild.js:124:5)'
    }
  ]
}
Client bundle compiled with errors therefore further build is impossible.

Thanks in advance for any help!!

Relevant config:

new CssMinimizerPlugin({
      minimizerOptions: {
        preset: CssNanoPreset,
      }
    }),
    new CssMinimizerPlugin({
      minimizerOptions: {
        cssProcessor: CleanCss,
      }
    }),

CssNanoPreset is @docusaurus/cssnano-preset, CleanCSS is clean-css.

[alexander-akait]

Please create reproducible test repo

[RDIL]

facebook/docusaurus#4089 can be used to reproduce it, I'll try to spin up a test repo in a few minutes though.

[RDIL]

@alexander-akait https://github.com/rdil/webpack-debugging full repro with a modified version of create-react-app

[alexander-akait]

@RDIL We don't have minimizerOptions: { cssProcessor: CleanCss } option, if you want to use clean-css, please look at here https://github.com/webpack-contrib/css-minimizer-webpack-plugin#using-custom-minifier-clean-css

[RDIL]

This fixed it, thanks!!!