Add process method (compatibility with optimize-css-assets-webpack-plugin)

[strarsis]

This PR adds the process method to clean-css so
optimize-css-assets-webpack-plugin can use it as css processor.

Closes issue #943.

[jakubpawlowicz]

@strarsis any updates?

[strarsis]

@jakubpawlowicz: Yes, this can be merged now which
adds compatibility for optimize-css-assets-webpack-plugin.

[jakubpawlowicz]

I meant do you have any comments to my PR review above? ^

[strarsis]

@jakubpawlowicz: I don't see any PR reviews / file change comments.

[jakubpawlowicz]

Can it somehow use our existing promise interface - https://github.com/jakubpawlowicz/clean-css#promise-interface ?

[strarsis]

Yes, the code is nicer using it.

[jakubpawlowicz]

Another question here - what happens with other output fields, like errors, sourceMap, stats, or warnings?

[strarsis]

The webpack plugin only expects/uses the css property of returned object: https://github.com/NMFR/optimize-css-assets-webpack-plugin/blob/master/index.js#L78

[jakubpawlowicz]

Ah sorry, forgot to submit the review.

[jakubpawlowicz]

Cool. Please use 2-space indent in lines 54-56 to be consistent with other code here and I'll merge it, thanks!

[strarsis]

Extra note: optimize-css-assets-webpack-plugin passes the to option to cssnano which in turn passes it to postcss internally for sourcemap support (see NMFR/optimize-css-assets-webpack-plugin#9).
Sourcemaps are supported + enabled by default in clean-css?

[jakubpawlowicz]

In case of clean-css that to option may relate to rebaseTo. And we do support source maps via sourceMap and sourceMapInlineSources flags, see: https://github.com/jakubpawlowicz/clean-css#how-to-work-with-source-maps

[strarsis]

Option to is now mapped to rebaseTo and cleaned up from options object.

[jakubpawlowicz]

👍 somehow indents are wrong again, please format it as:

return cleanCss.minify(input)
  .then(function(output) {
    return { css: output.styles };
  });

[strarsis]

@jakubpawlowicz: Fixed

[jakubpawlowicz]

Thanks!

[maxmilton]

I wasn't able to get this working at all, let alone with source maps.

Instead I had to put together something a bit custom to get it working and with source map support. Might be useful for someone in the future:

const path = require('path');
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin');
const CleanCSS = require('clean-css');

...

  plugins: [
    // Compress extracted CSS. We are using this plugin so that possible
    // duplicated CSS from different components can be deduped.
    new OptimizeCSSPlugin({
      // use clean-css instead of the default cssnano
      cssProcessor: {
        process: (css, options) => new Promise((resolve, reject) => {
          const opts = Object.assign(options.map ? {
            sourceMap: true,
            sourceMapInlineSources: true,
          } : {}, options);

          opts.returnPromise = true;
          const filename = path.basename(opts.to);

          new CleanCSS(opts)
            .minify({
              [filename]: {
                styles: css,
                sourceMap: opts.map && opts.map.prev, // probably empty but here just in case
              }
            })
            .then((result) => {
              if (result.warnings) console.warn(result.warnings);

              resolve({
                css: options.map
                  ? result.styles + `\n/*# sourceMappingURL=${filename}.map */`
                  : result.styles,
                map: result.sourceMap,
              });
            })
            .catch(reject);
        }),
      },
      cssProcessorOptions: {
        // passing an object will enable source maps OR comment out to disable
        map: {},

        // the actual clean-css options
        level: {
          1: { all: true },
          2: { all: true },
        },
      },
    }),
  ]

...

[yshterev]

@jakubpawlowicz Has this been published to the npm?
I just installed clean-css 4.1.11, I got process is not a function.. and the code is missing from node_modules/clean-css/lib/clean.js

[beanlee]

@yshterev same to you, it doesn't work. : (

[yshterev]

It can be used like this until it is fixed:

new OptimizeCssAssetsPlugin({
      cssProcessor: {
        process: (input, opts) => {
          const optsTo = opts.to;
          delete opts.to;

          const cleanCss = new CleanCSS(Object.assign({ returnPromise: true, rebaseTo: optsTo }, opts));
          return cleanCss.minify(input).then(output => ({css: output.styles }));
        }
      },

[tadinski]

this.options.cssProcessor.process is not a function

still an issue

[glen-84]

See also NMFR/optimize-css-assets-webpack-plugin#87.