whoops

default.nix

@@ -178,6 +178,9 @@ let
       patchPhase = ''
         ln -sf ${nodeSource}/node_modules .
         cp ${webpackConfigFile} webpack.config.js
+        cp ${
+          ./imagemin-jpgify-webpack-plugin.js
+        } .imagemin-jpgify-webpack-plugin.js
         cp ${wandInit} wand.js
         cp ${templateHtml} template.html
       '';
@@ -188,6 +191,9 @@ let
         rm -f wand.js
         rm -f template.html
         cp ${webpackConfigFile} webpack.config.js
+        cp ${
+          ./imagemin-jpgify-webpack-plugin.js
+        } .imagemin-jpgify-webpack-plugin.js
         cp ${wandInit} wand.js
         cp ${templateHtml} template.html
         export NODE_PATH=$PWD/node_modules

imagemin-jpgify-webpack-plugin.js

@@ -0,0 +1,118 @@
+// Sourced from: https://raw.githubusercontent.com/iampava/imagemin-jpegify-webpack-plugin/master/plugin.js
+
+const imagemin = require('imagemin');
+const jpegify = require('png-to-jpeg');
+
+const GREEN = '\x1b[32m%s\x1b[0m';
+const RED = '\x1b[31m%s\x1b[0m';
+
+class ImageminJpegifyWebpackPlugin {
+    constructor({
+        config = [
+            {
+                test: /\.(png)/,
+                options: {
+                    quality: 50
+                }
+            }
+        ],
+        overrideExtension = true,
+        detailedLogs = false,
+        strict = true,
+        silent = false
+    } = {}) {
+        this.config = config;
+        this.detailedLogs = detailedLogs;
+        this.strict = strict;
+        this.overrideExtension = overrideExtension;
+        this.silent = silent;
+    }
+
+    apply(compiler) {
+        const onEmit = (compilation, cb) => {
+            let assetNames = Object.keys(compilation.assets);
+            let nrOfImagesFailed = 0;
+
+            if (this.silent && this.detailedLogs) {
+                compilation.warnings.push(new Error(`ImageminJpegifyWebpackPlugin: both the 'silent' and 'detailedLogs' options are true. Overriding 'detailedLogs' and disabling all console output.`));
+            }
+
+            Promise.all(
+                assetNames.map(name => {
+                    for (let i = 0; i < this.config.length; i++) {
+                        if (this.config[i].test.test(name)) {
+                            let outputName = name;
+                            if (this.overrideExtension) {
+                                outputName = outputName
+                                    .split('.')
+                                    .slice(0, -1)
+                                    .join('.');
+                            }
+                            outputName = `${outputName}.jpg`;
+
+                            let currentAsset = compilation.assets[name];
+
+                            return imagemin
+                                .buffer(currentAsset.source(), {
+                                    plugins: [jpegify(this.config[i].options)]
+                                })
+                                .then(buffer => {
+                                    let savedKB = (currentAsset.size() - buffer.length) / 1000;
+
+                                    if (this.detailedLogs && !this.silent) {
+                                        console.log(GREEN, `${savedKB.toFixed(1)} KB saved from '${name}'`);
+                                    }
+                                    compilation.assets[outputName] = {
+                                        source: () => buffer,
+                                        size: () => buffer.length
+                                    };
+
+                                    return savedKB;
+                                })
+                                .catch(err => {
+                                    let customErr = new Error(`ImageminJpegifyWebpackPlugin: "${name}" wasn't converted!`);
+
+                                    nrOfImagesFailed++;
+
+                                    if (this.strict) {
+                                        compilation.errors.push(err, customErr);
+                                    } else if (this.detailedLogs) {
+                                        compilation.warnings.push(err, customErr);
+                                    }
+
+                                    return 0;
+                                });
+                        }
+                    }
+                    return Promise.resolve(0);
+                })
+            ).then(savedKBArr => {
+                if (!this.silent) {
+                    let totalKBSaved = savedKBArr.reduce((acc, cur) => acc + cur, 0);
+
+                    if (totalKBSaved < 100) {
+                        console.log(GREEN, `imagemin-jpegify-webpack-plugin: ${Math.floor(totalKBSaved)} KB saved`);
+                    } else {
+                        console.log(GREEN, `imagemin-jpegify-webpack-plugin: ${Math.floor(totalKBSaved / 100) / 10} MB saved`);
+                    }
+
+                    if (nrOfImagesFailed > 0) {
+                        console.log(RED, `imagemin-jpegify-webpack-plugin: ${nrOfImagesFailed} images failed to convert to webp`);
+                    }
+                }
+
+                cb();
+            });
+        };
+
+        if (compiler.hooks) {
+            // webpack 4.x
+            compiler.hooks.emit.tapAsync('ImageminJpegifyWebpackPlugin', onEmit);
+        } else {
+            // older versions
+            compiler.plugin('emit', onEmit);
+        }
+    }
+}
+
+module.exports = ImageminJpegifyWebpackPlugin;

