cssnano options not correct pass to cssnano

[zcs19871221]

when set in webpack in optimization like this:

new OptimizeCSSAssetsPlugin({ cssProcessorOptions: { calc: false } }),
i found the option not pass,in the cssnano module quickstart.js file, it works this:
const cssnanoOpts = { preset: [ 'default', { calc: false, } ] }; cssnano.process(css, postcssOpts, cssnanoOpts).then(result => { console.log(result.css); });
but in this plugin, use this: return this.options.cssProcessor.process(css.source, processOptions) maybe it is a version problem, but after i change source code it do well.

my cssnano version is 4.0.2, optimize-css-assets-webpack-plugin version is 5.0.0. hope to solve it . thanks.

[kidBrazil]

I am also having this issue when trying to pass arguments to cssnano. I am trying to get the reduceIndents flag set to false so it will stop mangling my animations.

[blieque]

I've spend most of today running webpack with the Chrome DevTools to track this down. If you need a quick fix in the meantime:

1. Open node_modules/optimize-css-assets-webpack-plugin/src/index.js in your project root.
2. Go to line 62: .cssProcessor.process(css.source, processOptions).
3. Pass processOptions a second time as a third argument to Plugin.process: .cssProcessor.process(css.source, processOptions, processOptions).

It's not tidy, but it should let you enable Autoprefixer and the other "advanced" cssnano optimisations.

In webpack.prod.config.js:

  optimization: {
    minimizer: [
      new UglifyJsPlugin({ sourceMap: true }),
      new OptimizeCSSAssetsPlugin({
        cssProcessorOptions: {
          map: true,
          preset: ['advanced', {
            autoprefixer: { add: true },
          }],
        },
      }),
    ],
  },

[zcs19871221]

thanks，i have change the source code. but i have to maintain a fork package,hope it work at next release.

[amatiasq]

Having this issue too, I was tracking the option object which cssnano didn't receive. Found the same situation.

[kingback]

Same issue, I have tracked the problem at postcss/postcss.es6#L125

creator.process = function (css, processOpts, pluginOpts) {
  return postcss([creator(pluginOpts)]).process(css, processOpts)
}

and optimize-css-assets-webpack-plugin/index.js#L62

this.options.cssProcessor.process(css.source, processOptions)

so the problem is, postcss needs a pluginOpts to config plugin, but optimize-css-assets-webpack-plugin did not apply this option.

@zcs19871221 My temporary hack is rewrite the cssnano.process:

const cssnano = require('cssnano');
const cssnanoProcess = cssnano.process;
cssnano.process = function(source, processOpts, pluginOpts) {
  return cssnanoProcess.call(this, source, processOpts, Object.assign(pluginOpts || {}, {
    preset: [ 'default', { calc: false }
  }));
}

[blieque]

Yes, it seems like optimize-css-assets-webpack-plugin follows this PostCSS documentation, but the process() function it's using is in fact the one briefly documented here. My uneducated guess is that the process() function expects two options objects covering different subjects, whereas the plugin is passing a single object that contains both those objects' required properties.

[NMFR]

#73 solved this.

If not tell me so i can reopen the issue.