docs: custom css minifiers (#29)

webpack-contrib · Aug 26, 2020 · 8d60fc9 · 8d60fc9
1 parent 37d64eb
commit 8d60fc9
Show file tree

Hide file tree

Showing 6 changed files with 215 additions and 2 deletions.
diff --git a/README.md b/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.

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/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",

diff --git a/test/CssMinimizerPlugin.test.js b/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');
+ });
 });
diff --git a/test/__snapshots__/CssMinimizerPlugin.test.js.snap.webpack4 b/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 {};",

diff --git a/test/__snapshots__/CssMinimizerPlugin.test.js.snap.webpack5 b/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 {};",