fix(deps): bump image-minimizer-webpack-plugin to v3

examples/imagemin/bud.config.js

@@ -2,11 +2,14 @@
 
 /**
  * @typedef {import('@roots/bud').Bud} Bud
+ * @typedef {import('@roots/bud-imagemin')}
  *
  * @param {Bud} app
  */
-module.exports = async app =>
+module.exports = async app => {
   app
     .template({template: app.path('src', 'index.html')})
     .entry({app: 'app.js'})
     .minimize()
+    .imagemin('lossy')
+}

examples/imagemin/package.json

@@ -15,12 +15,6 @@
   },
   "devDependencies": {
     "@roots/bud": "workspace:*",
-    "@roots/bud-imagemin": "workspace:*",
-    "@types/imagemin-gifsicle": "^7",
-    "@types/imagemin-svgo": "^10",
-    "imagemin-gifsicle": "7.0.0",
-    "imagemin-jpegtran": "7.0.0",
-    "imagemin-optipng": "8.0.0",
-    "imagemin-svgo": "10.0.0"
+    "@roots/bud-imagemin": "workspace:*"
   }
 }

packages/@roots/bud-imagemin/package.json

@@ -16,8 +16,18 @@
     "bud-extension",
     "imagemin"
   ],
+  "contributors": [
+    {
+      "name": "kellymears",
+      "url": "https://github.com/kellymears"
+    },
+    {
+      "name": "QWp6t",
+      "url": "https://github.com/QWp6t"
+    }
+  ],
   "engines": {
-    "node": ">=14"
+    "node": ">=16"
   },
   "files": [
     "lib/",
@@ -60,39 +70,9 @@
     "webpack": "5.65.0"
   },
   "dependencies": {
+    "@squoosh/lib": "^0.4.0",
     "helpful-decorators": "^2.1.0",
-    "image-minimizer-webpack-plugin": "^2.2.0",
-    "imagemin": "^8.0.1",
+    "image-minimizer-webpack-plugin": "^3.0.0",
     "tslib": "^2.3.1"
-  },
-  "peerDependencies": {
-    "imagemin-gifsicle": "7.0.0",
-    "imagemin-jpegtran": "7.0.0",
-    "imagemin-optipng": "8.0.0",
-    "imagemin-svgo": "10.0.1"
-  },
-  "peerDependenciesMeta": {
-    "imagemin-gifsicle": {
-      "optional": true
-    },
-    "imagemin-jpegtran": {
-      "optional": true
-    },
-    "imagemin-optipng": {
-      "optional": true
-    },
-    "imagemin-svgo": {
-      "optional": true
-    }
-  },
-  "contributors": [
-    {
-      "name": "kellymears",
-      "url": "https://github.com/kellymears"
-    },
-    {
-      "name": "QWp6t",
-      "url": "https://github.com/QWp6t"
-    }
-  ]
+  }
 }

packages/@roots/bud-imagemin/src/imagemin.config.ts

@@ -1,39 +1,54 @@
-import type {Framework} from '@roots/bud-framework'
-import {bind} from 'helpful-decorators'
+import {Framework} from '@roots/bud-framework'
+import {Container} from '@roots/container'
+import {isString} from 'lodash'
 
