feat: optimize CSS assets added later by plugins (webpack@5 only) (#47)

webpack-contrib · Jan 8, 2021 · bdb3f52 · bdb3f52
1 parent 66c054f
commit bdb3f52
Show file tree

Hide file tree

Showing 5 changed files with 102 additions and 7 deletions.
diff --git a/src/index.js b/src/index.js
@@ -192,13 +192,25 @@ class CssMinimizerPlugin {
   async optimize(compiler, compilation, assets, CacheEngine, weakCache) {
     const assetNames = Object.keys(
       typeof assets === 'undefined' ? compilation.assets : assets
-    ).filter((assetName) =>
-      ModuleFilenameHelpers.matchObject.bind(
-        // eslint-disable-next-line no-undefined
-        undefined,
-        this.options
-      )(assetName)
-    );
+    ).filter((assetName) => {
+      if (
+        !ModuleFilenameHelpers.matchObject.bind(
+          // eslint-disable-next-line no-undefined
+          undefined,
+          this.options
+        )(assetName)
+      ) {
+        return false;
+      }
+
+      const { info } = CssMinimizerPlugin.getAsset(compilation, assetName);
+
+      if (info.minimized) {
+        return false;
+      }
+
+      return true;
+    });
 
     if (assetNames.length === 0) {
       return Promise.resolve();
@@ -463,6 +475,7 @@ class CssMinimizerPlugin {
           {
             name: pluginName,
             stage: Compilation.PROCESS_ASSETS_STAGE_OPTIMIZE_SIZE,
+            additionalAssets: true,
           },
           (assets) => this.optimize(compiler, compilation, assets, CacheEngine)
         );

diff --git a/test/CssMinimizerPlugin.test.js b/test/CssMinimizerPlugin.test.js
@@ -17,6 +17,7 @@ import {
   readAsset,
   removeCache,
   ModifyExistingAsset,
+  EmitNewAsset,
 } from './helpers';
 
 describe('CssMinimizerPlugin', () => {
@@ -1102,4 +1103,41 @@ describe('CssMinimizerPlugin', () => {
       resolve();
     });
   });
+
+  if (!getCompiler.isWebpack4()) {
+    it('should run plugin against assets added later by plugins', async () => {
+      const compiler = getCompiler({
+        output: {
+          pathinfo: false,
+          path: path.resolve(__dirname, 'dist'),
+          filename: '[name].js',
+          chunkFilename: '[id].[name].js',
+        },
+        entry: {
+          entry: `${__dirname}/fixtures/test/foo.css`,
+        },
+        module: {
+          rules: [
+            {
+              test: /.s?css$/i,
+              use: ['css-loader'],
+            },
+          ],
+        },
+      });
+
+      new CssMinimizerPlugin({
+        minimizerOptions: {
+          preset: ['default', { discardEmpty: false }],
+        },
+      }).apply(compiler);
+      new EmitNewAsset({ name: 'newFile.css' }).apply(compiler);
+
+      const stats = await compile(compiler);
+
+      expect(readAssets(compiler, stats, /\.css$/)).toMatchSnapshot('assets');
+      expect(getErrors(stats)).toMatchSnapshot('errors');
+      expect(getWarnings(stats)).toMatchSnapshot('warnings');
+    });
+  }
 });
diff --git a/test/__snapshots__/CssMinimizerPlugin.test.js.snap.webpack5 b/test/__snapshots__/CssMinimizerPlugin.test.js.snap.webpack5
@@ -59,6 +59,16 @@ exports[`CssMinimizerPlugin should respect the hash options #1: errors 1`] = `Ar
 
 exports[`CssMinimizerPlugin should respect the hash options #1: warnings 1`] = `Array []`;
 
+exports[`CssMinimizerPlugin should run plugin against assets added later by plugins: assets 1`] = `
+Object {
+  "newFile.css": ".a{display:block;color:coral}",
+}
+`;
+
+exports[`CssMinimizerPlugin should run plugin against assets added later by plugins: errors 1`] = `Array []`;
+
+exports[`CssMinimizerPlugin should run plugin against assets added later by plugins: warnings 1`] = `Array []`;
+
 exports[`CssMinimizerPlugin should throw error from postcss: error 1`] = `
 Array [
   "Error: foo.css from Css Minimizer 

diff --git a/test/helpers/EmitNewAsset.js b/test/helpers/EmitNewAsset.js
@@ -0,0 +1,32 @@
+export default class EmitNewAsset {
+  constructor(options = {}) {
+    this.options = options;
+  }
+
+  apply(compiler) {
+    const pluginName = this.constructor.name;
+
+    const { RawSource } = compiler.webpack.sources;
+
+    compiler.hooks.compilation.tap(pluginName, (compilation) => {
+      compilation.hooks.processAssets.tap(
+        {
+          name: pluginName,
+          stage: compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_REPORT,
+        },
+        () => {
+          // eslint-disable-next-line no-param-reassign
+          compilation.emitAsset(
+            this.options.name,
+            new RawSource(`
+.a {
+  display: block;
+  color: coral;
+}
+            `)
+          );
+        }
+      );
+    });
+  }
+}
diff --git a/test/helpers/index.js b/test/helpers/index.js
@@ -3,6 +3,7 @@ import getCompiler from './getCompiler';
 import readAsset from './readAsset';
 import readAssets from './readAssets';
 import ModifyExistingAsset from './ModifyExistingAsset';
+import EmitNewAsset from './EmitNewAsset';
 import removeCache from './removeCache';
 import getErrors from './getErrors';
 import getWarnings from './getWarnings';
@@ -14,6 +15,7 @@ export {
   readAsset,
   readAssets,
   ModifyExistingAsset,
+  EmitNewAsset,
   removeCache,
   getErrors,
   getWarnings,