fix: support for generating images from svg (sharp)

lint-staged.config.js

@@ -1,6 +1,6 @@
 "use strict";
 
 module.exports = {
-  "*": ["prettier --write --ignore-unknown", "cspell"],
+  "*": ["prettier --write --ignore-unknown", "cspell --no-must-find-files"],
   "*.{js}": ["eslint --cache --fix"],
 };

src/utils.js

@@ -980,7 +980,26 @@ squooshMinify.teardown = squooshImagePoolTeardown;
  */
 
 // https://github.com/lovell/sharp/blob/e40a881ab4a5e7b0e37ba17e31b3b186aef8cbf6/lib/output.js#L7-L23
-const SHARP_FORMATS = new Map([
+const SHARP_GENERATE_FORMATS = new Map([
+  ["avif", "avif"],
+  ["gif", "gif"],
+  ["heic", "heif"],
+  ["heif", "heif"],
+  ["j2c", "jp2"],
+  ["j2k", "jp2"],
+  ["jp2", "jp2"],
+  ["jpeg", "jpeg"],
+  ["jpg", "jpeg"],
+  ["jpx", "jp2"],
+  ["png", "png"],
+  ["raw", "raw"],
+  ["tif", "tiff"],
+  ["tiff", "tiff"],
+  ["webp", "webp"],
+  ["svg", "svg"],
+]);
+
+const SHARP_MINIFY_FORMATS = new Map([
   ["avif", "avif"],
   ["gif", "gif"],
   ["heic", "heif"],
@@ -1011,7 +1030,11 @@ async function sharpTransform(
 ) {
   const inputExt = path.extname(original.filename).slice(1).toLowerCase();
 
-  if (!SHARP_FORMATS.has(inputExt)) {
+  if (
+    !targetFormat
+      ? !SHARP_MINIFY_FORMATS.has(inputExt)
+      : !SHARP_GENERATE_FORMATS.has(inputExt)
+  ) {
     if (targetFormat) {
       const error = new Error(
         `Error with '${original.filename}': Input file has an unsupported format`

test/ImageminPlugin.test.js

@@ -2556,4 +2556,40 @@ describe("imagemin plugin", () => {
 
     expect(cssContent).toMatchSnapshot("main.css");
   });
+
+  it("should generate webp from svg (sharpGenerate)", async () => {
+    const stats = await runWebpack({
+      entry: path.join(fixturesPath, "generator-and-minimizer-7.js"),
+      imageminPluginOptions: {
+        test: /\.(jpe?g|gif|json|svg|png|webp)$/i,
+        generator: [
+          {
+            preset: "webp",
+            implementation: ImageMinimizerPlugin.sharpGenerate,
+            options: {
+              encodeOptions: {
+                webp: {
+                  lossless: true,
+                },
+              },
+            },
+          },
+        ],
+      },
+    });
+    const { compilation } = stats;
+    const { warnings, errors } = compilation;
+
+    expect(warnings).toHaveLength(0);
+    expect(errors).toHaveLength(0);
+
+    const file = path.resolve(
+      __dirname,
+      compilation.options.output.path,
+      "./loader-test.webp"
+    );
+    const ext = await fileType.fromFile(file);
+
+    expect(/image\/webp/i.test(ext.mime)).toBe(true);
+  });
 });

test/fixtures/generator-and-minimizer-7.js

@@ -0,0 +1 @@
+require("./loader-test.svg?as=webp");

test/fixtures/unknown-and-jpg.js

@@ -0,0 +1,2 @@
+console.log(new URL("../fixtures/loader-test.unknown", import.meta.url));
+console.log(new URL("../fixtures/loader-test.jpg", import.meta.url));

test/plugin-minimizer-option.test.js

@@ -650,7 +650,7 @@ describe("plugin minify option", () => {
 
   it("should work with 'sharpMinify' minifier and don't rename unsupported asset", async () => {
     const stats = await runWebpack({
-      entry: path.join(fixturesPath, "./svg-and-jpg.js"),
+      entry: path.join(fixturesPath, "./unknown-and-jpg.js"),
       fileLoaderOff: true,
       imageminPluginOptions: {
         minimizer: {
@@ -666,7 +666,7 @@ describe("plugin minify option", () => {
     const { warnings, errors, assets } = compilation;
 
     const originalAsset = Object.keys(assets).filter((asset) =>
-      asset.includes("loader-test.svg")
+      asset.includes("loader-test.unknown")
     );
     const minifiedAsset = Object.keys(assets).filter((asset) =>
       asset.includes("minified-xxx-loader-test-yyy.jpg")