html-webpack-plugin V4 (#84)

Fix support for html-webpack-plugin V4 (reworking of #43 and #62 due to monorepo)
GoogleChromeLabs · Oct 22, 2021 · 3bf052e · 3bf052e
1 parent 1c4f3f8
commit 3bf052e
Show file tree

Hide file tree

Showing 6 changed files with 167 additions and 209 deletions.
diff --git a/packages/critters-webpack-plugin/package.json b/packages/critters-webpack-plugin/package.json
@@ -47,12 +47,12 @@
   "devDependencies": {
     "css-loader": "^4.2.1",
     "file-loader": "^6.0.0",
-    "html-webpack-plugin": "^3.2.0",
+    "html-webpack-plugin": "^4.5.2",
     "mini-css-extract-plugin": "^0.10.0",
-    "webpack": "^4.6.0"
+    "webpack": "^4.46.0"
   },
   "dependencies": {
-    "critters": "^0.0.10",
+    "critters": "^0.0.13",
     "minimatch": "^3.0.4",
     "webpack-log": "^3.0.1",
     "webpack-sources": "^1.3.0"

diff --git a/packages/critters-webpack-plugin/src/index.js b/packages/critters-webpack-plugin/src/index.js
@@ -62,7 +62,23 @@ export default class CrittersWebpackPlugin extends Critters {
     tap(compiler, 'compilation', PLUGIN_NAME, false, (compilation) => {
       this.options.path = compiler.options.output.path;
       this.options.publicPath = compiler.options.output.publicPath;
-      // ... which is how we get an "after" hook into html-webpack-plugin's HTML generation.
+
+      const hasHtmlPlugin = compilation.options.plugins.find(p => p.constructor && p.constructor.name === 'HtmlWebpackPlugin');
+      try {
+        var htmlPluginHooks = require('html-webpack-plugin').getHooks(compilation);
+      } catch (err) {}
+
+      const handleHtmlPluginData = (htmlPluginData, callback) => {
+        this.fs = compilation.outputFileSystem;
+        this.compilation = compilation;
+        this.process(htmlPluginData.html)
+          .then((html) => {
+            callback(null, { html });
+          })
+          .catch(callback);
+      };
+
+      // get an "after" hook into html-webpack-plugin's HTML generation.
       if (
         compilation.hooks &&
         compilation.hooks.htmlWebpackPluginAfterHtmlProcessing
@@ -72,16 +88,10 @@ export default class CrittersWebpackPlugin extends Critters {
           'html-webpack-plugin-after-html-processing',
           PLUGIN_NAME,
           true,
-          (htmlPluginData, callback) => {
-            this.fs = compilation.outputFileSystem;
-            this.compilation = compilation;
-            this.process(htmlPluginData.html)
-              .then((html) => {
-                callback(null, { html });
-              })
-              .catch(callback);
-          }
+          handleHtmlPluginData
         );
+      } else if (hasHtmlPlugin && htmlPluginHooks) {
+        htmlPluginHooks.beforeEmit.tapAsync(PLUGIN_NAME, handleHtmlPluginData);
       } else {
         // If html-webpack-plugin isn't used, process the first HTML asset as an optimize step
         tap(

diff --git a/packages/critters-webpack-plugin/test/__snapshots__/index.test.js.snap b/packages/critters-webpack-plugin/test/__snapshots__/index.test.js.snap
@@ -64,7 +64,7 @@ footer {
     <h1>My first styled page</h1>
     <p>Welcome to my styled page!</p>
     <footer>Made 5 April 2004</footer>
-  <script type=\\"text/javascript\\" src=\\"bundle.js\\"></script>
+  <script src=\\"bundle.js\\"></script>
 
 <link rel=\\"stylesheet\\" href=\\"main.css\\"></body></html>"
 `;
@@ -156,7 +156,7 @@ exports[`Inline <style> pruning should remove unused rules 1`] = `
     <h1>My first styled page</h1>
     <p>Welcome to my styled page!</p>
     <footer>Made 5 April 2004</footer>
-  <script type=\\"text/javascript\\" src=\\"bundle.js\\"></script>
+  <script src=\\"bundle.js\\"></script>
 
 </body></html>"
 `;
@@ -225,7 +225,7 @@ footer {
     <h1>My first styled page</h1>
     <p>Welcome to my styled page!</p>
     <footer>Made 5 April 2004</footer>
-  <script type=\\"text/javascript\\" src=\\"bundle.js\\"></script>
+  <script src=\\"bundle.js\\"></script>
 
 <link rel=\\"stylesheet\\" href=\\"main.css\\"></body></html>"
 `;
@@ -294,7 +294,7 @@ footer {
     <h1>My first styled page</h1>
     <p>Welcome to my styled page!</p>
     <footer>Made 5 April 2004</footer>
-  <script type=\\"text/javascript\\" src=\\"/_public/bundle.js\\"></script>
+  <script src=\\"/_public/bundle.js\\"></script>
 
 <link rel=\\"stylesheet\\" href=\\"/_public/main.css\\"></body></html>"
 `;
@@ -386,7 +386,7 @@ exports[`webpack compilation 1`] = `
     <h1>My first styled page</h1>
     <p>Welcome to my styled page!</p>
     <footer>Made 5 April 2004</footer>
-  <script type=\\"text/javascript\\" src=\\"bundle.js\\"></script></body>
+  <script src=\\"bundle.js\\"></script></body>
 </html>
 "
 `;
diff --git a/packages/critters-webpack-plugin/test/__snapshots__/standalone.test.js.snap b/packages/critters-webpack-plugin/test/__snapshots__/standalone.test.js.snap
@@ -26,76 +26,25 @@ exports[`Usage without html-webpack-plugin should process the first html asset 2
 `;
 
 exports[`webpack compilation 1`] = `
-"<!DOCTYPE html><html><head>
+"<!DOCTYPE html>
+<html>
+  <head>
     <title>Basic Demo</title>
-    <style>
-      body {
-        padding-left: 11em;
-        font-family: \\"Times New Roman\\", times, serif;
-        color: purple;
-        background-color: #d8da3d;
-      }
-      ul.navbar {
-        list-style-type: none;
+    <style id=\\"unused\\">
+      .navbar {
         padding: 0;
         margin: 0;
-        position: absolute;
-        top: 2em;
-        left: 1em;
-        width: 9em;
       }
+    </style>
+    <style id=\\"used\\">
       h1 {
-        font-family: helvetica, arial, sans-serif;
-      }
-      ul.navbar li {
-        background: white;
-        margin: 0.5em 0;
-        padding: 0.3em;
-        border-right: 1em solid black;
-      }
-      ul.navbar a {
-        text-decoration: none;
-      }
-      ul.navbar:not(.hidden) li:hover a {
-        color: black;
-      }
-      ul.navbar:not(:hover) li:hover a {
-        color: black;
-      }
-      ul.navbar li:hover a {
-        color: red;
-      }
-      a:link {
-        color: blue;
-      }
-      a:visited {
-        color: purple;
-      }
-
-      footer {
-        margin-top: 1em;
-        padding-top: 1em;
-        border-top: thin dotted;
-      }
-
-      .clazz\\\\:colon {
         color: green;
       }
     </style>
   </head>
   <body>
-    <ul class=\\"navbar clazz:colon\\">
-      <li>
-        <a href=\\"index.html\\">Home page</a>
-      </li>
-      <li>
-        <a href=\\"musings.html\\">Musings</a>
-      </li>
-    </ul>
-    <h1>My first styled page</h1>
-    <p>Welcome to my styled page!</p>
-    <footer>Made 5 April 2004</footer>
-  <script type=\\"text/javascript\\" src=\\"bundle.js\\"></script>
-
-</body></html>"
+    <h1>Some HTML Here</h1>
+  </body>
+</html>
+"
 `;
diff --git a/packages/critters-webpack-plugin/test/standalone.test.js b/packages/critters-webpack-plugin/test/standalone.test.js
@@ -32,7 +32,7 @@ function configure(config) {
 test('webpack compilation', async () => {
   const info = await compile('fixtures/raw/index.js', configure);
   expect(info.assets).toHaveLength(2);
-  expect(await readFile('fixtures/basic/dist/index.html')).toMatchSnapshot();
+  expect(await readFile('fixtures/raw/dist/index.html')).toMatchSnapshot();
 });
 
 describe('Usage without html-webpack-plugin', () => {