-export class Config {
-  public _app: () => Framework
+import * as BudImagemin from './imagemin.extension'
 
-  public get app(): Framework {
-    return this._app()
-  }
+export interface imagemin {
+  (
+    callback: (options: Container) => typeof BudImagemin.options,
+  ): Framework
+}
+export interface imagemin {
+  (setting: 'lossless' | 'lossy'): Framework
+}
+
+const lossless = {
+  encodeOptions: {
+    mozjpeg: {quality: 100},
+    webp: {lossless: 1},
+    avif: {cqLevel: 0},
+  },
+}
 
-  public constructor(app: Framework) {
-    this._app = () => app
+export const imagemin: imagemin = function (
+  option:
+    | 'lossless'
+    | 'lossy'
+    | ((options: Container) => typeof BudImagemin.options),
+): Framework {
+  const ctx = this as Framework
+
+  if (isString(option) && option == 'lossy') {
+    ctx.extensions
+      .get('@roots/bud-imagemin')
+      .setOption('minimizer.options', {})
+    return ctx
   }
 
-  @bind
-  public setPlugins(plugins: Array<[any, any]> | any) {
-    this.app.info({
-      message: 'bud.imagemin called',
-      suffix: JSON.stringify(plugins),
-    })
+  if (isString(option) && option == 'lossless') {
+    ctx.extensions
+      .get('@roots/bud-imagemin')
+      .setOption('minimizer.options', lossless)
+    return ctx
+  }
 
-    const imagemin = this.app.extensions.get(
-      'image-minimizer-webpack-plugin',
+  ctx.extensions
+    .get('@roots/bud-imagemin')
+    .setOption(
+      'minimizer',
+      option(ctx.extensions.get('@roots/bud-imagemin').options),
     )
 
-    if (plugins && plugins.length) {
-      imagemin.setOption('minimizerOptions.plugins', plugins)
-
-      this.app.log({
-        message: 'plugins',
-        suffix: JSON.stringify(
-          imagemin.getOption('minimizerOptions.plugins'),
-        ),
-      })
-    }
-
-    return this.app
-  }
+  return ctx
 }

packages/@roots/bud-imagemin/src/imagemin.extension.ts

@@ -1,52 +1,44 @@
-import type {Extension} from '@roots/bud-framework'
-
-import {Config} from './imagemin.config'
-import {BudImageMinPlugin} from './imagemin.plugin'
-
-export const BudImageMinExtension: Extension.Module = {
-  name: '@roots/bud-imagemin',
-
-  /**
-   * Exposes app.babel configuration utility
-   *
-   * @public
-   */
-  mixin: async app => ({
-    imagemin: [Config, app],
-  }),
-
-  register: async app => {
-    await app.extensions.add(BudImageMinPlugin)
+import type {Extension, Framework} from '@roots/bud-framework'
+import ImageMinimizerPlugin, {
+  squooshGenerate,
+  squooshMinify,
+} from 'image-minimizer-webpack-plugin'
+
+import {imagemin} from './imagemin.config'
+
+export const name: Extension.Module['name'] =
+  '@roots/bud-imagemin'
+
+export const options: Extension.Module['options'] = {
+  test: /.(jpe?g|png|gif|tif|webp|svg|avif)$/i,
+  minimizer: {
+    implementation: squooshMinify,
+    options: {},
   },
+  generator: [
+    {
+      preset: 'webp',
+      implementation: squooshGenerate,
+      options: {
+        encodeOptions: {webp: {quality: 90}},
+      },
+    },
+  ],
+}
 
-  boot: async app => {
-    const plugins: Array<[string, {[key: string]: any}]> = [
-      ['imagemin-gifsicle', {interlaced: true}],
-      ['imagemin-jpegtran', {progressive: true}],
-      ['imagemin-optipng', {optimizationLevel: 7}],
-    ]
-
-    const eligiblePlugins = await Promise.all(
-      plugins.map(
-        async ([name, options]): Promise<Array<any>> => {
-          try {
-            const pluginImport = await import(name)
-
-            const pluginModule =
-              pluginImport.default || pluginImport
-
-            return pluginModule ? [name, options] : []
-          } catch (e) {
-            app.error(e)
-
-            return []
-          }
-        },
-      ),
-    )
+export const register: Extension.Module['register'] = async (
+  app: Framework,
+) => {
+  app.api.set('imagemin', imagemin.bind(app))
+  // @ts-ignore
+  app.api.bindFacade('imagemin')
+}
 
-    app.imagemin.setPlugins(
-      eligiblePlugins.filter(plugin => plugin !== []),
-    )
-  },
+export const boot = async (app: Framework): Promise<void> => {
+  app.hooks.on('build.optimization.minimizer', minimizer => [
+    ...minimizer,
+    new ImageMinimizerPlugin(
+      app.extensions.get('@roots/bud-imagemin').options.all(),
+    ),
+  ])
 }

packages/@roots/bud-imagemin/src/index.ts

@@ -17,23 +17,17 @@
  * @packageDocumentation
  */
 
-import {Config} from './imagemin.config'
-import {BudImageMinExtension} from './imagemin.extension'
-import {BudImageMinPlugin} from './imagemin.plugin'
+import {imagemin} from './imagemin.config'
+import * as BudImagemin from './imagemin.extension'
 
 declare module '@roots/bud-framework' {
   interface Framework {
-    imagemin: Config
-  }
-
-  interface Plugins {
-    '@roots/bud-imagemin': typeof BudImageMinPlugin
-    'image-minimizer-webpack-plugin': typeof BudImageMinPlugin
+    imagemin: imagemin
   }
 
   interface Modules {
-    '@roots/bud-imagemin': typeof BudImageMinExtension
+    '@roots/bud-imagemin': typeof BudImagemin
   }
 }
 
-export const {name, mixin, register, boot} = BudImageMinExtension
+export const {name, options, register, boot} = BudImagemin

packages/@roots/bud-imagemin/tsconfig.json

@@ -5,21 +5,10 @@
     "rootDir": "./src",
     "outDir": "./lib/cjs",
     "declarationDir": "./types",
-    "types": [
-      "node",
-      "jest",
-      "@roots/bud-api",
-      "@roots/bud-framework"
-    ]
+    "types": ["node", "@roots/bud-api", "@roots/bud-framework"]
   },
-  "include": [
-    "src"
-  ],
-  "exclude": [
-    "lib",
-    "node_modules",
-    "types"
-  ],
+  "include": ["src"],
+  "exclude": ["lib", "node_modules", "types"],
   "references": [
     {
       "path": "./../bud-api/tsconfig.json"