default.nix

@@ -178,9 +178,6 @@ 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
       '';
@@ -191,9 +188,6 @@ 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

@@ -1,118 +0,0 @@
-// 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,21 +1,19 @@
 {
   "dependencies": {
     "copy-webpack-plugin": "^5.1.1",
-    "css-loader": "^3.5.2",
+    "css-loader": "^3.4.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",
-    "png-to-jpeg": "^1.0.1",
+    "style-loader": "^1.1.3",
-    "style-loader": "^1.1.4",
     "tempy": "^0.3.0",
     "terser-webpack-plugin": "^2.3.5",
-    "webpack": "^4.42.1",
+    "webpack": "^4.41.6",
     "webpack-cli": "^3.3.11",
     "webpack-dev-server": "^3.10.3",
     "workbox-webpack-plugin": "^4.3.1"
@@ -29,4 +27,4 @@
   "author": "notgne2",
   "license": "AGPL-3.0",
   "description": ""
-}
+}

webpack.config.js

@@ -5,7 +5,6 @@ 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')
@@ -60,26 +59,25 @@ 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
@@ -90,19 +88,6 @@ 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