fix: compatibility with webpack 5

Author: cap-Bernardito

src/Webpack4Cache.js

@@ -5,11 +5,12 @@ import findCacheDir from 'find-cache-dir';
 import serialize from 'serialize-javascript';
 
 export default class Webpack4Cache {
-  constructor(compilation, options) {
-    this.cacheDir =
+  constructor(compilation, options, weakCache) {
+    this.cache =
       options.cache === true
         ? Webpack4Cache.getCacheDirectory()
         : options.cache;
+    this.weakCache = weakCache;
   }
 
   static getCacheDirectory() {
@@ -18,31 +19,72 @@ export default class Webpack4Cache {
     );
   }
 
-  isEnabled() {
-    return Boolean(this.cacheDir);
-  }
+  async get(task, sources) {
+    const weakOutput = this.weakCache.get(task.assetSource);
+
+    if (weakOutput) {
+      return weakOutput;
+    }
+
+    if (!this.cache) {
+      // eslint-disable-next-line no-undefined
+      return undefined;
+    }
 
-  async get(task) {
     // eslint-disable-next-line no-param-reassign
     task.cacheIdent = task.cacheIdent || serialize(task.cacheKeys);
 
     let cachedResult;
 
     try {
-      cachedResult = await cacache.get(this.cacheDir, task.cacheIdent);
+      cachedResult = await cacache.get(this.cache, task.cacheIdent);
     } catch (ignoreError) {
       // eslint-disable-next-line no-undefined
       return undefined;
     }
 
-    return JSON.parse(cachedResult.data);
+    cachedResult = JSON.parse(cachedResult.data);
+
+    const { css: code, map, input, assetName, inputSourceMap } = cachedResult;
+
+    if (map) {
+      cachedResult.source = new sources.SourceMapSource(
+        code,
+        assetName,
+        map,
+        input,
+        inputSourceMap,
+        true
+      );
+    } else {
+      cachedResult.source = new sources.RawSource(code);
+    }
+
+    return cachedResult;
   }
 
   async store(task) {
+    if (!this.weakCache.has(task.assetSource)) {
+      this.weakCache.set(task.assetSource, task);
+    }
+
+    if (!this.cache) {
+      // eslint-disable-next-line no-undefined
+      return undefined;
+    }
+
+    const { cacheIdent, css, assetName, map, input, inputSourceMap } = task;
+
     return cacache.put(
-      this.cacheDir,
-      task.cacheIdent,
-      JSON.stringify(task.output)
+      this.cache,
+      cacheIdent,
+      JSON.stringify({
+        assetName,
+        css,
+        map,
+        input,
+        inputSourceMap,
+      })
     );
   }
 }

src/Webpack5Cache.js

@@ -1,14 +1,9 @@
 export default class Cache {
   // eslint-disable-next-line no-unused-vars
-  constructor(compilation, ignored) {
+  constructor(compilation) {
     this.cache = compilation.getCache('CssMinimizerWebpackPlugin');
   }
 
-  // eslint-disable-next-line class-methods-use-this
-  isEnabled() {
-    return true;
-  }
-
   async get(task) {
     // eslint-disable-next-line no-param-reassign
     task.eTag = task.eTag || this.cache.getLazyHashedEtag(task.assetSource);
@@ -17,6 +12,11 @@ export default class Cache {
   }
 
   async store(task) {
-    return this.cache.storePromise(task.assetName, task.eTag, task.output);
+    const { source, warnings } = task;
+
+    return this.cache.storePromise(task.assetName, task.eTag, {
+      source,
+      warnings,
+    });
   }
 }

src/index.js

@@ -234,9 +234,9 @@ class CssMinimizerPlugin {
     }
 
     const task = {
+      assetName,
       assetSource,
       assetInfo,
-      assetName,
       input,
       inputSourceMap,
       map: this.options.sourceMap,
@@ -263,91 +263,15 @@ class CssMinimizerPlugin {
     yield task;
   }
 
-  afterTask(compiler, compilation, task, weakCache) {
-    const {
-      error,
-      inputSourceMap,
-      assetName,
-      input,
-      assetInfo,
-      assetSource,
-      output,
-    } = task;
-
-    let sourceMap = null;
-
-    if (
-      (error || (output && output.warnings && output.warnings.length > 0)) &&
-      inputSourceMap &&
-      CssMinimizerPlugin.isSourceMap(inputSourceMap)
-    ) {
-      sourceMap = new SourceMapConsumer(inputSourceMap);
-    }
-
-    // Handling results
-    // Error case: add errors, and go to next file
-    if (error) {
-      compilation.errors.push(
-        CssMinimizerPlugin.buildError(
-          error,
-          assetName,
-          sourceMap,
-          new RequestShortener(compiler.context)
-        )
-      );
-
-      return;
-    }
-
-    const { css: code, map, warnings } = output;
-
-    let weakOutput = weakCache.get(assetSource);
-
-    if (!weakOutput) {
-      if (map) {
-        weakOutput = new SourceMapSource(
-          code,
-          assetName,
-          map,
-          input,
-          inputSourceMap,
-          true
-        );
-      } else {
-        weakOutput = new RawSource(code);
-      }
-
-      weakCache.set(assetSource, weakOutput);
-    }
-
-    CssMinimizerPlugin.updateAsset(compilation, assetName, weakOutput, {
-      ...assetInfo,
-      minimized: true,
-    });
-
-    // Handling warnings
-    if (warnings && warnings.length > 0) {
-      warnings.forEach((warning) => {
-        const builtWarning = CssMinimizerPlugin.buildWarning(
-          warning,
-          assetName,
-          sourceMap,
-          new RequestShortener(compiler.context),
-          this.options.warningsFilter
-        );
-
-        if (builtWarning) {
-          compilation.warnings.push(builtWarning);
-        }
-      });
-    }
-  }
-
   // eslint-disable-next-line class-methods-use-this
   async runTasks(compiler, compilation, assetNames, CacheEngine, weakCache) {
-    const cache = new CacheEngine(compilation, {
-      cache: this.options.cache,
-    });
+    const cache = new CacheEngine(
+      compilation,
+      {
+        cache: this.options.cache,
+      },
+      weakCache
+    );
     const availableNumberOfCores = CssMinimizerPlugin.getAvailableNumberOfCores(
       this.options.parallel
     );
@@ -385,24 +309,6 @@ class CssMinimizerPlugin {
     const scheduledTasks = [];
 
     for (const assetName of assetNames) {
-      const enqueue = async (task) => {
-        try {
-          // eslint-disable-next-line no-param-reassign
-          task.output = worker
-            ? await worker.transform(serialize(task))
-            : await minifyFn(task);
-        } catch (error) {
-          // eslint-disable-next-line no-param-reassign
-          task.error = error;
-        }
-
-        if (cache.isEnabled() && typeof task.output !== 'undefined') {
-          await cache.store(task);
-        }
-
-        this.afterTask(compiler, compilation, task, weakCache);
-      };
-
       scheduledTasks.push(
         limit(async () => {
           const task = this.getTask(compiler, compilation, assetName).next()
@@ -412,23 +318,83 @@ class CssMinimizerPlugin {
             return Promise.resolve();
           }
 
-          if (cache.isEnabled()) {
+          let resultOutput = await cache.get(task, {
+            RawSource,
+            SourceMapSource,
+          });
+
+          if (!resultOutput) {
             try {
-              task.output = await cache.get(task);
-            } catch (ignoreError) {
-              return enqueue(task);
+              // eslint-disable-next-line no-param-reassign
+              resultOutput = await (worker
+                ? worker.transform(serialize(task))
+                : minifyFn(task));
+            } catch (error) {
+              compilation.errors.push(
+                CssMinimizerPlugin.buildError(
+                  error,
+                  assetName,
+                  task.inputSourceMap &&
+                    CssMinimizerPlugin.isSourceMap(task.inputSourceMap)
+                    ? new SourceMapConsumer(task.inputSourceMap)
+                    : null,
+                  new RequestShortener(compiler.context)
+                )
+              );
+
+              return Promise.resolve();
             }
 
-            if (!task.output) {
-              return enqueue(task);
+            task.css = resultOutput.css;
+            task.map = resultOutput.map;
+            task.warnings = resultOutput.warnings;
+
+            if (task.map) {
+              task.source = new SourceMapSource(
+                task.css,
+                assetName,
+                task.map,
+                task.input,
+                task.inputSourceMap,
+                true
+              );
+            } else {
+              task.source = new RawSource(task.css);
             }
 
-            this.afterTask(compiler, compilation, task, weakCache);
+            await cache.store(task);
+          } else {
+            task.source = resultOutput.source;
+            task.warnings = resultOutput.warnings;
+          }
 
-            return Promise.resolve();
+          if (task.warnings && task.warnings.length > 0) {
+            task.warnings.forEach((warning) => {
+              const builtWarning = CssMinimizerPlugin.buildWarning(
+                warning,
+                assetName,
+                task.inputSourceMap &&
+                  CssMinimizerPlugin.isSourceMap(task.inputSourceMap)
+                  ? new SourceMapConsumer(task.inputSourceMap)
+                  : null,
+                new RequestShortener(compiler.context),
+                this.options.warningsFilter
+              );
+
+              if (builtWarning) {
+                compilation.warnings.push(builtWarning);
+              }
+            });
           }
 
-          return enqueue(task);
+          const { source, assetInfo } = task;
+
+          CssMinimizerPlugin.updateAsset(compilation, assetName, source, {
+            ...assetInfo,
+            minimized: true,
+          });
+
+          return Promise.resolve();
         })
       );
     }
@@ -507,7 +473,8 @@ class CssMinimizerPlugin {
         const CacheEngine = require('./Webpack4Cache').default;
 
         compilation.hooks.optimizeChunkAssets.tapPromise(pluginName, () =>
-          optimizeFn(compilation, CacheEngine)
+          // eslint-disable-next-line no-undefined
+          optimizeFn(compilation, CacheEngine, undefined, weakCache)
         );
       } else {
         if (this.options.sourceMap) {

src/minify.js

@@ -29,7 +29,6 @@ const minify = async (options) => {
     return {
       css: result.css,
       map: result.map,
-      error: result.error,
       warnings: warningsToString(result.warnings || []),
     };
   }
@@ -43,7 +42,6 @@ const minify = async (options) => {
   return {
     css: result.css,
     map: result.map,
-    error: result.error,
     warnings: warningsToString(result.warnings()),
   };
 };