Replacing html-critical-webpack-plugin package with critical-css-webpack-plugin

Adding lodash as dependency so we can use "merge"
Updating README.md

Author: ampedweb

README.md

@@ -30,14 +30,21 @@ mix
         enabled: mix.inProduction(),
         paths: {
             base: 'https://url-of-where-criticalcss-is-extracted.com/',
-            templates: './where-critical-css-file-needs-to-be-written/',
+            templates: './css/critical', //Where css files need to be written, all these paths are relative to /public
+                                         //So the example path here will be public/css/critical       
             suffix: '_critical.min'
         },
         urls: [
             { url: 'blog', template: 'blog' },
         ],
+        //Now using https://github.com/addyosmani/critical v4.0.1
         options: {
-            minify: true,
+            //It's important to note here you should NOT set inline:true, this will break the whole system.
+            width:411,
+            height:823,
+            penthouse:{
+                timeout:1200000
+            }
         },
     });
 

index.js

@@ -1,4 +1,5 @@
 const mix = require('laravel-mix');
+const merge = require('lodash/merge');
 
 class Critical {
     constructor() {
@@ -7,10 +8,10 @@ class Critical {
 
     dependencies() {
         this.requiresReload = `
-            HTML Webpack critical has been installed. Please run "npm run dev" again.
+            Critical-Css-Webpack-Plugin has been installed. Please run "npm run dev" again.
         `;
 
-        return ['html-critical-webpack-plugin'];
+        return ['critical-css-webpack-plugin'];
     }
 
     register(config) {
@@ -20,11 +21,13 @@ class Critical {
             );
         }
 
-        const critical = Object.assign({
+        const critical = merge({
             enabled: mix.inProduction(),
             paths: {},
             urls: [],
-            options: {},
+            options: {
+                inline:false
+            },
         }, config);
 
         if (critical.paths.suffix == null) critical.paths.suffix = '_critical.min';
@@ -34,14 +37,16 @@ class Critical {
 
     webpackPlugins() {
         if (this.criticals.map((e) => e.enabled).some(Boolean)) {
-            const HtmlCritical = require('html-critical-webpack-plugin');
+
+            const CriticalCssPlugin = require("critical-css-webpack-plugin");
+
             const plugins = [];
 
             this.criticals.forEach((critical) => {
 
                 critical.enabled && critical.urls.forEach((template) => {
                     const criticalSrc = critical.paths.base + template.url;
-                    const criticalDest = `${critical.paths.templates + template.template + critical.paths.suffix  }.css`;
+                    const criticalDest = `${critical.paths.templates + template.template + critical.paths.suffix}.css`;
 
                     if (criticalSrc.indexOf('amp_') !== -1) {
 
@@ -50,9 +55,9 @@ class Critical {
 
                     }
 
-                    plugins.push(new HtmlCritical(Object.assign({
+                    plugins.push(new CriticalCssPlugin(Object.assign({
                         src: criticalSrc,
-                        dest: criticalDest,
+                        target: criticalDest,
                     }, critical.options)));
                 });
 

package.json

@@ -24,7 +24,8 @@
   },
   "homepage": "https://github.com/dadamotion/laravel-mix-criticalcss#readme",
   "dependencies": {
-    "html-critical-webpack-plugin": "^2.1.0"
+    "critical-css-webpack-plugin": "^3.0.0",
+    "lodash": "^4.17.21"
   },
   "peerDependencies": {
     "laravel-mix": "^4.0.0 || ^5.0.0 || ^6.0.0"