fix: compatibility cache feature with webpack@5 (#16)

.gitignore

@@ -10,9 +10,10 @@ npm-debug.log*
 /local
 /reports
 /node_modules
+/test/outputs/
 .DS_Store
 Thumbs.db
 .idea
 *.iml
 *.sublime-project
-*.sublime-workspace
+*.sublime-workspace

src/Webpack4Cache.js

@@ -22,16 +22,16 @@ export default class Webpack4Cache {
     return Boolean(this.cacheDir);
   }
 
-  get(task) {
+  async get(task) {
     // eslint-disable-next-line no-param-reassign
     task.cacheIdent = task.cacheIdent || serialize(task.cacheKeys);
 
-    return cacache
-      .get(this.cacheDir, task.cacheIdent)
-      .then(({ data }) => JSON.parse(data));
+    const { data } = await cacache.get(this.cacheDir, task.cacheIdent);
+
+    return JSON.parse(data);
   }
 
-  store(task, data) {
+  async store(task, data) {
     return cacache.put(this.cacheDir, task.cacheIdent, JSON.stringify(data));
   }
 }

src/Webpack5Cache.js

@@ -1,75 +1,28 @@
-// eslint-disable-next-line import/extensions,import/no-unresolved
-import getLazyHashedEtag from 'webpack/lib/cache/getLazyHashedEtag';
 import serialize from 'serialize-javascript';
 
-import { util } from 'webpack';
-
 export default class Cache {
   // eslint-disable-next-line no-unused-vars
   constructor(compilation, ignored) {
-    this.compilation = compilation;
+    this.cache = compilation.getCache('CssMinimizerWebpackPlugin');
   }
 
+  // eslint-disable-next-line class-methods-use-this
   isEnabled() {
-    return Boolean(this.compilation.cache);
-  }
-
-  createCacheIdent(task) {
-    const {
-      outputOptions: { hashSalt, hashDigest, hashDigestLength, hashFunction },
-    } = this.compilation;
-
-    const hash = util.createHash(hashFunction);
-
-    if (hashSalt) {
-      hash.update(hashSalt);
-    }
-
-    hash.update(serialize(task.cacheKeys));
-
-    const digest = hash.digest(hashDigest);
-    const cacheKeys = digest.substr(0, hashDigestLength);
-
-    return `${this.compilation.compilerPath}/CssMinimizerWebpackPlugin/${cacheKeys}/${task.file}`;
+    return true;
   }
 
-  get(task) {
+  async get(task) {
     // eslint-disable-next-line no-param-reassign
-    task.cacheIdent = task.cacheIdent || this.createCacheIdent(task);
+    task.cacheIdent =
+      task.cacheIdent || `${task.file}|${serialize(task.cacheKeys)}`;
     // eslint-disable-next-line no-param-reassign
-    task.cacheETag = task.cacheETag || getLazyHashedEtag(task.assetSource);
+    task.cacheETag =
+      task.cacheETag || this.cache.getLazyHashedEtag(task.assetSource);
 
-    return new Promise((resolve, reject) => {
-      this.compilation.cache.get(
-        task.cacheIdent,
-        task.cacheETag,
-        (err, result) => {
-          if (err) {
-            reject(err);
-          } else if (result) {
-            resolve(result);
-          } else {
-            reject();
-          }
-        }
-      );
-    });
+    return this.cache.getPromise(task.cacheIdent, task.cacheETag);
   }
 
-  store(task, data) {
-    return new Promise((resolve, reject) => {
-      this.compilation.cache.store(
-        task.cacheIdent,
-        task.cacheETag,
-        data,
-        (err) => {
-          if (err) {
-            reject(err);
-          } else {
-            resolve(data);
-          }
-        }
-      );
-    });
+  async store(task, data) {
+    return this.cache.storePromise(task.cacheIdent, task.cacheETag, data);
   }
 }

src/index.js

@@ -399,6 +399,11 @@ class CssMinimizerPlugin {
               return enqueue(task);
             }
 
+            // Webpack@5 return `undefined` when cache is not found
+            if (!taskResult) {
+              return enqueue(task);
+            }
+
             task.callback(taskResult);
 
             return Promise.resolve();

test/__snapshots__/cache-option.test.js.snap.webpack5

@@ -0,0 +1,85 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`"cache" option should work with "false" value for the "cache" option: assets 1`] = `
+Object {
+  "five.css": "body{color:red;font-size:20px}a{color:#00f}",
+  "four.css": "h1{color:green}h2{color:#ff0}",
+  "one.css": "a{text-align:center}",
+  "three.css": "body{color:red;font-size:20px}a{color:#00f}",
+  "two.css": "a{text-align:center}",
+}
+`;
+
+exports[`"cache" option should work with "false" value for the "cache" option: assets 2`] = `
+Object {
+  "five.css": "body{color:red;font-size:20px}a{color:#00f}",
+  "four.css": "h1{color:green}h2{color:#ff0}",
+  "one.css": "a{text-align:center}",
+  "three.css": "body{color:red;font-size:20px}a{color:#00f}",
+  "two.css": "a{text-align:center}",
+}
+`;
+
+exports[`"cache" option should work with "false" value for the "cache" option: errors 1`] = `Array []`;
+
+exports[`"cache" option should work with "false" value for the "cache" option: errors 2`] = `Array []`;
+
+exports[`"cache" option should work with "false" value for the "cache" option: warnings 1`] = `Array []`;
+
+exports[`"cache" option should work with "false" value for the "cache" option: warnings 2`] = `Array []`;
+
+exports[`"cache" option should work with "filesystem" value for the "cache.type" option: assets 1`] = `
+Object {
+  "five.css": "body{color:red;font-size:20px}a{color:#00f}",
+  "four.css": "h1{color:green}h2{color:#ff0}",
+  "one.css": "a{text-align:center}",
+  "three.css": "body{color:red;font-size:20px}a{color:#00f}",
+  "two.css": "a{text-align:center}",
+}
+`;
+
+exports[`"cache" option should work with "filesystem" value for the "cache.type" option: assets 2`] = `
+Object {
+  "five.css": "body{color:red;font-size:20px}a{color:#00f}",
+  "four.css": "h1{color:green}h2{color:#ff0}",
+  "one.css": "a{text-align:center}",
+  "three.css": "body{color:red;font-size:20px}a{color:#00f}",
+  "two.css": "a{text-align:center}",
+}
+`;
+
+exports[`"cache" option should work with "filesystem" value for the "cache.type" option: errors 1`] = `Array []`;
+
+exports[`"cache" option should work with "filesystem" value for the "cache.type" option: errors 2`] = `Array []`;
+
+exports[`"cache" option should work with "filesystem" value for the "cache.type" option: warnings 1`] = `Array []`;
+
+exports[`"cache" option should work with "filesystem" value for the "cache.type" option: warnings 2`] = `Array []`;
+
+exports[`"cache" option should work with "memory" value for the "cache.type" option: assets 1`] = `
+Object {
+  "five.css": "body{color:red;font-size:20px}a{color:#00f}",
+  "four.css": "h1{color:green}h2{color:#ff0}",
+  "one.css": "a{text-align:center}",
+  "three.css": "body{color:red;font-size:20px}a{color:#00f}",
+  "two.css": "a{text-align:center}",
+}
+`;
+
+exports[`"cache" option should work with "memory" value for the "cache.type" option: assets 2`] = `
+Object {
+  "five.css": "body{color:red;font-size:20px}a{color:#00f}",
+  "four.css": "h1{color:green}h2{color:#ff0}",
+  "one.css": "a{text-align:center}",
+  "three.css": "body{color:red;font-size:20px}a{color:#00f}",
+  "two.css": "a{text-align:center}",
+}
+`;
+
+exports[`"cache" option should work with "memory" value for the "cache.type" option: errors 1`] = `Array []`;
+
+exports[`"cache" option should work with "memory" value for the "cache.type" option: errors 2`] = `Array []`;
+
+exports[`"cache" option should work with "memory" value for the "cache.type" option: warnings 1`] = `Array []`;
+
+exports[`"cache" option should work with "memory" value for the "cache.type" option: warnings 2`] = `Array []`;