fix: inline loader options not being parsed correctly

Author: Calvin-LL

package.json

@@ -43,6 +43,7 @@
   },
   "dependencies": {
     "@calvin-l/webpack-loader-util": "^1.0.2",
+    "loader-utils": "^2.0.0",
     "schema-utils": "^3.0.0",
     "sharp": "^0.26.3"
   },

src/index.ts

@@ -1,3 +1,4 @@
+import { parseQuery } from "loader-utils";
 import { validate } from "schema-utils";
 import { Schema } from "schema-utils/declarations/validate";
 import sharp from "sharp";
@@ -142,7 +143,10 @@ function addOptionsToResizeLoader(
   const nextLoader = loaders[loaderIndex + 1];
   const isNextLoaderQueryLoader = getIsLoaderQueryLoader(nextLoader);
 
-  const resizeLoaderOptions = nextLoader.options;
+  const resizeLoaderOptions =
+    typeof nextLoader.options === "string"
+      ? parseQuery("?" + nextLoader.options)
+      : nextLoader.options;
   const resizeLoaderRequest = nextLoader.request;
   const resizeLoaderPath = nextLoader.path;
 

test/e2e/__snapshots__/resizeLoaderWithOptions.test.ts.snap

@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`v4 resize loader with options should work with options in query: result 1`] = `
+Object {
+  "default": "76ab12b37821a8c18371948d1be1b6c1.jpg 300w, bd2b9fdf768b5eb139702c4c3b4573de.jpg",
+}
+`;
+
+exports[`v4 resize loader with options should work with options in webpackConfig: result 1`] = `"76ab12b37821a8c18371948d1be1b6c1.jpg 300w, bd2b9fdf768b5eb139702c4c3b4573de.jpg"`;
+
+exports[`v5 resize loader with options should work with options in query: result 1`] = `
+Object {
+  "default": "76ab12b37821a8c18371948d1be1b6c1.jpg 300w, bd2b9fdf768b5eb139702c4c3b4573de.jpg",
+}
+`;
+
+exports[`v5 resize loader with options should work with options in webpackConfig: result 1`] = `"76ab12b37821a8c18371948d1be1b6c1.jpg 300w, bd2b9fdf768b5eb139702c4c3b4573de.jpg"`;

test/e2e/helpers/WISLWebpackTestCompiler.ts

@@ -9,13 +9,15 @@ import {
 interface WISLCompileOptions extends Omit<CompileOptions, "entryFilePath"> {
   entryFileName?: string;
   loaderOptions?: any;
+  resizeLoaderOptions?: any;
   useQueryLoader?: boolean;
 }
 
 export default class WISLWebpackTestCompiler extends WebpackTestCompiler {
   compile(options: WISLCompileOptions = {}): Promise<WebpackTestBundle> {
     const {
       loaderOptions = {},
+      resizeLoaderOptions,
       entryFileName = "index.js",
       useQueryLoader = false,
     } = options;
@@ -27,7 +29,7 @@ export default class WISLWebpackTestCompiler extends WebpackTestCompiler {
       rules: [
         useQueryLoader
           ? {
-              test: /\.(png|jpg|svg)/i,
+              test: /\.(png|jpg|svg)$/i,
               use: [
                 {
                   loader: "webpack-query-loader",
@@ -52,14 +54,15 @@ export default class WISLWebpackTestCompiler extends WebpackTestCompiler {
               ],
             }
           : {
-              test: /\.(png|jpg|svg)/i,
+              test: /\.(png|jpg|svg)$/i,
               use: [
                 {
                   loader: path.resolve(__dirname, "../../../test-dist/cjs.js"),
                   options: loaderOptions,
                 },
                 {
                   loader: "webpack-image-resize-loader",
+                  options: resizeLoaderOptions,
                 },
               ],
             },

test/e2e/resizeLoaderWithOptions.test.ts

@@ -0,0 +1,41 @@
+import path from "path";
+
+import WISLWebpackTestCompiler from "./helpers/WISLWebpackTestCompiler";
+
+describe.each([4, 5] as const)(
+  "v%d resize loader with options",
+  (webpackVersion) => {
+    it("should work with options in webpackConfig", async () => {
+      const compiler = new WISLWebpackTestCompiler({ webpackVersion });
+      const bundle = await compiler.compile({
+        loaderOptions: {
+          sizes: ["300w", "original"],
+        },
+        resizeLoaderOptions: {
+          quality: 80,
+        },
+      });
+
+      expect(bundle.execute("main.js")).toMatchSnapshot("result");
+    });
+
+    it("should work with options in query", async () => {
+      const loaderPath = path.resolve(__dirname, "../../test-dist/cjs.js");
+      const loaderOptions = {
+        sizes: ["300w", "original"],
+      };
+      const loaderOptionsString = JSON.stringify(loaderOptions);
+      const resizeLoaderOptions = {
+        quality: 80,
+      };
+      const resizeLoaderOptionssString = JSON.stringify(resizeLoaderOptions);
+
+      const compiler = new WISLWebpackTestCompiler({ webpackVersion });
+      const bundle = await compiler.compile({
+        fileContentOverride: `__export__ = require('-!${loaderPath}?${loaderOptionsString}!webpack-image-resize-loader?${resizeLoaderOptionssString}!./Macaca_nigra_self-portrait_large.jpg');`,
+      });
+
+      expect(bundle.execute("main.js")).toMatchSnapshot("result");
+    });
+  }
+);