fix: limit should always be a number and 0 value handles as number (#180)

BREAKING CHANGE: `limit` should always be a number and 0 value handles as number

Author: evilebottnawi

src/index.js

@@ -11,27 +11,21 @@ import mime from 'mime';
 import normalizeFallback from './utils/normalizeFallback';
 import schema from './options.json';
 
-// Loader Mode
-export const raw = true;
-
 export default function loader(src) {
   // Loader Options
   const options = getOptions(this) || {};
 
   validateOptions(schema, options, 'URL Loader');
 
-  const file = this.resourcePath;
   // Set limit for resource inlining (file size)
-  let limit = options.limit;
-
-  if (limit) {
-    limit = parseInt(limit, 10);
-  }
-  // Get MIME type
-  const mimetype = options.mimetype || mime.getType(file);
+  const limit = options.limit ? parseInt(options.limit, 10) : options.limit;
 
   // No limit or within the specified limit
-  if (!limit || src.length <= limit) {
+  if ((!limit && typeof limit !== 'number') || src.length <= limit) {
+    const file = this.resourcePath;
+    // Get MIME type
+    const mimetype = options.mimetype || mime.getType(file);
+
     if (typeof src === 'string') {
       src = Buffer.from(src);
     }
@@ -58,3 +52,6 @@ export default function loader(src) {
 
   return fallback.call(fallbackLoaderContext, src);
 }
+
+// Loader Mode
+export const raw = true;

src/options.json

@@ -2,7 +2,7 @@
   "type": "object",
   "properties": {
     "limit": {
-      "type": ["string", "number"]
+      "type": ["number"]
     },
     "mimetype": {
       "type": "string"

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

@@ -3,20 +3,27 @@
 exports[`validation 1`] = `
 "URL Loader Invalid Options
 
-options.limit should be string,number
+options.limit should be number
 "
 `;
 
 exports[`validation 2`] = `
 "URL Loader Invalid Options
 
-options.mimetype should be string
+options.limit should be number
 "
 `;
 
 exports[`validation 3`] = `
 "URL Loader Invalid Options
 
+options.mimetype should be string
+"
+`;
+
+exports[`validation 4`] = `
+"URL Loader Invalid Options
+
 options.fallback should be string
 options.fallback should be object
 options.fallback should match some schema in anyOf

test/__snapshots__/errors.test.js.snap renamed to test/__snapshots__/validate-options.test.js.snap

@@ -15,13 +15,13 @@ describe('limit option', () => {
     expect(source).toMatchSnapshot();
   });
 
-  it('{Number} (6776)', async () => {
+  it('{Number} (0)', async () => {
     // Image size is 6777
     const config = {
       loader: {
         test: /\.png$/,
         options: {
-          limit: 6776,
+          limit: 0,
         },
       },
     };
@@ -32,13 +32,13 @@ describe('limit option', () => {
     expect(source).toMatchSnapshot();
   });
 
-  it('{Number} (6777)', async () => {
+  it('{Number} (0.1)', async () => {
     // Image size is 6777
     const config = {
       loader: {
         test: /\.png$/,
         options: {
-          limit: 6777,
+          limit: 0.1,
         },
       },
     };
@@ -49,13 +49,13 @@ describe('limit option', () => {
     expect(source).toMatchSnapshot();
   });
 
-  it('{Number} (6778)', async () => {
+  it('{Number} (6776)', async () => {
     // Image size is 6777
     const config = {
       loader: {
         test: /\.png$/,
         options: {
-          limit: 6778,
+          limit: 6776,
         },
       },
     };
@@ -66,12 +66,13 @@ describe('limit option', () => {
     expect(source).toMatchSnapshot();
   });
 
-  it('{Number} (big)', async () => {
+  it('{Number} (6777)', async () => {
+    // Image size is 6777
     const config = {
       loader: {
         test: /\.png$/,
         options: {
-          limit: Number.MAX_SAFE_INTEGER,
+          limit: 6777,
         },
       },
     };
@@ -82,12 +83,13 @@ describe('limit option', () => {
     expect(source).toMatchSnapshot();
   });
 
-  it('{Number} (less)', async () => {
+  it('{Number} (6778)', async () => {
+    // Image size is 6777
     const config = {
       loader: {
         test: /\.png$/,
         options: {
-          limit: Number.MIN_SAFE_INTEGER,
+          limit: 6778,
         },
       },
     };
@@ -98,12 +100,28 @@ describe('limit option', () => {
     expect(source).toMatchSnapshot();
   });
 
-  it('{String} (big)', async () => {
+  it('{Number} (Number.MAX_SAFE_INTEGER)', async () => {
     const config = {
       loader: {
         test: /\.png$/,
         options: {
-          limit: '8192',
+          limit: Number.MAX_SAFE_INTEGER,
+        },
+      },
+    };
+
+    const stats = await webpack('fixture.js', config);
+    const [{ source }] = stats.toJson().modules;
+
+    expect(source).toMatchSnapshot();
+  });
+
+  it('{Number} (Number.MIN_SAFE_INTEGER)', async () => {
+    const config = {
+      loader: {
+        test: /\.png$/,
+        options: {
+          limit: Number.MIN_SAFE_INTEGER,
         },
       },
     };

test/limit-option.test.js

@@ -17,8 +17,8 @@ it('validation', async () => {
   // The `fallback` loader can have any optsions so we use `additionalProperties: false` to avoid problems.
   expect(() => validate({ unknown: 'unknown' })).not.toThrow();
 
-  expect(() => validate({ limit: '8192' })).not.toThrow();
   expect(() => validate({ limit: 8192 })).not.toThrow();
+  expect(() => validate({ limit: '8192' })).toThrowErrorMatchingSnapshot();
   expect(() => validate({ limit: true })).toThrowErrorMatchingSnapshot();
 
   expect(() => validate({ mimetype: 'image/png' })).not.toThrow();