bugfix(mjml-browser): minification

- added html-minifier-terser (exc. terser) and associated dependencies
- created aliases for htmlnano and terser
- created minify.js file to process minification
- removed alias for mjml-migrate

Author: dazgreer

packages/mjml-browser/browser-mocks/empty.js

@@ -0,0 +1 @@
+module.exports = function empty() {}

packages/mjml-browser/browser-mocks/htmlnano.js

@@ -1,7 +1,11 @@
-export default {
-  async process(html) {
+// eslint-disable-next-line import/no-unresolved
+const minifyMock = require('minify')
+
+module.exports = {
+  async process(html, options = {}) {
+    const minified = await minifyMock(html, options)
     return {
-      html,
+      html: minified.result,
     }
   },
 }

packages/mjml-browser/browser-mocks/minify.js

@@ -0,0 +1,33 @@
+const { minify } = require('html-minifier-terser')
+
+module.exports = async (html, options = {}) => {
+  
+  try {
+    const safeOptions = {
+      ...options,
+      minifyCSS: options.minifyCSS !== undefined ? options.minifyCSS : true,
+      minifyJS: false,
+    }
+
+    const defaultOptions = {
+      collapseWhitespace: true,
+      removeComments: true,
+      removeOptionalTags: false,
+      removeRedundantAttributes: true,
+      removeScriptTypeAttributes: true,
+      removeTagWhitespace: false,
+      useShortDoctype: true,
+      ...safeOptions,
+    }
+
+    const result = await minify(html, defaultOptions)
+    
+    return {
+      result,
+    }
+  } catch (e) {
+    return {
+      result: html,
+    }
+  }
+}

packages/mjml-browser/package.json

@@ -33,5 +33,11 @@
     "uglifyjs-webpack-plugin": "^2.1.3",
     "webpack": "^4.36.1",
     "webpack-cli": "^3.3.6"
+  },
+  "dependencies": {
+    "buffer": "^6.0.3",
+    "html-minifier-terser": "^7.2.0",
+    "path-browserify": "^1.0.1",
+    "process": "^0.11.10"
   }
 }

packages/mjml-browser/webpack.config.js

@@ -1,4 +1,5 @@
 const path = require('path')
+const webpack = require('webpack')
 const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
 
 module.exports = {
@@ -13,13 +14,27 @@ module.exports = {
   },
   resolve: {
     alias: {
-      'path': path.resolve(__dirname, 'browser-mocks/path'),
+      'path': 'path-browserify',
       'fs': path.resolve(__dirname, 'browser-mocks/fs'),
       'uglify-js': path.resolve(__dirname, 'browser-mocks/uglify-js'),
-      'mjml-migrate': path.resolve(__dirname, 'browser-mocks/mjml-migrate'),
+      'minify': path.resolve(__dirname, 'browser-mocks/minify'), 
       'htmlnano': path.resolve(__dirname, 'browser-mocks/htmlnano'),
+      'terser': path.resolve(__dirname, 'browser-mocks/empty'),
+      'os': 'os-browserify/browser',
     },
   },
+  plugins: [
+    new webpack.ProvidePlugin({
+      process: 'process/browser',
+      Buffer: ['buffer', 'Buffer'],
+    }),
+  ],
+  node: {
+    fs: 'empty',
+    global: true,
+    process: true,
+    Buffer: true,
+  },
   optimization: {
     minimizer: [
       new UglifyJsPlugin({
@@ -49,9 +64,17 @@ module.exports = {
   },
   module: {
     rules: [
+      {
+        test: /\.mjs$/,
+        include: /node_modules/,
+        type: 'javascript/auto',
+      },
       {
         test: /\.js$/,
-        exclude: path.join(__dirname, 'node_modules'),
+        exclude: [
+          path.join(__dirname, 'node_modules'),
+          /html-minifier-terser/, 
+        ],
         use: [
           {
             loader: 'babel-loader',