package.json

@@ -1,19 +1,21 @@
 {
   "dependencies": {
     "copy-webpack-plugin": "^5.1.1",
-    "css-loader": "^3.4.2",
+    "css-loader": "^3.5.2",
     "elm-hot-webpack-loader": "^1.1.6",
     "elm-webpack-loader": "^6.0.1",
     "favicons-webpack-plugin": "^1.0.2",
     "html-loader": "^0.5.5",
     "html-webpack-plugin": "^3.2.0",
+    "imagemin": "^7.0.1",
     "imagemin-webp-webpack-plugin": "^3.3.1",
     "imagemin-webpack-plugin": "^2.4.2",
     "jsdom": "^15.2.1",
-    "style-loader": "^1.1.3",
+    "png-to-jpeg": "^1.0.1",
+    "style-loader": "^1.1.4",
     "tempy": "^0.3.0",
     "terser-webpack-plugin": "^2.3.5",
-    "webpack": "^4.41.6",
+    "webpack": "^4.42.1",
     "webpack-cli": "^3.3.11",
     "webpack-dev-server": "^3.10.3",
     "workbox-webpack-plugin": "^4.3.1"

webpack.config.js

@@ -5,6 +5,7 @@ const CopyPlugin = require('copy-webpack-plugin')
 const { InjectManifest } = require('workbox-webpack-plugin')
 const ImageminPlugin = require('imagemin-webpack-plugin').default
 const ImageminWebpWebpackPlugin = require('imagemin-webp-webpack-plugin')
+const ImageminJpegifyWebpackPlugin = require('./.imagemin-jpgify-webpack-plugin.js')
 const FaviconsWebpackPlugin = require('favicons-webpack-plugin')
 const { JSDOM } = require('jsdom')
 const tempy = require('tempy')
@@ -59,25 +60,26 @@ const productionPlugins = [
         `),
     swDest: 'sw.js',
   }),
+  // TODO: build .l.pngs into jpgs
   new ImageminPlugin({
     jpegtran: { progressive: true },
     svgo: null,
   }),
   new ImageminWebpWebpackPlugin({
     config: [{
-      test: /\.jpe?g/,
+      test: /\.jpe?g$/,
       options: {
         force: true,
         quality: 75
       }
     }, {
-      test: /\.l\.png/,
+      test: /\.l\.png$/,
       options: {
         force: true,
         quality: 75
       }
     }, {
-      test: /\.png/,
+      test: /\.png$/,
       options: {
         force: true,
         lossless: true
@@ -88,6 +90,19 @@ const productionPlugins = [
     silent: true,
     strict: true,
   }),
+  new ImageminJpegifyWebpackPlugin({
+    config: [{
+      test: /\.l\.png$/,
+      options: {
+        force: true,
+        quality: 50
+      }
+    }],
+    overrideExtension: false,
+    detailedLogs: false,
+    silent: true,
+    strict: true,
+  }),
   new FaviconsWebpackPlugin({
     logo: path.join(__dirname, 'data', 'images', 'icon.png'),
     inject: false, // manually in our template for now cos its fuckd