fix: fallback options behaviour

Author: alexander-akait

src/index.js

@@ -42,18 +42,18 @@ export default function loader(src) {
   }
 
   // Normalize the fallback.
-  const { loader: fallbackLoader, query: fallbackQuery } = normalizeFallback(
-    options.fallback,
-    options
-  );
+  const {
+    loader: fallbackLoader,
+    options: fallbackOptions,
+  } = normalizeFallback(options.fallback, options);
 
   // Require the fallback.
   const fallback = require(fallbackLoader);
 
   // Call the fallback, passing a copy of the loader context. The copy has the query replaced. This way, the fallback
   // loader receives the query which was intended for it instead of the query which was intended for url-loader.
   const fallbackLoaderContext = Object.assign({}, this, {
-    query: fallbackQuery,
+    query: fallbackOptions,
   });
 
   return fallback.call(fallbackLoaderContext, src);

src/utils/normalizeFallback.js

@@ -1,46 +1,27 @@
-function normalizeFallbackString(fallbackString, originalOptions) {
-  const index = fallbackString.indexOf('?');
-  if (index >= 0) {
-    return {
-      loader: fallbackString.substr(0, index),
-      query: fallbackString.substr(index),
-    };
-  }
+import loaderUtils from 'loader-utils';
 
-  // To remain consistent with version 1.0.1, pass any other options which were provided to url-loader to the fallback loader.
-  const { fallback, limit, mimetype, ...otherOptions } = originalOptions;
+export default function normalizeFallback(fallback, originalOptions) {
+  let loader = 'file-loader';
+  let options = {};
 
-  return {
-    loader: fallbackString,
-    query: otherOptions,
-  };
-}
+  if (typeof fallback === 'string') {
+    loader = fallback;
 
-function normalizeFallbackObject(fallbackObject) {
-  return {
-    loader: fallbackObject.loader,
-    query: fallbackObject.options,
-  };
-}
+    const index = fallback.indexOf('?');
 
-/**
- * Converts the fallback option, which can be a string or an object, to an object with a loader and a query. The result
- * has this form:
- *   {
- *     loader: 'file-loader',
- *     query: '?name=[name].[ext]'
- *   }
- * Note that the returned query can be either a string or an object.
- */
-export default function normalizeFallback(fallback, originalOptions) {
-  // If no fallback was provided, use file-loader.
-  if (!fallback) {
-    return normalizeFallbackString('file-loader', originalOptions);
+    if (index >= 0) {
+      loader = fallback.substr(0, index);
+      options = loaderUtils.parseQuery(fallback.substr(index));
+    }
   }
 
-  if (typeof fallback === 'string') {
-    return normalizeFallbackString(fallback, originalOptions);
+  if (fallback !== null && typeof fallback === 'object') {
+    ({ loader, options } = fallback);
   }
 
-  return normalizeFallbackObject(fallback);
+  options = Object.assign({}, originalOptions, options);
+
+  delete options.fallback;
+
+  return { loader, options };
 }

test/__snapshots__/limit-option.test.js.snap

@@ -0,0 +1,8 @@
+import loader from '../src';
+import CJSLoader from '../src/cjs';
+
+describe('CJS', () => {
+  it('should exported loader', () => {
+    expect(CJSLoader).toEqual(loader);
+  });
+});

test/__snapshots__/mimetype-option.test.js.snap

@@ -0,0 +1,108 @@
+/* eslint-disable
+  prefer-destructuring,
+*/
+import path from 'path';
+
+import webpack from '@webpack-contrib/test-utils';
+
+describe('fallback option', () => {
+  test('{undefined}', async () => {
+    const config = {
+      rules: [
+        {
+          test: /\.png$/,
+          use: {
+            loader: path.join(__dirname, '../src'),
+            options: {},
+          },
+        },
+      ],
+    };
+
+    const stats = await webpack('fixture.js', config);
+    const { source } = stats.toJson().modules[0];
+
+    expect(source).toMatchSnapshot();
+  });
+
+  test('{String}', async () => {
+    const config = {
+      rules: [
+        {
+          test: /\.png$/,
+          use: {
+            loader: path.join(__dirname, '../src'),
+            options: {
+              limit: Number.MIN_SAFE_INTEGER,
+              name: '[name].[hash].[ext]',
+              unknown: 'value',
+              fallback: path.join(__dirname, 'fixtures/x-custom-loader'),
+            },
+          },
+        },
+      ],
+    };
+
+    const stats = await webpack('fixture.js', config);
+    const { source } = stats.toJson().modules[0];
+
+    expect(source).toMatchSnapshot();
+  });
+
+  test('{String} (with query)', async () => {
+    const config = {
+      rules: [
+        {
+          test: /\.png$/,
+          use: {
+            loader: path.join(__dirname, '../src'),
+            options: {
+              limit: Number.MIN_SAFE_INTEGER,
+              name: '[name].[hash].[ext]',
+              unknown: 'value',
+              fallback: `${path.join(
+                __dirname,
+                'fixtures/x-custom-loader'
+              )}?name=fallback-[hash].[ext]&unknown=fallback-value`,
+            },
+          },
+        },
+      ],
+    };
+
+    const stats = await webpack('fixture.js', config);
+    const { source } = stats.toJson().modules[0];
+
+    expect(source).toMatchSnapshot();
+  });
+
+  test('{Object}', async () => {
+    const config = {
+      rules: [
+        {
+          test: /\.png$/,
+          use: {
+            loader: path.join(__dirname, '../src'),
+            options: {
+              limit: Number.MIN_SAFE_INTEGER,
+              name: '[name].[hash].[ext]',
+              unknown: 'value',
+              fallback: {
+                loader: path.join(__dirname, 'fixtures/x-custom-loader'),
+                options: {
+                  name: 'fallback-[hash].[ext]',
+                  unknown: 'fallback-other-value',
+                },
+              },
+            },
+          },
+        },
+      ],
+    };
+
+    const stats = await webpack('fixture.js', config);
+    const { source } = stats.toJson().modules[0];
+
+    expect(source).toMatchSnapshot();
+  });
+});

test/cjs.test.js

@@ -0,0 +1,7 @@
+const utils = require('loader-utils');
+
+module.exports = function loader() {
+  const options = utils.getOptions(this);
+
+  return `module.exports=${JSON.stringify(options)}`;
+};

test/fallback-option.test.js

@@ -0,0 +1,68 @@
+/* eslint-disable
+  prefer-destructuring,
+*/
+import webpack from '@webpack-contrib/test-utils';
+
+describe('limit option', () => {
+  test('{undefined}', async () => {
+    const config = {
+      loader: {
+        test: /\.png$/,
+        options: {},
+      },
+    };
+
+    const stats = await webpack('fixture.js', config);
+    const { source } = stats.toJson().modules[0];
+
+    expect(source).toMatchSnapshot();
+  });
+
+  test('{Number} (big)', async () => {
+    const config = {
+      loader: {
+        test: /\.png$/,
+        options: {
+          limit: Number.MAX_SAFE_INTEGER,
+        },
+      },
+    };
+
+    const stats = await webpack('fixture.js', config);
+    const { source } = stats.toJson().modules[0];
+
+    expect(source).toMatchSnapshot();
+  });
+
+  test('{Number} (less)', async () => {
+    const config = {
+      loader: {
+        test: /\.png$/,
+        options: {
+          limit: Number.MIN_SAFE_INTEGER,
+        },
+      },
+    };
+
+    const stats = await webpack('fixture.js', config);
+    const { source } = stats.toJson().modules[0];
+
+    expect(source).toMatchSnapshot();
+  });
+
+  test('{String} (big)', async () => {
+    const config = {
+      loader: {
+        test: /\.png$/,
+        options: {
+          limit: '8192',
+        },
+      },
+    };
+
+    const stats = await webpack('fixture.js', config);
+    const { source } = stats.toJson().modules[0];
+
+    expect(source).toMatchSnapshot();
+  });
+});

test/fixtures/x-custom-loader/index.js

@@ -0,0 +1,36 @@
+/* eslint-disable
+  prefer-destructuring,
+*/
+import webpack from '@webpack-contrib/test-utils';
+
+describe('mimetype option', () => {
+  test('{undefined}', async () => {
+    const config = {
+      loader: {
+        test: /\.png$/,
+        options: {},
+      },
+    };
+
+    const stats = await webpack('fixture.js', config);
+    const { source } = stats.toJson().modules[0];
+
+    expect(source).toMatchSnapshot();
+  });
+
+  test('{String}', async () => {
+    const config = {
+      loader: {
+        test: /\.png$/,
+        options: {
+          mimetype: 'image/x-custom',
+        },
+      },
+    };
+
+    const stats = await webpack('fixture.js', config);
+    const { source } = stats.toJson().modules[0];
+
+    expect(source).toMatchSnapshot();
+  });
+});