docs: custom css minifiers (#29)

Author: cap-Bernardito

README.md

@@ -328,7 +328,6 @@ module.exports = {
               return {
                 css: result.css,
                 map: result.map,
-                error: result.error,
                 warnings: result.warnings(),
               };
             });
@@ -460,6 +459,80 @@ module.exports = {
 };
 ```
 
+### Using custom minifier [csso](https://github.com/css/csso)
+
+By default plugin uses [cssnano](https://github.com/cssnano/cssnano) package.
+It is possible to use another minify function.
+
+> ⚠️ **Always use `require` inside `minify` function when `parallel` option enabled**.
+
+**webpack.config.js**
+
+```js
+module.exports = {
+  devtool: 'source-map',
+  optimization: {
+    minimize: true,
+    minimizer: [
+      new CssMinimizerPlugin({
+        minify: ({ input, postcssOptions }) => {
+          // eslint-disable-next-line global-require
+          const csso = require('csso');
+
+          const minifiedCss = csso.minify(input, {
+            filename: postcssOptions.from,
+            sourceMap: true,
+          });
+
+          return {
+            css: minifiedCss.css,
+            map: minifiedCss.map.toJSON(),
+          };
+        },
+      }),
+    ],
+  },
+};
+```
+
+### Using custom minifier [clean-css](https://github.com/jakubpawlowicz/clean-css)
+
+By default plugin uses [cssnano](https://github.com/cssnano/cssnano) package.
+It is possible to use another minify function.
+
+> ⚠️ **Always use `require` inside `minify` function when `parallel` option enabled**.
+
+**webpack.config.js**
+
+```js
+module.exports = {
+  devtool: 'source-map',
+  optimization: {
+    minimize: true,
+    minimizer: [
+      new CssMinimizerPlugin({
+        minify: async ({ input, postcssOptions }) => {
+          // eslint-disable-next-line global-require
+          const CleanCSS = require('clean-css');
+
+          const minifiedCss = await new CleanCSS({ sourceMap: true }).minify({
+            [postcssOptions.from]: {
+              styles: input,
+            },
+          });
+
+          return {
+            css: minifiedCss.styles,
+            map: minifiedCss.sourceMap.toJSON(),
+            warnings: minifiedCss.warnings,
+          };
+        },
+      }),
+    ],
+  },
+};
+```
+
 ## Contributing
 
 Please take a moment to read our contributing guidelines if you haven't yet done so.

package-lock.json

@@ -60,10 +60,12 @@
     "@webpack-contrib/defaults": "^6.3.0",
     "@webpack-contrib/eslint-config-webpack": "^3.0.0",
     "babel-jest": "^26.3.0",
+    "clean-css": "^4.2.3",
     "commitlint-azure-pipelines-cli": "^1.0.3",
     "copy-webpack-plugin": "^6.0.3",
     "cross-env": "^7.0.2",
     "css-loader": "^4.2.1",
+    "csso": "^4.0.3",
     "del": "^5.1.0",
     "del-cli": "^3.0.1",
     "eslint": "^7.7.0",

package.json

@@ -321,7 +321,6 @@ describe('CssMinimizerPlugin', () => {
             return {
               css: result.css,
               map: result.map,
-              error: result.error,
               warnings: result.warnings(),
             };
           });
@@ -608,4 +607,82 @@ describe('CssMinimizerPlugin', () => {
       resolve();
     });
   });
+
+  it('should work with custom csso minifier', async () => {
+    const compiler = getCompiler({
+      devtool: 'source-map',
+      entry: {
+        foo: `${__dirname}/fixtures/foo.css`,
+      },
+    });
+
+    new CssMinimizerPlugin({
+      minify: ({ input, postcssOptions }) => {
+        // eslint-disable-next-line global-require
+        const csso = require('csso');
+
+        const minifiedCss = csso.minify(input, {
+          filename: postcssOptions.from,
+          sourceMap: true,
+        });
+
+        return {
+          css: minifiedCss.css,
+          map: minifiedCss.map.toJSON(),
+        };
+      },
+    }).apply(compiler);
+
+    const stats = await compile(compiler);
+
+    const maps = readAssets(compiler, stats, '.css.map');
+
+    Object.keys(maps).forEach((assetKey) => {
+      expect(maps[assetKey]).toMatchSnapshot(assetKey);
+    });
+
+    expect(readAssets(compiler, stats, '.css')).toMatchSnapshot('assets');
+    expect(getErrors(stats)).toMatchSnapshot('error');
+    expect(getWarnings(stats)).toMatchSnapshot('warning');
+  });
+
+  it('should work with custom clean-css minifier', async () => {
+    const compiler = getCompiler({
+      devtool: 'source-map',
+      entry: {
+        foo: `${__dirname}/fixtures/foo.css`,
+      },
+    });
+
+    new CssMinimizerPlugin({
+      minify: async ({ input, postcssOptions }) => {
+        // eslint-disable-next-line global-require
+        const CleanCSS = require('clean-css');
+
+        const minifiedCss = await new CleanCSS({ sourceMap: true }).minify({
+          [postcssOptions.from]: {
+            styles: input,
+          },
+        });
+
+        return {
+          css: minifiedCss.styles,
+          map: minifiedCss.sourceMap.toJSON(),
+          warnings: minifiedCss.warnings,
+        };
+      },
+    }).apply(compiler);
+
+    const stats = await compile(compiler);
+
+    const maps = readAssets(compiler, stats, '.css.map');
+
+    Object.keys(maps).forEach((assetKey) => {
+      expect(maps[assetKey]).toMatchSnapshot(assetKey);
+    });
+
+    expect(readAssets(compiler, stats, '.css')).toMatchSnapshot('assets');
+    expect(getErrors(stats)).toMatchSnapshot('error');
+    expect(getWarnings(stats)).toMatchSnapshot('warning');
+  });
 });

test/CssMinimizerPlugin.test.js

@@ -139,6 +139,32 @@ exports[`CssMinimizerPlugin should work with child compilation: errors 1`] = `Ar
 
 exports[`CssMinimizerPlugin should work with child compilation: warnings 1`] = `Array []`;
 
