Add test for custom css minifier

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.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",

test/CssMinimizerPlugin.test.js

@@ -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/__snapshots__/CssMinimizerPlugin.test.js.snap.webpack4

@@ -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.webpack5

@@ -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 {};",