+exports[`CssMinimizerPlugin should work with custom clean-css minifier: assets 1`] = `
+Object {
+  "foo.css": "body{color:red}a{color:#00f}
+/*# sourceMappingURL=foo.css.map*/",
+}
+`;
+
+exports[`CssMinimizerPlugin should work with custom clean-css minifier: error 1`] = `Array []`;
+
+exports[`CssMinimizerPlugin should work with custom clean-css minifier: foo.css.map 1`] = `"{\\"version\\":3,\\"sources\\":[\\"webpack:///foo.css\\"],\\"names\\":[],\\"mappings\\":\\"AAAA,KACE,MAAO,IAET,EACE,MAAO\\",\\"file\\":\\"foo.css\\",\\"sourcesContent\\":[\\"body {\\\\n  color: red;\\\\n}\\\\na {\\\\n  color: blue;\\\\n}\\\\n\\"],\\"sourceRoot\\":\\"\\"}"`;
+
+exports[`CssMinimizerPlugin should work with custom clean-css minifier: warning 1`] = `Array []`;
+
+exports[`CssMinimizerPlugin should work with custom csso minifier: assets 1`] = `
+Object {
+  "foo.css": "body{color:red}a{color:#00f}
+/*# sourceMappingURL=foo.css.map*/",
+}
+`;
+
+exports[`CssMinimizerPlugin should work with custom csso minifier: error 1`] = `Array []`;
+
+exports[`CssMinimizerPlugin should work with custom csso minifier: foo.css.map 1`] = `"{\\"version\\":3,\\"sources\\":[\\"webpack:///foo.css\\"],\\"names\\":[],\\"mappings\\":\\"AAAA,I,CACE,S,CAEF,C,CACE,U\\",\\"file\\":\\"foo.css\\",\\"sourcesContent\\":[\\"body {\\\\n  color: red;\\\\n}\\\\na {\\\\n  color: blue;\\\\n}\\\\n\\"],\\"sourceRoot\\":\\"\\"}"`;
+
+exports[`CssMinimizerPlugin should work with custom csso minifier: warning 1`] = `Array []`;
+
 exports[`CssMinimizerPlugin should write stdout and stderr of workers to stdout and stderr of main process in parallel mode: assets 1`] = `
 Object {
   "one.css": ".minify {};",

test/__snapshots__/CssMinimizerPlugin.test.js.snap.webpack4

@@ -149,6 +149,32 @@ exports[`CssMinimizerPlugin should work with child compilation: errors 1`] = `Ar
 
 exports[`CssMinimizerPlugin should work with child compilation: warnings 1`] = `Array []`;
 
+exports[`CssMinimizerPlugin should work with custom clean-css minifier: assets 1`] = `
+Object {
+  "foo.css": "body{color:red}a{color:#00f}
+/*# sourceMappingURL=foo.css.map*/",
+}
+`;
+
+exports[`CssMinimizerPlugin should work with custom clean-css minifier: error 1`] = `Array []`;
+
+exports[`CssMinimizerPlugin should work with custom clean-css minifier: foo.css.map 1`] = `"{\\"version\\":3,\\"sources\\":[\\"webpack:///foo.css\\"],\\"names\\":[],\\"mappings\\":\\"AAAA,KACE,MAAO,IAET,EACE,MAAO\\",\\"sourceRoot\\":\\"\\",\\"file\\":\\"foo.css\\"}"`;
+
+exports[`CssMinimizerPlugin should work with custom clean-css minifier: warning 1`] = `Array []`;
+
+exports[`CssMinimizerPlugin should work with custom csso minifier: assets 1`] = `
+Object {
+  "foo.css": "body{color:red}a{color:#00f}
+/*# sourceMappingURL=foo.css.map*/",
+}
+`;
+
+exports[`CssMinimizerPlugin should work with custom csso minifier: error 1`] = `Array []`;
+
+exports[`CssMinimizerPlugin should work with custom csso minifier: foo.css.map 1`] = `"{\\"version\\":3,\\"sources\\":[\\"webpack:///foo.css\\"],\\"names\\":[],\\"mappings\\":\\"AAAA,I,CACE,S,CAEF,C,CACE,U\\",\\"file\\":\\"foo.css\\",\\"sourcesContent\\":[\\"body {\\\\n  color: red;\\\\n}\\\\na {\\\\n  color: blue;\\\\n}\\\\n\\"],\\"sourceRoot\\":\\"\\"}"`;
+
+exports[`CssMinimizerPlugin should work with custom csso minifier: warning 1`] = `Array []`;
+
 exports[`CssMinimizerPlugin should write stdout and stderr of workers to stdout and stderr of main process in parallel mode: assets 1`] = `
 Object {
   "one.css": ".minify {};",